Welcome to WebmasterWorld Guest from 3.92.92.168

Forum Moderators: not2easy

Message Too Old, No Replies

Is There a Reason to Declare Both px AND rem?

     
1:16 am on Jan 24, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member planet13 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 16, 2010
posts: 3828
votes: 31


Hey all:

working on a wordpress theme, and it seems like the declared ALL sizing in both PX as well as in REM.

Examples:

h1 {
font-size: 36px;
font-size: 3.6rem;
}

h6 {
margin: 0 0 7px;
margin: 0 0 0.7rem;
}

.widget-area h2 a {
font-size: 16px;
font-size: 1.6rem;
margin: 0 0 5px;
margin: 0 0 0.5rem;
}


Is that really necessary?

Can I just get rid of rem sizing?

(And if I CAN just get rid of the rem sizing, does anyone know of a text editor that will automatically remove every line that ends with "rem;")

Thanks in advance.
1:44 am on Jan 24, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4558
votes: 363


There are a few text editors for both Windows and Mac that edit with regex. I seem to remember you are using Linux?

The rem is a measurement you can use for font size, but that is if you don't have one specified, and it would very likely give you a different font-size than the one right next to it - it is a relative size and related to the size specified for the primary or root element (H2 here). I have no idea why that is there along with a specified font size. Sometimes css out of context makes no sense.
1:48 am on Jan 24, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15934
votes: 889


does anyone know of a text editor that will automatically remove every line that ends with "rem;"

Any text editor that does regular expressions will do it, and possibly some that don't.

find:
^[^\n:]+:[\d. ]+rem;\n
replace with "" (nothing). Or delete, if your text editor has a separate function for that.

What the heck is a rem anyway?

:: detour to CSS3 docs [w3.org] followed by caniuse dot com ::

MSIE >= 9 and also all browsers you're ever likely to meet (FF 3.6, Safari 5 etcetera) except Opera Mini.

:: further detour to look up "root element" [w3.org] ::

Does that mean <html> or <body> ?
1:59 am on Jan 24, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4558
votes: 363


My understanding of the "root element" used in the description for rem is the basic element for the element whee it is applied. I may easily have that wrong, but for example, if applied to a class of
<p>
, the root element it would relate to would be
<p>
declared or default size.

?
2:13 am on Jan 24, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4558
votes: 363


BTW, the title tweak was done because no one here could answer the "Why Did They.." part of the question other than the theme developers where the theme originated. While they are welcome to answer here, they may not be lurking where they could readily respond.
5:54 pm on Jan 24, 2015 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


The units are defined twice because rems are a new unit (modern(ish) browsers only ie9+) and if only rems were used then older browsers would get no font-sizing at all.

The px sizes are a 'fallback' in the same way that we do fallbacks for other css3 properties when older support is required.

e.g.

background:#000;
background:rbga(0,0,0,0.3);

Older browses get the black and newer browsers get black with opacity.

Rem units are related to the root font-size (effectively the html element (not body)) and do not compound like ems. You can safely declare an element to be .8rem and know that if you nest that element several times the size will not compound; unlike ems which would get smaller and smaller on each nesting.

The beauty of rems is that just by changing the size on the html element you can change the whole page because all the font-sizes are related and the relationship is maintained on all the elements in the page. Those pages that are sized in pixels would have to have every single reference to a px unit changed to match a new design.

Remember that rems (and ems) preserve the users defaults and are better for accessibility rather than forcing a fixed px size on your user.
8:07 pm on Jan 24, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15934
votes: 889


The beauty of rems is that just by changing the size on the html element you can change the whole page because all the font-sizes are related and the relationship is maintained on all the elements in the page.

So it's basically intended to be more flexible than the older range from "xx-small" to "medium" to etcetera?

For it to work, do you have to declare some font size on the "html" element? Or will it default to the user's preferred size, assuming their browser allows you to set one?

I really hate sizes in pt or px, though. Seems like the fallback (the one listed first) should put it in terms of "small" or "x-large".
10:29 pm on Jan 24, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member planet13 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 16, 2010
posts: 3828
votes: 31


Thanks for the explanations.

I am still tempted to remove them though.
1:08 am on Jan 25, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15934
votes: 889


Now that we've got the explanation, I would be strongly inclined to keep them. In fact, if anything were to be removed it should be the px lines-- though for the sake of MSIE <= some-random-number they really ought to be replaced with a suitable percentage.
4:17 am on Jan 25, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


I agree with lucy24. The rem styles are going to be the ones that are currently used by modern browsers, so you have the potential to introduce unexpected consequences if you remove them. In addition, using px has generally been frowned upon for many years, as that fixed unit couldn't be re-sized for people wanting to view at larger sizes (I don't know if that's still the case). I'd leave them both for now.
9:53 am on Jan 26, 2015 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4



For it to work, do you have to declare some font size on the "html" element? Or will it default to the user's preferred size, assuming their browser allows you to set one?


Yes rem is based on the font-size of the root element (html)and that will be whatever the UA or user has set for its initial value (usually 16px but not guaranteed). You can of course change it to something else but then you disrespect the users settings.something else
2:50 pm on Jan 26, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4558
votes: 363


I use a percentage of that 16px default to set the root element base size for fonts. If a user has set a different default size I am hoping they are also browser savvy enough to click the "zoom" function built into modern browsers. Not a 100% fail-safe solution but I don't know of a practical solution that is.