robweir and jblatch1 The advantage over px is that it’s a relative unit; you can change the value at any time and all of your length values which use rem will scale automatically. For example:
html { font-size: 12px; }
h1 { font-size: 2rem; } <- 24px
h2 { font-size: 1.5rem; } <- 18px
p { font-size: 1rem; } <- 12px
I love A List Apart because I can find folks like you who love CSS (as I do), and I can learn from their big, selector filled brains. Fun article. Thanks!
“Can’t use it on a daily basis blabla”.
That doesn’t count. It’s very important to have this new stuff and it’s important to have it now. People like Glow (first comment) won’t be satisfied until we have daily browser updates bringing the hot new features automatically to everyone in the world, which won’t be a good thing, I guess.
I hadn’t ever heard of the root relative unit until now.
I could see myself setting font-size to 1px on the html element, (overwriting it in body to a more sane base) and then using rem as a pixel replacement everywhere. for instance, instead of the 10px base as seen in the article and using 1.2rem for 12px, I would set 1px base and use 12rem for a 12px match.
Are there pitfalls that I’m not thinking of off-hand?
Yep, it simplifies the math a lot and in my opinion. The reason why EMs are not very popular is because having to work with multiple digits decimals is a pain in the neck. REM is exactly what EMs should have been in the first place.
I was got excited when I came to read Viewport-relative lengths and calculated values. Unfortunately, Browser compatibility was the issue that I can use them in my projects. Anyways, It was good to read such useful informative article.
Thanks – very interesting. After years, I finally redesigned our web sites with CSS basically by playing around and looking up specific answers until things worked. Recently I updated a few pages with a new feature by sticking in a gasp one-column one-row table because I didn’t want to start all over with CSS, which I haven’t used in months.
This inspires me to look into it again – and the descendents thing offers some great possibilities I hadn’t been aware of as swell.
I think this is the part of the HTML story where these features and functions start to divide those who are HTML savvy into the amateurs and professionals.
All very interesting stuff.
Copy & paste the code below to embed this comment.
suniltank
Fortunately we have used CSS, and all we have to do is open our CSS file which stores the layout of the site, and change the number relating to the position of the image. That will change his position throughout the whole site. http://www.ahmedabadwebs.com
I have habbit to use px values, it’s only matter of habit to change on rem value, but it’s good possibility to have these choice. Thing that i like most about CSS3 is that you can make “dynamic” effects almost like in Adobe Flash.
Really a great post. All that looks really promising but as another user said, what about older versions of IE?
I also think that pseudoclasses should be used only if you really need to because, when you have to modify/optimize some code made by others, it is always a pain to find appropriate selectors and so on.
26 Reader Comments
Back to the Articlecrow11381
I’d be interested to know if there is a performance difference between using:
li { color: #00F; }
li:nth-child(odd) { color: #F00; }
li:last-child { color: #00F; }
vs using
li { color: #00F; }
li:nth-child(odd):not(:last-child) { color: #F00; }
crow11381
I’ve found that when doing responsive design, rem is easier to work with than px or %. That seems to be where it really shows it’s usefulness.
Peter Gasston
robweir andjblatch1 The advantage over px is that it’s a relative unit; you can change the value at any time and all of your length values which use rem will scale automatically. For example:html { font-size: 12px; }
h1 { font-size: 2rem; } <- 24px
h2 { font-size: 1.5rem; } <- 18px
p { font-size: 1rem; } <- 12px
html { font-size: 14px; }
h1 { font-size: 2rem; } <- 28px
h2 { font-size: 1.5rem; } <- 21px
p { font-size: 1rem; } <- 14px
The advantage over em is that it’s always relative to a fixed size, so you don’t get the 0.546728em problem.
onerredfish
I love A List Apart because I can find folks like you who love CSS (as I do), and I can learn from their big, selector filled brains. Fun article. Thanks!
Moritz Gießmann
Great article!
“Can’t use it on a daily basis blabla”.
That doesn’t count. It’s very important to have this new stuff and it’s important to have it now. People like Glow (first comment) won’t be satisfied until we have daily browser updates bringing the hot new features automatically to everyone in the world, which won’t be a good thing, I guess.
bluesaunders
I hadn’t ever heard of the root relative unit until now.
I could see myself setting font-size to 1px on the html element, (overwriting it in body to a more sane base) and then using rem as a pixel replacement everywhere. for instance, instead of the 10px base as seen in the article and using 1.2rem for 12px, I would set 1px base and use 12rem for a 12px match.
Are there pitfalls that I’m not thinking of off-hand?
Marcello.Damasceno
Yep, it simplifies the math a lot and in my opinion. The reason why EMs are not very popular is because having to work with multiple digits decimals is a pain in the neck. REM is exactly what EMs should have been in the first place.
daljit
I was got excited when I came to read Viewport-relative lengths and calculated values. Unfortunately, Browser compatibility was the issue that I can use them in my projects. Anyways, It was good to read such useful informative article.
orange county web designer
This is an excellent and approachable session. Thanks for posting it.
WpShouter
Thanks – very interesting. After years, I finally redesigned our web sites with CSS basically by playing around and looking up specific answers until things worked. Recently I updated a few pages with a new feature by sticking in a gasp one-column one-row table because I didn’t want to start all over with CSS, which I haven’t used in months.
This inspires me to look into it again – and the descendents thing offers some great possibilities I hadn’t been aware of as swell.
richardstowey
I think this is the part of the HTML story where these features and functions start to divide those who are HTML savvy into the amateurs and professionals.
All very interesting stuff.
suniltank
Fortunately we have used CSS, and all we have to do is open our CSS file which stores the layout of the site, and change the number relating to the position of the image. That will change his position throughout the whole site. http://www.ahmedabadwebs.com
Smak83
I have habbit to use px values, it’s only matter of habit to change on rem value, but it’s good possibility to have these choice. Thing that i like most about CSS3 is that you can make “dynamic” effects almost like in Adobe Flash.
danilopetrozzi
Really a great post. All that looks really promising but as another user said, what about older versions of IE?
I also think that pseudoclasses should be used only if you really need to because, when you have to modify/optimize some code made by others, it is always a pain to find appropriate selectors and so on.