-
-
Save davidhund/b995353fdf9ce387b8a2 to your computer and use it in GitHub Desktop.
/* | |
* Trying to feature-detect (very naive) | |
* CSS Flexbox support. | |
* - Only most modern syntax | |
* | |
* Is this nonsense? | |
*/ | |
(function NaiveFlexBoxSupport(d){ | |
var f = "flex", e = d.createElement('b'); | |
e.style.display = f; | |
return e.style.display == f; | |
})(document); |
I have wrapped it in a try/catch and added a -webkit-
prefix check, now Safari 7.1 returns true
. Need tidying up, obvs.
(function(d){
var c = " ", f = "flex", fw = "-webkit-"+f, e = d.createElement('b');
try {
e.style.display = fw;
e.style.display = f;
c += (e.style.display == f || e.style.display == fw) ? f : "no-"+f;
} catch(e) {
c += "no-"+f;
}
d.documentElement.className += c;
})(document);
This is a cool concept but where is the return
in the updated code?
There is no return statement because @davidhund is adding a class of 'flex' or 'no-flex' to the html tag.
Very interesting. Just want to point out that, for the most part, if it's Flexbox-compatible, there really isn't anything I need to do in CSS.
However, if its Flexbox-incompatible, I need to add additional CSS. In that case, I would want to add a class to HTML to tell me its incompatible so I can take advantage of the cascading nature of CSS.
opps - I see it's supposed to add "no-flex." It does not do that in IE emulation in MS Edge.
When emulating IE9 and IE10 it adds "flex" contrary to the compatibility chart above.
Thank's for you help. I wrote this code for you:
(function(d) {
'use strict';
var c = " ", prefixFlex = 'flex -webkit-flex -ms-flexbox -moz-box -webkit-box'.split(' '), elem = d.createElement('b'), mStyle = elem.style;
try {
for (var i = 0, len = prefixFlex.length; i < len; i++) {
c += ( (mStyle.display = prefixFlex[i]) && mStyle.display != prefixFlex[i] ) ? 'no-flex' : 'flex', (i = len);
}
} catch(e) {
c += "no-flex";
}
d.documentElement.className = c + 'box';
})(document);
Just curious in what circumstances this will cause an error. I'm assuming it can cause an error since you added the try/catch
block.
@brentonstrine, I think it's IE8 (per @davidhund's answer: https://gist.github.com/davidhund/b995353fdf9ce387b8a2#gistcomment-1317135)
David, how about this solution?
https://github.com/ergcode/ergonomic.detect_flex
Wrote a version of Davids script that returns a boolean
export const testFlexbox = () => {
const f = 'flex';
const fw = `-webkit-${f}`;
const el = document.createElement('b');
try {
el.style.display = fw;
el.style.display = f;
return !!(el.style.display === f || el.style.display === fw);
} catch (err) {
return false;
}
};
Or you could make it css property generic
function cssPropertySupported(pNames) {
const element = document.createElement('a')
let index = pNames.length
try {
while (index--) {
const name = pNames[index]
element.style.display = name
if (element.style.display === name) {
return true
}
}
} catch (pError) {}
return false
}
cssPropertySupported(['-webkit-box', '-ms-flex', 'flex'])
according to mcshaman post:
cssPropertySupported(['-webkit-box', '-ms-flex', 'flex'])
should be:
cssPropertySupported(['-ms-flexbox', '-webkit-box', 'flex'])
By the way:
return true
should be:
return name
so you know what syntax is used
Seems to work for my needs but I might be missing something ;-)
true
true
false
(using-webkit-flex
returnstrue
, \0/)true
false
false
e.style.display
to 'flex'. (c/should wrap it in atry..catch
)