[css-conditional-5] Allow writing-mode in style queries

We restricted style queries to custom properties because defining comparisons for arbitrary properties was a huge, fuzzy project. But one thing that layout and style often depends on is the writing-mode. How do we feel about making an exception to allow writing-mode (which has a very simple value space) in style queries?

Use cases include: changing positioning, line-height, generated content...

Note that image() already provides a build-in switch for that, which got deferred to Level 5 recently.

I think it's useful.

Logical properties only solve cases where there is a straightforward logical/physical mapping. There are plenty of component decisions that aren't mappings:

/* Hypothetical */
@container style(writing-mode: vertical-rl) {
  .decorative-arrow {
    rotate: 90deg;
  }
}

Design can genuinely change in vertical Chinese/Japanese or Mongolian layouts.

And the computed value writing-mode is essentially its specified keyword. It is inherited and not animatable. So you avoid a lot of the nastiness that makes style queries hard (like unit resolution etc.). And engines already have to react when a container's writing-mode changes because logical size queries like inline-size depend on it.

Not sure if a selector-level mechanism like :dir() works better, tho.

I think writing-mode-the-property is generally not what you want tho, right? Or at least it seems harder than it needs to be. Usually you want "what is the physical inline/block direction", right? Or "is the inline direction reversed", or...

Additionally to what Emilio says, style() checks computed values. Here, authors probably want to check the used value (e.g. in case of propagation). So a new kind of container feature may be better.

Navigation Menu

Repository navigation

[css-conditional-5] Allow writing-mode in style queries #14527

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[css-conditional-5] Allow writing-mode in style queries #14527

Description

Activity

fantasai commented on Sep 25, 2026

Crissov commented on Sep 26, 2026

xfq commented on Sep 27, 2026

emilio commented on Sep 27, 2026

Loirooriol commented on Sep 29, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions