This day marks a major milestone in the history of web development. As of today, for the first time ever, all of the Big Three browsers support native CSS nesting right out of the box.
Until today, writing CSS like this meant you needed to process it through something like Sass or a PostCSS plugin:
.myPurpleClass {
& p {
color: #d1d100;
& a {
color: #0000d1;
}
}
}But now, with today’s release of Firefox 117.0, the trifecta of support for native CSS nesting is complete.
Update from the future: The CSS Nesting Module spec later dropped the requirement for those ampersand (&) characters as shown in the example above, thus keeping the nesting syntax more like that of Sass, although the spec does still explain some reasons why you might want to use them.
When 2023 began, I wouldn’t have bet that this happy combination would happen even this year, much less with a full third of the year remaining. However, where native CSS nesting was concerned, the Big Three’s often-glacial pace of feature adoption picked up in a major way over the last few months. Chrome 112.0 was first out of the gate with full, unflagged support on 2023-04-04, followed by Safari 16.5 on 2023-05-18. Perhaps seeing which way the proverbial wind was blowing, the Firefox team apparently shifted gears to make this happen ASAP for its browser, too; and so, today, that has become reality.
Of course, this doesn’t mean nesting utopia is here just yet. As I write, the Can I Use page for native CSS nesting shows global support at just over 75% — which means that, unless a dev team absolutely knows every visitor to its site both (a.) uses one of the Big Three browsers and (b.) definitely has a nesting-compatible version of that browser, the need for additional processing of nested CSS will persist for a while.
Still, at the rate things are changing, that “while” may well be shorter than one might have believed as recently as a few weeks ago.
Update from the future: Any visitors locked into Firefox’s Extended Support Release (ESR) “channel” won’t see a nesting-compatible Firefox version until at least July, 2024. Firefox ESR is a popular deployment choice for those enterprises and universities which allow Firefox installations, and it’s part of the Debian Linux distribution.
Latest commit (6d6740cbd) for page file:
2024-07-07 at 12:47:21 PM CDT.
Page history