using rems with a pixel fallback

Question

I'm working on mobile first framework. The project has a broad range of requirements, with a mass of browsers and devices over various locations to cater for. One of my key locations to target is India, where the browser and device usage trends differ greatly to that in the UK or US.

India browser usage http://gs.statcounter.com/#all-browser-IN-monthly-201301-201312-bar

UK Browser usage http://gs.statcounter.com/#all-browser-GB-monthly-201301-201312-bar

The browsers that I need to target for india region are opera, android, uc browser and nokia, but each of those have their little quirks. With that the range of devices differ

Opera mini - does not support rems Android (prior to chrome) v2-v4 has problems with both rems and ems http://www.quirksmode.org/css/units-values/mobile.html

-- Am I right in assuming that more recent versions of Android come pre installed with Chrome and the OS web browser?

I'd ideally like to use rems, as it removes the issues of nested content inheriting the em scale of its parent element. However based on the research on http://www.quirksmode.org, I need to have a fall back set.

So I'm going to need to declare a px value.

For example, can I do this:

h1 {font-size: 24px; line-height: 30px; margin-bottom: 10px; font-size: 1.846rem; line-height: 2.308rem; margin-bottom: 0.769rem} /* 24px / 30px / 10px */

Or do I have to do something like this?

h1 {font-size: 24px; line-height: 30px; margin-bottom: 10px}
h1 {font-size: 1.846rem; line-height: 2.308rem; margin-bottom: 0.769rem} /* 24px / 30px / 10px */

Or is there something else that is better?

I have seen a few js poly-fills, such as https://github.com/chuckcarpenter/REM-unit-polyfill, but there maybe cases where JavaScript is not enabled so this won't work.

Additionally I am try to focus on performance, so I want to keep the number of requests to a minimum and the keep the css a clean as possible.

Thanks

Answer 1

Both of your style declarations will work fine. CSS renders code in a cascading fashion, this means if one value is declared after another, the latter will be used. If a browser can render px but cannot render rem, the rem values will simply be ignored. If a browser can render both px and rem, the latter of the two will be used:

h1 {
    font-size: 12px; /* 1. Font size set to 12px */
    font-size: 1rem; /* 2. Font size set to 1rem, overriding previous value */
}

In this example, rem will be used on browsers which support that unit, and px will be used on those which do not.

h1 {
    font-size: 1rem; /* 1. Font size set to 1rem */
    font-size: 12px; /* 2. Font size set to 12px, overriding previous value */
}

In this example, px will be used on both browsers which support rem and browsers which do not.

Can I Use... will give you a better overview of which browsers support this unit.

---

As for performance, each character contained within a CSS file equates to 1 byte. The more bytes contained within your stylesheet, the longer it will take a browser to download it. So of course, adding px values alongside rem values will ultimately add to the download time, but most of the time this is negligible.

---

As for whether Android devices come bundled with Chrome: no, this is not the case. This is entirely up to the manufacturer.