< css‎ | atrules
Jump to: navigation, search


This article is Ready to Use.

W3C Candidate Recommendation


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.


There is no data available for topic "css", feature "@supports". If you think that there should be data available, consider opening an issue.


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


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

Chaining detection of several features using the operator and:


@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.)


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


Browser support for this feature is still pretty limited.

Related specifications

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

See also

Related articles


  • @supports

External resources