I'm applying fallbacks to rem
values only if required (you know, the whole progressive enhancement train), without conditional comments (because it's not just an IE issue) and without additional lines of CSS for fallbacks all over the place. I'm just checking for the edge cases (userAgent
) and adding a stylesheet into the head only when these come into play. This stylesheet has overrides to apply px
values where needed.
I'm aware modernizr.js does a great job of detection and I would only need to use .no-cssremunit
(I've used it before) but I'm not using modernizr anywhere else and think it unnecessary to load a new library for only this, if I'm wrong, please correct me.
rem
support issues in question
- Samsung Note 2 (Android 4.3) doesn't support rem
- lte IE8 doesn't support
rem
values- Opera Mini doesn't support
rem
values
Source, the other "issues" with rem
's do not apply here.
I wrote this and it seems to be working well in IE <9 and Opera Mini (I'm unable to really test with a Note 2 with Android 4.3 at this time, will soon). BUT not being a JavaScript/jQuery developer I wanted to have another set of eyes on this to see if it is a good approach. Am I missing anything that could throw a wrench into it?
/* detect opera mini */
var isOperaMini = (navigator.userAgent.indexOf("Opera Mini") > -1);
/* userAgent detect (Samsung Note 2 -- Android 4.3) */
var isNoteTwo = (navigator.userAgent.match("Mozilla/5.0 (Linux; U; Android 4.3; de-de; SAMSUNG GT-N7105/N7105XXUENA1 Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"));
/* <ie8 -- addEventListener not supported by IE8 or later */
var isltIE9 = (!document.addEventListener);
/* if either variable matches, import stylesheet */
if (isOperaMini || isNoteTwo || isltIE9) {
var css = document.createElement("link");
css.rel = "stylesheet";
css.href = "css/rem-fallback.css";
}