@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 CSSGroupingRule interface

[Exposed=Window]
interface CSSGroupingRule : CSSRule {
    readonly attribute CSSRuleList cssRules;
    unsigned long insertRule (CSSOMString rule, unsigned long index);
    void deleteRule (unsigned long index);
};

cssRules of type CSSRuleList, readonly

The cssRules attribute must return a CSSRuleList object for the list of CSS rules nested inside the grouping rule.

insertRule(CSSOMString rule, unsigned long index), returns unsigned long

The insertRule operation must insert a CSS rule rule into the CSS rule list returned by cssRules, such that the inserted rule will be at position index, and any rules previously at index or higher will increase their index by one. It must throw INDEX_SIZE_ERR if index is greater than cssRules.length. It must throw SYNTAX_ERR if rule has a syntax error and is unparseable; this does not include syntax errors handled by error handling rules for constructs inside of the rule, but this does include cases where the string given does not parse into a single CSS rule (such as when the string is empty) or where there is anything other than whitespace or comments after that single CSS rule. It must throw HIERARCHY_REQUEST_ERR if the rule cannot be inserted at the location specified, for example, if an ''@import'' rule is inserted inside a group rule. The return value is the index parameter.

deleteRule (unsigned long index), return void

The deleteRule operation must remove a CSS rule from the CSS rule list returned by cssRules at index. It must throw INDEX_SIZE_ERR if index is greater than or equal to cssRules.length.

The CSSConditionRule interface

[Exposed=Window]
interface CSSConditionRule : CSSGroupingRule {
    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. On setting the conditionText attribute these steps must be run:

1. Trim the given value of white space.
2. If the given value matches the grammar of the appropriate condition production for the given rule, replace the associated CSS condition with the given value.
3. Otherwise, do nothing.

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 <> exensibility 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

supports(CSSOMString conditionText), returns boolean

When the {{supports(property, value)}} method is invoked with two arguments property and value, it must return true if property is a literal match for the name of a CSS property that the UA supports, and value would be successfully parsed as a supported value for that property. (Literal match means that no CSS escape processing is performed, and leading and trailing whitespace are not stripped, so any leading whitespace, trailing whitespace, or CSS escapes equivalent to the name of a property would cause the method to return false.) Otherwise, it must return false. When {{supports(conditionText)}} invoked with a single conditionText argument, it must return true if conditionText, when either parsed and evaluated as a <> or parsed as a <>, wrapped in implied parentheses, and evaluated as a <>, would return true. Otherwise, it must return false.

Privacy and Security Considerations

Changes

• Drop 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.
• Allow 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.
• Added section on privacy and security considerations.

Acknowledgments