@supports ( display: flex ) {
  body, #navigation, #content { display: flex; }
  #navigation { background: blue; color: white; }
  #article { background: white; color: black; }
}

@supports not ( display: flex ) {
  body { width: 100%; height: 100%; background: white; color: black; }
  #navigation { width: 25%; }
  #article { width: 75%; }
}

.noticebox {
  border: 1px solid black;
  padding: 1px;
}
@supports ( box-shadow: 0 0 2px black inset ) or
          ( -moz-box-shadow: 0 0 2px black inset ) or
          ( -webkit-box-shadow: 0 0 2px black inset ) or
          ( -o-box-shadow: 0 0 2px black inset ) {
  .noticebox {
    -moz-box-shadow: 0 0 2px black inset;
    -webkit-box-shadow: 0 0 2px black inset;
    -o-box-shadow: 0 0 2px black inset;
    box-shadow: 0 0 2px black inset; /* unprefixed last */
    /* override the rule above the @supports rule */
    border: none;
    padding: 2px;
  }
}

@supports (transition-property: color) or
          (animation-name: foo) and
          (transform: rotate(10deg)) {
  /* ... */
}

@supports ((transition-property: color) or
           (animation-name: foo)) and
          (transform: rotate(10deg)) {
  /* ... */
}

@supports (transition-property: color) or
          ((animation-name: foo) and
           (transform: rotate(10deg))) {
  /* ... */
}

@supports display: flex {
  /* ... */
}

@supports (display: flex) {
  /* ... */
}

@supports ((display: flex)) {
  /* ... */
}

@supports (display: flex !important) {
  /* ... */
}

Definition of support

APIs

Extensions to the CSSRule interface

partial interface CSSRule {
    const unsigned short SUPPORTS_RULE = 12;
    
};

The CSSConditionRule interface

[Exposed=Window]
interface CSSConditionRule : CSSGroupingRule {
    readonly attribute CSSOMString conditionText;
};

conditionText of type CSSOMString

The conditionText attribute represents the condition of the rule. Since what this condition does varies between the derived interfaces of CSSConditionRule, those derived interfaces may specify different behavior for this attribute (see, for example, CSSMediaRule below). In the absence of such rule-specific behavior, the following rules apply: The conditionText attribute, on getting, must return the result of serializing the associated condition.

The CSSMediaRule interface

[Exposed=Window]
interface CSSMediaRule : CSSConditionRule {
    [SameObject, PutForwards=mediaText] readonly attribute MediaList media;
};

media of type {{MediaList}}, readonly

The media attribute must return a {{MediaList}} object for the list of media queries specified with the ''@media'' at-rule.

conditionText of type CSSOMString (CSSMediaRule-specific definition for attribute on CSSConditionRule)

The conditionText attribute (defined on the CSSConditionRule parent rule), on getting, must return the value of media.mediaText on the rule. Setting the conditionText attribute must set the media.mediaText attribute on the rule.

The CSSSupportsRule interface

[Exposed=Window]
interface CSSSupportsRule : CSSConditionRule {
};

conditionText of type CSSOMString (CSSSupportsRule-specific definition for attribute on CSSConditionRule)

The conditionText attribute (defined on the CSSConditionRule parent rule), on getting, must return the condition that was specified, without any logical simplifications, so that the returned condition will evaluate to the same result as the specified condition in any conformant implementation of this specification (including implementations that implement future extensions allowed by the <> extensibility mechanism in this specification). In other words, token stream simplifications are allowed (such as reducing whitespace to a single space or omitting it in cases where it is known to be optional), but logical simplifications (such as removal of unneeded parentheses, or simplification based on evaluating results) are not allowed.

The CSS namespace, and the supports() function

partial namespace CSS {
  boolean supports(CSSOMString property, CSSOMString value);
  boolean supports(CSSOMString conditionText);
};

supports(CSSOMString property, CSSOMString value), returns boolean

When the {{supports(property, value)}} method is invoked with two arguments property and value: 1. If |property| is an [=ASCII case-insensitive=] match for any defined CSS property that the UA supports, and |value| successfully [=CSS/parses=] according to that property's grammar, return true. 2. Otherwise, if |property| is a [=custom property name string=], return true. 3. Otherwise, return false. Note: No CSS escape or whitespace processing is performed on the property name, so CSS.supports(" width", "5px") will return false, as " width" isn't the name of any property due to the leading space. Note: ''!important'' flags are not part of property grammars, and will cause |value| to parse as invalid, just as they would in the value argument to ''element.style.setProperty()''.

supports(CSSOMString conditionText), returns boolean

When the {{supports(conditionText)}} method is invoked with a single conditionText argument: 1. If |conditionText|, [=CSS/parsed=] and evaluated as a <>, would return true, return true. 2. Otherwise, If |conditionText|, wrapped in parentheses and then [=CSS/parsed=] and evaluated as a <>, would return true, return true. 3. Otherwise, return false. All namespaces in the conditionText argument are considered invalid, just as they are in document.querySelector("a|b").

Security Considerations

Privacy Considerations

Changes

• Clarified that discarding property declarations only applies to style rules, not at-rules
• Clarified that !important is not part of the property grammar
• Split Security and Privacy into separate sections
• Defined the terms [=CSS feature queries=] and [=supports queries=] to refer to the conditional syntax of the ''@supports'' rules, to allow better cross-referencing.
• Removed the “unknown” value in [=CSS feature queries=]’ boolean logic, defining unrecognized syntaxes as “false” instead. (Issue 6175)
• Clarified [[#use|placement]] of [=conditional group rules=]. (Issue 5697)

  Conditional group rules are allowed wherever style rules are allowed (at the top-level of a style sheet, and inside as well as within other conditional group rules). CSS processors must process such rules as described above. Any at-rules that are not allowed after a style rule (e.g., @charset , @import , or @namespace rules) are also not allowed after a conditional group rule. Therefore, style sheets must not place such rules after a conditional group rule, and CSS processors must ignore such rules., and are therefore invalid when so placed.

• Clarified that namespaces in conditionText are invalid
• New editors added
• Added explicit call to [=CSS/parse=] rather than "matches the grammar"
• Removed duplicate CSSGroupingRule, which is already defined by CSSOM
• Rewrote the supports() text into algorithm form, to make it easier to express that you pay attention to the syntax of registered custom properties in the supports(prop, val) form.
• Moved the definition of @supports selector to css-conditional-4.
• ''@supports''' is no longer at risk.
• Rewrote to use CSS Syntax grammars, not CSS 2.1 grammars
• Changed from CSS Interface to WebIDL-compatible CSS namespace
• Dropped requirement for spaces around ''and'', ''or'', and ''not'' keywords for consistency with Media Queries (which are themselves constrained by compatibility with the output of some CSS minimizers that rely on some of the more arcane aspects of CSS tokenization). Note that white space--or a comment--is still required after these keywords, since without it they and the ensuing opening parenthesis will be tokenized as a function opening token.
• Allowed the supports() method to imply parentheses for simple declarations, for consistency with the @import rule’s supports() function.
• Fixed missing semicolons in IDL code.
• Updated links, terminology, and example code in response to changes to other modules.
• Spelling and grammatical corrections
• Added section on privacy and security considerations.

Acknowledgments