Things I wish I’d known about CSS
11–20 of 340 posts
Re: Things I wish I’d known about CSS
#12(c) Elon Musk, speaking about CSS (maybe)
Re: Things I wish I’d known about CSS
#13Pixels (px) in CSS are relative as well, and scale with zoom. What is the benefit of em/rem?
Re: Things I wish I’d known about CSS
#14Cached URL since the server is apparently over capacity: https://webcache.googleusercontent.com/search?q=cache:jcSTVF...
Re: Things I wish I’d known about CSS
#15Re: Things I wish I’d known about CSS
#16> Using pixels (px) is tempting because they’re simple to understand: declare font-size: 24px and the text will be 24px. But that won’t provide a great user experience, particularly for users who resize content at the browser level or zoom into content. Pixels (px) in CSS are relative as well, and scale with zoom. What is the benefit of em/rem?
They (em*) scale with the element's font size, and if you set an elements font-size itself in em, that will be relative to the parent element's font size.
For example:
body { font-size: 18px }
.something { border: 0.1em solid black; }
.something > .inner { font-size: 1.5em }
If you change the font-size on body, everything on that page will re-scale seamlessly. This is most useful for things like buttons/icons that are supposed to flow properly with text. So now even if you use them once in big text, and once in a small footnote, they'll still fit perfectly within the line.The biggest limitation to this approach is that you can easily end up with computed values that are weird fractions of pixels, so you have to be a bit smart and pick an easily divisible number for your base font-size if you're aiming for something pixel-perfect.