-1
I have seen more and more values with multiple decimal places in CSS styles. Then the question arose. Up to how many decimal places does CSS actually accept and Browser can render?
Values like these work accurately?
width: 8.33333333%; (Grid do Bootstrap por exemplo)
or
font-size: 1.062575rem; (conversões de PX em REM)
These decimals are actually interpreted precisely by the browser, or both it and CSS have a limit of decimals?
2
Each browser works in a different way with floating points. To ensure it works properly, you can work with fractions and Calc.
For example:
width: calc(100% / 3);
Source: https://www.sitepoint.com/a-tale-of-css-and-sass-precision/
0
It seems that even CSS as HTML has a limit of decimals. This calculation will be on account of Browser, and according to this table to clearly see that modern Browsers work much better with these decimal places and more complex calculations.
Internet Explorer 7 truncate to 2 decimal places
Internet Explorer 8 truncate to 2 decimal places
Internet Explorer 9 truncate to 2 decimal places
Internet Explorer 10 truncate to 2 decimal places
Internet Explorer 11 truncate to 2 decimal places
Firefox 3.0 truncate to 3 decimal places
Firefox 3.5 truncate to 3 decimal places
Firefox 31 truncate to 3 decimal places
Chrome 20 round to 15 decimal places
Chrome 21 round to 15 decimal places
Chrome 37 round to 13 decimal places
Safari 6 (OSX Lion) round to 15 decimal places
Safari 6.1 (OSX Mountain Lion) round to 15 decimal places
Safari 7 (OSX Mavericks) round to 15 decimal places
Mobile Safari 7 (iOS7) round to 15 decimal places
Mobile Safari 8 (iOS8) round to 15 decimal places
Chrome 36 (Jelly Bean) [Nexus5] round to 15 decimal places
Chrome 30 (KitKat) [S5] round to 15 decimal places
Android Browser 4 (Jelly Bean) [Nexus7,Nexus4,S4,S3] round to 15 decimal places
Android Browser 4 (Ice Cream Sandwich) [Nexus,KindleFire2] round to 15 decimal places
Android Browser 4 (Gingerbread) [S2] truncate to 3 decimal places
Opera 12 truncate to 2 decimal places
Opera Next 24 round to 13 decimal places
Source: http://cruft.io/posts/percentage-calculations-in-ie/
For those who are curious and want to test the browser to see how many houses it recognizes here has a test page. http://cruft.io/static/rounding/
Browser other questions tagged css3 browser
You are not signed in. Login or sign up in order to post.