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