I am working on a project in which I have a responsive grid which I have achieved using flex wrap property. Since I am supporting IE9 and lower versions of Firefox, version 28 and below, how do I find out, through javascript, the support for the same. Currently I have only been able to identify IE9 browser through conditional statement but does anyone now how to detect for Firefox older versions through javascript.
3 Answers
I found that this is the simplest method:
var d = document.documentElement.style
if (('flexWrap' in d) || ('WebkitFlexWrap' in d) || ('msFlexWrap' in d)){
alert('ok');
}
I tried hasOwnProperty
too but it doesn't work in IE and FF.
So why use 40 KB of modernizr when you can have just 3 lines of js ?
-
Modernizr is not just for flexWrap, it is for CSS properties across browser. As I had mentioned in my answer, use the simplest method as your need. For ex: You don't even need to check for
WebkitFlexWrap
if your application is not supporting webkit browsers, that's one less condition to check right. Nov 21, 2014 at 1:11 -
2it is. Safari needs WebkitFlexWrap. If you look at Modernizr code is it inefficient bc it uses all possible prefixes. And even if you need to check 4-5 properties you still get 10x more code :/– AlexNov 21, 2014 at 13:14
-
I agree with you and personally I would go with checking 4-5 properties and if the browser is not supported, I would simply ask to upgrade the browser. That changes if I am designing a page for a corporate and they decide to support wide range of browsers. Now I can write code to test 4-5 properties myself, later few more added and so on.. in the end I will have an external JS that tests for 10-15 properties. but Isn't that what modernizr is all about? I am not trying to promote modernizr.. but they do have custom build.. I tried for flexbox and it is 1.8k which seems reasonable. Nov 21, 2014 at 15:18
-
-
If you only use the latests flexbox specs, you should remove the
msFlexWrap
(in other words, you loose support for IE10 :D). Jul 19, 2017 at 13:54
CSS Property Detections
A simple CSS property detection technique is to test it directly on an element and check if it returns undefined
like below,
element.style.<propertyName> != undefined
.
Simplest Method (but limited support)
The above method directly checks for the property and should be sufficient for most common properties (not for flex-wrap).
function isStyleSupported(el, property) {
return el.style[property] != undefined;
}
var testEl = document.getElementById('test');
testEl.innerHTML = (isStyleSupported(testEl, 'flexWrap')) ? "Flex Wrap is supported" : "Flex Wrap is NOT supported";
<div id="test"></div>
You can add a little more code to check if the property is supported with dom prefixes,
Slightly extensive for better support (works for flex-wrap)
var domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');
function toCamelCase(cssProp) {
return cssProp.replace(/-([a-z])/gi, function(s, prop) {
return prop.toUpperCase();
});
}
function isStyleSupported(el, property) {
if (el.style[toCamelCase(property)] != undefined) {
return true;
} //supported
property = toCamelCase("-" + property);
for (var i = 0; i < domPrefixes.length; i++) { //check with dom prefixes
if (el.style[domPrefixes[i] + property] !== undefined) {
return true; //supported with dom prefix
}
}
}
var divEl = document.getElementById('result'), textEl = document.getElementById('textbox');
document.getElementById('checkSupport').onclick = function() {
divEl.innerHTML = (isStyleSupported(divEl, textEl.value)) ? textEl.value + " is supported" : textEl.value + " is NOT supported";
};
<input type="text" id="textbox" value="flex-wrap" />
<button id="checkSupport">Check</button>
<div id="result"></div>
It really gets complicated when you decide to generalize this for any property across all browser. This is where we decide to go for modernizr
which has extended support to handle exceptions cases.
CSS.supports
There is a new CSS API CSS.supports
which returns a boolean to check if a specific CSS feature is supported by the browser. However this is a new API so we still be using plugins like modernizr
until there is a support required for older browser.
Conclusion:
Use the simplest style detection element.style.<property> != undefined
or with domPrefixes
if your requirement is simple. You can always customize it a little more as your need, but if it is complicated and extensive, go for modernizr
which has extended code for feature detection.
Expanding on @AndresTet's answer, if you do not want a complete modernizr build, you can create a custom one, or extract and refactor the relevant flexbox tests, which seem to be:
function testPropsAll(prop, prefixed, elem) {
var ucProp = prop.charAt(0).toUpperCase() + prop.slice(1),
props = (prop + ' ' + cssomPrefixes.join(ucProp + ' ') + ucProp).split(' ');
if (is(prefixed, "string") || is(prefixed, "undefined")) {
return testProps(props, prefixed);
} else {
props = (prop + ' ' + (domPrefixes).join(ucProp + ' ') + ucProp).split(' ');
return testDOMProps(props, prefixed, elem);
}
}
tests['flexbox'] = function() {
return testPropsAll('flexWrap');
};
tests['flexboxlegacy'] = function() {
return testPropsAll('boxDirection');
};
Modernizr
is awesome, but the only reason I will avoid is when I have to test just one specific property. I know that they allow you to customize the build modernizr.com/download which makes it even more awesome, but still I would download a plugin only when it is absolutely worth it.