Search code examples
csssafariflexboxbrowser-feature-detection

@supports (-webkit-flex-wrap: wrap) doesn't return true when Safari does support it

I am using Safari 7.x.

I have the following feature query which always returns false.

@supports (-webkit-flex-wrap: wrap) {
}

What syntax do I need to use for this to return true when safari does understand -webkit-flex-wrap?

Solution

  • Sorry to disappoint, but Safari does not presently support the CSS @supports rule. According to caniuse.com and MDN, it is only supported in Firefox 22+, Chrome 28+, and Opera 12.1+. You still have to use JavaScript-based feature detection for Internet Explorer and Safari.

    Here is an example feature-detection script that adds a supports-webkit-flex-wrap to the root element in the DOM. 

    if ('webkitFlexWrap' in document.documentElement.style) {
    document.documentElement.classList.add('supports-webkit-flex-wrap');
}

    Then you can apply styles using that class name.

    .supports-webkit-flex-wrap {
}