Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The simplest feature-detect for flexbox?
/*
* 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);
@davidhund

This comment has been minimized.

Copy link
Owner Author

@davidhund davidhund commented Oct 13, 2014

Seems to work for my needs but I might be missing something ;-)

  • [√] Chrome 37 => true
  • [√] Firefox 32 => true
  • [√] Safari 7.1 => false (using -webkit-flex returns true, \0/)
  • [√] IE11 => true
  • [√] IE10 => false
  • [√] IE9 => false
  • [:(] IE8 breaks when trying to set e.style.display to 'flex'. (c/should wrap it in a try..catch)
@davidhund

This comment has been minimized.

Copy link
Owner Author

@davidhund davidhund commented Jul 7, 2015

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);
@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Aug 10, 2016

This is a cool concept but where is the return in the updated code?

@lstrrs

This comment has been minimized.

Copy link

@lstrrs lstrrs commented Aug 16, 2016

There is no return statement because @davidhund is adding a class of 'flex' or 'no-flex' to the html tag.

@tfcwebdev

This comment has been minimized.

Copy link

@tfcwebdev tfcwebdev commented Aug 17, 2016

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.

@Webnewbies

This comment has been minimized.

Copy link

@Webnewbies Webnewbies commented Aug 22, 2016

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);
@brentonstrine

This comment has been minimized.

Copy link

@brentonstrine brentonstrine commented Nov 21, 2016

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.

@kingsloi

This comment has been minimized.

@ergcode

This comment has been minimized.

Copy link

@ergcode ergcode commented Aug 25, 2017

David, how about this solution?
https://github.com/ergcode/ergonomic.detect_flex

@jblok

This comment has been minimized.

Copy link

@jblok jblok commented Sep 12, 2017

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;
  }
};
@mcshaman

This comment has been minimized.

Copy link

@mcshaman mcshaman commented Nov 26, 2017

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'])
@stahl-riesa

This comment has been minimized.

Copy link

@stahl-riesa stahl-riesa commented Mar 26, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment