Is There a Reason to Declare Both px AND rem?

Forum Moderators: not2easy

Message Too Old, No Replies

Is There a Reason to Declare Both px AND rem?

Planet13

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

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.

not2easy

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

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.

lucy24

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

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> ?

not2easy

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

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.

?

not2easy

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

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.

Paul_o_b

5:54 pm on Jan 24, 2015 (gmt 0)

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.

lucy24

8:07 pm on Jan 24, 2015 (gmt 0)

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".

Planet13

10:29 pm on Jan 24, 2015 (gmt 0)

Thanks for the explanations.

I am still tempted to remove them though.

lucy24

1:08 am on Jan 25, 2015 (gmt 0)

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.

Fotiman

4:17 am on Jan 25, 2015 (gmt 0)

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.

Paul_o_b

9:53 am on Jan 26, 2015 (gmt 0)

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

not2easy

2:50 pm on Jan 26, 2015 (gmt 0)

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.