@supports

< css‎ | atrules
Jump to: navigation, search

@supports

This article is Ready to Use.


W3C Candidate Recommendation

Summary

The CSS @supports at-rule lets authors detect support of CSS features directly in CSS.


The CSS at-rule @supports is part of the CSS Conditional Rules Module Level 3 Draft. It allows authors to condition rules based on whether particular property declarations are supported in CSS.

In other words @supports lets you detect browser support of CSS features directly in CSS. Modernizr is a well known library that detects features using JavaScript.

The operators and and or allows to chain the detection of several features.

Examples

An abstract example with the detection of support for display: flex (known as CSS Flexible Box Layout Module):

CSS

@supports (display: flex) {
  div {
    display: flex;
  }
}

Chaining detection of several features using the operator and:

CSS

@supports (background: rgba(0,0,0,0.2)) and (opacity: 0.8) {
  body {
    background: rgba(0,0,0,0.2);
  }

  div {
    opacity: 0.8;
  }
}

To detect if an experimental feature is supported with vendor-prefixes the or operator might be helpful:

(This example does not include -o- and -ms- prefixes as neither Opera nor Microsoft supported a prefixed version of box-shadow.)

CSS

@supports (-webkit-box-shadow: 0 0 2px #000) or
          (   -moz-box-shadow: 0 0 2px #000) or
          (        box-shadow: 0 0 2px #000) {

  div {
    -webkit-box-shadow: 0 0 2px #000;
       -moz-box-shadow: 0 0 2px #000;
            box-shadow: 0 0 2px #000;
  }
}

Usage

Browser support for this feature is still pretty limited.


Related specifications

Specification Status Related Changes
CSS Conditional Rules Module Level 3 Candidate Recommendation

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 28
17
Unsupported
12.1
Unsupported

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?


Compatibility notes

Browser Version Note
Firefox 17+ It's disabled by default in the release and beta builds.
Chrome 28-29 Using @supports on Chrome 28-29 breaks following :not selectors (http://crbug.com/257695)
Opera 15-16 Using @supports on Opera 15-16 breaks following :not selectors (http://crbug.com/257695)

See also

Related articles

Syntax








  • @supports







External resources