@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;
    readonly attribute boolean matches;
};

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.

matches of type {{boolean}}, readonly

The matches attribute returns true if the rule is in an stylesheet attached to a document whose {{Window}} matches this rule’s {{CSSMediaRule/media}} [=media query=], and returns false otherwise.

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.

The CSSSupportsRule interface

[Exposed=Window]
interface CSSSupportsRule : CSSConditionRule {
  readonly attribute boolean matches;
};

matches of type {{boolean}}, readonly

The matches attribute returns the evaluation of the [=CSS feature query=] represented in {{CSSConditionRule/conditionText}}.

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, or is a [=custom property name string=], and |value| successfully [=CSS/parses=] according to that property's grammar, return true. 2. 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").

js/supports-conditionText.html

Security Considerations

Privacy Considerations

Changes

• Clarified that supports() must return false for invalid custom property values
• Fixed Web IDL, "bool" should have been "boolean"
• Clarified that a processor must support both the property and the value (Issue 8795)
• Added .matches to @media and @supports (Issue 4240)
• Updated to the new parsing algo names and block production names.
• Removed procedure to set readonly CSSMediaRule.conditionText (PR 8796)
• Made conditionText readonly.

• 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