@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 {
    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 [=CSS/parses=] as the appropriate condition grammar for the given rule (such as <> for ''@supports'', etc), 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 <> 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

supports(CSSOMString conditionText), 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.

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

Privacy and Security Considerations

Changes

• 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