Skip to main content

CSS conditional rules

The CSS conditional rules module defines CSS media and support queries, enabling you to define styles that are only applied if specific conditions are met. The conditional rules defined in this module are based on device, user-agent, and viewport capabilities. With conditional rules, you can target CSS styles based on query values or browser and device features, independent of the document being rendered.

The first CSS conditional rules were media types specifying the intended destination medium for the linked styles, for example screen or print. These were set as the value of the HTML {{HTMLElement("link")}} and {{HTMLElement("style")}} elements' media attributes or as a comma-separated list of media types within an {{cssxref("@import")}} statement or at-rule. The ability to conditionally apply CSS rules has been greatly expanded since the CSS 2.1 and HTML 4.01 implementations that limited conditional queries to a few media types.

CSS conditional rules now include feature queries; the @supports at-rule enables targeting CSS styles based on a user-agent's CSS capabilities. Additional conditions include which selector, font-formats, and font-techs are supported.

The CSS conditional rules module also expands @media to enable nesting at-rules, with the related CSS media queries module removing unused media types and adding many media features and conditions that can be targeted.

The CSS container queries module defines similar conditional rules, but based on an element's parent rather than the viewport.

There are plans to further extend possible queries by adding the generalized conditional rule @when and the chained conditional rule @else. These two at-rules are not yet supported.

Reference​

At-rules​

  • {{cssxref("@media")}}
  • {{cssxref("@supports")}}

[!NOTE] The CSS conditional rules module introduces two at-rules that have not been implemented: @else and @when.

Functions​

[!NOTE] The CSS conditional rules module introduces a CSS function that has not been implemented: media().

data types​

Interfaces​

  • {{domxref("CSSConditionRule")}}
  • {{domxref("CSSMediaRule")}}
  • {{domxref("CSSSupportsRule")}}
  • {{domxref("CSS.supports_static", "supports()")}} method

Terms and glossary definitions​

  • {{glossary("media/CSS", "Media")}}
  • Supports query (See feature query)

Guides​

Specifications​

See also​