Skip to content

Instantly share code, notes, and snippets.

@dfkaye
Last active July 18, 2019 20:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dfkaye/65ea903631175c867ff199b0c511fd90 to your computer and use it in GitHub Desktop.
Save dfkaye/65ea903631175c867ff199b0c511fd90 to your computer and use it in GitHub Desktop.
Does your browser support flexbox on fieldset elements? Here's a test for that
// 28 June 2019
// 18 July 2019: full test suite with results moved.
// see How broadly does your browser support flexbox? https://gist.github.com/dfkaye/0c8510d06119e2dc142a29f1717ca0bf
// Does your browser support flexbox on fieldset elements?
// Chrome doesn't, according to Eric Meyer tweet today:
// see https://twitter.com/meyerweb/status/1144656888707125248
// We ran into this a few months back. Here's a supports test for it.
function flexboxFieldsetSupported(/* tagName */) {
// Use horizontal flow, centered, 3 inline spans
var style = 'display: flex; flex-flow: row wrap; justify-content: center';
var span = '<span style="flex-grow: 1; flex-shrink: 1; outline: 1px solid aqua; text-align: center">p</span>'
var html = span.concat(span, span);
var flex = document.createElement('fieldset');
flex.setAttribute('style', style);
flex.innerHTML = html;
var block = flex.cloneNode(true);
block.style.display = 'block';
document.body.appendChild(block);
document.body.appendChild(flex);
var blockLeft = [].slice.call(block.children, 1).every(function(node, i, arr) {
return i > 0 ? node.offsetLeft > arr[i - 1].offsetLeft : true;
});
var flexLeft = [].slice.call(flex.children, 1).every(function(node, i, arr) {
return i > 0 ? node.offsetLeft > arr[i - 1].offsetLeft : true;
});
return ({ block: blockLeft, flex: flexLeft });
}
/* test it out */
var test = flexboxFieldsetSupported()
console.log(test.block) // true for browsers supporting flexbox on div
console.log(test.flex) // true for browsers supporting flexbox on fieldsets
console.log(test.flex === test.block) // oh yeah
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment