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.
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 to pre-process 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, 2023-09-06: This is a niche-in-a-niche-in-a-niche situation, but any visitors locked into Firefox’s Extended Support Release (ESR) “channel” (notably, users of the Debian Linux distro, the newest version of which includes Firefox ESR 102.x) may not see a nesting-compatible Firefox version until at least July, 2024.
Latest commit (c0c5d55b) for page file:
2023-09-06 at 8:40:51 AM CDT.
Page history