Early Days of Container Style Queries

Container queries are still in their infancy, lacking widespread browser support. While Chromium already supports them, Safari's support began with version 16, and Firefox's implementation is anticipated soon.

Early discussions often draw parallels between container query and media query syntax. Consider these examples:

<code>/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}</code>

<code>/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}</code>

Both examples target min-width: 600px. However, the media query reacts to viewport width, whereas the container query responds to the computed width of the .posts element.

Building on this, the CSS Containment Module Level 3 spec introduces container style queries, allowing queries of the container's computed styles. The spec describes them as boolean combinations of individual style features, each querying a specific property. The syntax, mirroring CSS declarations, evaluates to true if the computed property value matches the specified value (also computed relative to the container), unknown if invalid or unsupported, and false otherwise. The boolean logic is similar to CSS feature queries (@supports).

A hypothetical example:

<code>.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}</code>

Note that container-type: style (or its absence) is implied; all container queries become style queries by default (currently). Miriam Suzanne's work highlights potential challenges with this approach.

The practical applications of querying container styles are still emerging, but potential uses include:

• Custom property values: Reacting to changes in custom properties used as state indicators.
• Dark mode implementation: Switching color palettes based on body background changes.
• Complex query conditions: Combining size and style conditions.

Container style queries could also address styling complexities, such as overriding italicized text within an italicized blockquote:

<code>blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}</code>

The above is the detailed content of Early Days of Container Style Queries. For more information, please follow other related articles on the PHP Chinese website!