Intent to prototype and ship: Improved CSS Nesting

150 views
Skip to first unread message

Emilio Cobos Álvarez

unread,
Jun 22, 2023, 5:17:26 PM6/22/23
to Mozilla
Hi, first of all I'm sorry, I should've sent the intent to prototype for
this way sooner (I thought I had, whoops).

As soon as:

* A couple remaining spec issues[1][2] are addressed.
* The relevant changes are made, if any, as a result of those.
* DevTools support is reasonable[3].

I plan to enable CSS Nesting by default. Ideally within the Firefox 116
time frame, but if it slides I'll update the thread. It's been enabled
on Nightly for quite a while now.

The reason why the title of the email says "improved" is because other
browser ship a different version of this, see below.

Summary: Allow authors to nest style rules and other grouping rules.
This has been a long-requested CSS feature. Some more conte

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1648037
Specification: https://drafts.csswg.org/css-nesting/
Standards Body: CSSWG
Platform coverage: All
DevTools bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1838169

Link to standards-positions discussion:
https://github.com/mozilla/standards-positions/issues/695
web-platform-tests: https://wpt.fyi/css/css-nesting

Status in other browsers is a bit of a mess.

Both WebKit and Blink ship a version of nesting. However, that's an old
version of the spec, which didn't include the changes discussed in[4].
So stuff like this doesn't work at all:

table {
th { color: blue }
tr { color: red }
}

needing an explicit ampersand before the nested selectors. The reason
why they shipped that before figuring out if [4] was doable is to this
day unclear to me, and I don't think shipping that was the right call.

In any case, our implementation doesn't have such syntax restrictions,
and WPTs have been and are being updated for this as I implement the new
version of the spec.

Cheers,

-- Emilio

[1]: https://github.com/w3c/csswg-drafts/issues/8970
[2]: https://github.com/w3c/csswg-drafts/issues/8940
[3]: Thanks a lot Nicolas for jumping on this, and sorry for maybe not
giving y'all enough warning in advance; this had way more far-reaching
implications than I initially thought for DevTools.
[4]: https://github.com/w3c/csswg-drafts/issues/7961
Reply all
Reply to author
Forward
0 new messages