Working Draft · css-conditional

CSS Conditional Rules

3 properties, 6 at-rules, 2 functions defined by this specification, 6 of them known to at least one browser (the others are badged Not in any browser yet).

Modern CSS features in this module: Container queries (size), Container scroll-state queries, Anchor position container queries, Container style queries, Range syntax for style queries, Name-only container queries, Picture-in-picture (video), Viewport segments, Device posture, scripting media query, prefers-reduced-transparency media query, Update frequency media query, Media query range syntax, color-gamut media query, at-rule(), named-feature().

Read the Editor's Draft ↗ W3C Working Draft ↗

Each feature in detail

`container`

Property Baseline: widely availablesince August 2025 Modern CSS: Container queries (size)

MDN The container shorthand CSS property establishes the element as a query container and specifies the name and type of the containment context used in a container query.

Live preview Example from MDN

.post {
  container-type: inline-size;
  container-name: sidebar;
}

.post {
  container: sidebar / inline-size;
}

@container sidebar (width >= 400px) {
  /* <stylesheet> */
}

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

Syntax

<'container-name'> [ / <'container-type'> ]?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: see individual properties
Applies to: see individual properties
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Canonical order: per grammar
Animation type: see individual properties
Longhands: container-name, container-type

Browser support

First browser version supporting container
Chrome	105
Edge	105
Firefox	110
Safari	16
Chrome Android	105
Safari iOS	16

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`container-name`

Property Baseline: widely availablesince August 2025 Modern CSS: Container queries (size)

MDN The container-name CSS property specifies a list of query container names used by the @container at-rule in a container query.

Live preview Example from MDN

.post-meta {
  container-type: inline-size;
}

.post-excerpt {
  container-type: inline-size;
  container-name: excerpt;
}

@container excerpt (width >= 400px) {
  p {
    visibility: hidden;
  }
}

@container (width >= 400px) {
  p {
    font-size: 2rem;
  }
}

<div class="card">
  <div class="post-meta">
    <h2>Card title</h2>
    <p>My post details.</p>
  </div>
  <div class="post-excerpt">
    <p>
      A preview of my <a href="https://example.com">blog post</a> about cats.
    </p>
  </div>
</div>

Syntax

none | <custom-ident>+

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: the keyword none, or an ordered list of identifiers
Canonical order: per grammar
Animation type: not animatable

Browser support

First browser version supporting container-name
Chrome	105
Edge	105
Firefox	110
Safari	16
Chrome Android	105
Safari iOS	16

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`container-type`

Property Baseline: widely availablesince August 2025 Modern CSS: Container scroll-state queries Modern CSS: Anchor position container queries Modern CSS: Container queries (size)

MDN The container-type CSS property specifies the type of container context used in a container query.

Live preview Example from MDN

.container {
  container-type: inline-size;
  width: 300px;
  height: 120px;
}

.wide {
  width: 500px;
}

h3 {
  height: 2rem;
  margin: 0.5rem;
}

.card {
  height: 100%;
}

.content {
  background-color: wheat;
  height: 100%;
}

.container {
  margin: 1rem;
  border: 2px dashed red;
  overflow: hidden;
}

@container (width > 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

<div class="container">
  <div class="card">
    <h3>Normal card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

<div class="container wide">
  <div class="card">
    <h3>Wider card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

Syntax

normal | [ [ size | inline-size ] || scroll-state ]

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: normal
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: specified keyword
Canonical order: per grammar
Animation type: not animatable

Browser support

First browser version supporting container-type
Chrome	105
Edge	105
Firefox	110
Safari	16
Chrome Android	105
Safari iOS	16

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`@container`

At-rule Baseline: widely availablesince August 2025 Modern CSS: Container style queries Modern CSS: Range syntax for style queries Modern CSS: Name-only container queries Modern CSS: Container scroll-state queries Modern CSS: Anchor position container queries Modern CSS: Container queries (size)

Spec The @container rule is a conditional group rule whose condition contains a container query, which is a boolean combination of container size queries and/or container style queries. Style declarations within the @container rule are filtered by its condition to only match when the container query is true for their element’s query container.

MDN The @container CSS at-rule is a conditional group rule that applies styles to a containment context. Style declarations are filtered by a condition and applied to the elements within the container if the condition is true. The condition is evaluated when the queried container size, <style-feature>, or scroll-state changes.

Live preview Example from MDN

span {
  display: block;
  text-align: center;
}
.card {
  margin: 10px;
  border: 2px dotted;
  font-size: 1.5em;
}
.post {
  border: 2px solid;
}

/* A container context based on inline size */
.post {
  container-type: inline-size;
}

/* Apply styles if the container is narrower than 650px */
@container (width < 650px) {
  .card {
    width: 50%;
    background-color: lightgray;
    font-size: 1em;
  }
}

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

const post = document.querySelector(".post");
const span = document.createElement("span");
span.textContent = `.post width: ${post.clientWidth}px`;
post.parentNode.insertBefore(span, post.nextSibling);
// update on resize
window.addEventListener("resize", () => {
  span.textContent = `.post width: ${post.clientWidth}px`;
});

Syntax

@container <container-condition># { <rule-list> }

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting @container
Chrome	105
Edge	105
Firefox	110
Safari	16
Chrome Android	105
Safari iOS	16

First version with support, from MDN browser-compat-data.

Descriptors

aspect-ratio: <ratio>
block-size: <length>
fallback: none | [ [<dashed-ident> || <try-tactic>] | <position-area-query> ]
height: <length>
inline-size: <length>
orientation: portrait | landscape
scrollable: none | top | right | bottom | left | block-start | inline-start | block-end | inline-end | x | y | block | inline
scrolled: none | top | right | bottom | left | block-start | inline-start | block-end | inline-end | x | y | block | inline
snapped: none | x | y | block | inline | both
stuck: none | top | right | bottom | left | block-start | inline-start | block-end | inline-end
width: <length>

Specification ↗ MDN reference ↗

`@else`

At-rule Not in any browser yet

Spec The @else rule is a conditional group rule used to form conditional rule chains, which associate multiple conditional group rules and guarantee that only the first one that matches will evaluate its condition as true. It is defined as:

Syntax

@else <boolean-condition>? { <rule-list> }

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`@media`

At-rule Baseline: widely availablesince January 2018 Modern CSS: Picture-in-picture (video)Modern CSS: Viewport segments Modern CSS: Device posture Modern CSS: scripting media query Modern CSS: prefers-reduced-transparency media query Modern CSS: Update frequency media query Modern CSS: Media query range syntax Modern CSS: color-gamut media query

Spec The @media rule is a conditional group rule whose condition is a media query. Its syntax is:

MDN The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

Live preview Example from MDN

abbr {
  color: #860304;
  font-weight: bold;
  transition: color 0.5s ease;
}

@media (hover: hover) {
  abbr:hover {
    color: #001ca8;
    transition-duration: 0.5s;
  }
}

@media not all and (hover: hover) {
  abbr::after {
    content: " (" attr(title) ")";
  }
}

<p>
  <abbr title="National Aeronautics and Space Administration">NASA</abbr> is a
  U.S. government agency that is responsible for science and technology related
  to air and space.
</p>

Syntax

@media <media-query-list> { <rule-list> }

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting @media
Chrome	1
Edge	12
Firefox	1
Safari	3
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Descriptors

-webkit-device-pixel-ratio: <number>
-webkit-transform-3d: <mq-boolean>
any-hover: none | hover
any-pointer: none | coarse | fine
aspect-ratio: <ratio>
color: <integer>
color-gamut: srgb | p3 | rec2020
color-index: <integer>
device-aspect-ratio: <ratio>
device-height: <length>
device-width: <length>
display-mode: application | fullscreen | standalone | minimal-ui | browser | picture-in-picture
display-state: normal | minimized | maximized | fullscreen
dynamic-range: standard | high
environment-blending: opaque | additive | subtractive
forced-colors: none | active
grid: <mq-boolean>
height: <length>
horizontal-viewport-segments: <integer>
hover: none | hover
inverted-colors: none | inverted
monochrome: <integer>
nav-controls: none | back
orientation: portrait | landscape
overflow-block: none | scroll | paged
overflow-inline: none | scroll
pointer: none | coarse | fine
prefers-color-scheme: light | dark
prefers-contrast: no-preference | less | more | custom
prefers-reduced-data: no-preference | reduce
prefers-reduced-motion: no-preference | reduce
prefers-reduced-transparency: no-preference | reduce
resizable: true | false
resolution: <resolution> | infinite
scan: interlace | progressive
scripting: none | initial-only | enabled
shape: rect | round
ua-color-scheme: light | dark
update: none | slow | fast
vertical-viewport-segments: <integer>
video-color-gamut: srgb | p3 | rec2020
video-dynamic-range: standard | high
width: <length>

Specification ↗ MDN reference ↗

`@supports`

At-rule Baseline: widely availablesince March 2018 Modern CSS: at-rule()Modern CSS: named-feature()

Spec The @supports rule is a conditional group rule whose condition tests whether the user agent supports CSS property:value pairs. Authors can use it to write style sheets that use new features when available but degrade gracefully when those features are not supported. These queries are called CSS feature queries or (colloquially) supports queries.

MDN The @supports CSS at-rule lets you specify CSS declarations that depend on a browser's support for CSS features. Using this at-rule is commonly called a feature query. The rule must be placed at the top level of your code or nested inside any other conditional group at-rule.

Live preview Example from MDN

.flex-container > * {
  padding: 0.3em;
  list-style-type: none;
  text-shadow: 0 0 2px red;
  float: left;
}

@supports (display: flex) {
  .flex-container > * {
    text-shadow: 0 0 2px blue;
    float: none;
  }

  .flex-container {
    display: flex;
  }
}

<ul class="flex-container">
  <li><a href="#">Index</a></li>
  <li><a href="#">About me</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Syntax

@supports <supports-condition> { <rule-list> }

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting @supports
Chrome	28
Edge	12
Firefox	22
Safari	9
Chrome Android	28
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`@supports-condition`

At-rule Not in any browser yet

Spec The @supports-condition at-rule is a conditional group rule that allows authors to define and name a supports query for later reuse, creating a named supports condition. This enables complex or frequently-used feature queries to be referenced by name, improving maintainability and readability.

Syntax

@supports-condition <supports-condition-name> { <block-contents> }

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`@when`

At-rule Not in any browser yet

Spec The @when at-rule is a conditional group rule that generalizes the individual conditional group rules such as @media and @supports. It is defined as:

Syntax

@when <boolean-condition> { <rule-list> }

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`media()`

Function Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

media( [ <mf-plain> | <mf-boolean> | <mf-range> ] )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`supports()`

Function Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

supports( <declaration> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗