Container queries cross the Baseline Widely available threshold
August brought a significant milestone for CSS developers: CSS container queries are now Baseline Widely available. The feature landed in all major browser engines back in 2023, but reaching this status signals that the majority of sites can now adopt it with confidence. This marks a notable shift from media queries: rather than responding to the device screen's dimensions, styles can now adapt to the size of a specific element on the page. That opens the door to better style encapsulation and a more straightforward approach to building reusable, context-aware components.
If the feature is new to you, the recently updated Learn CSS course is worth a look. It now includes a dedicated module on container queries as a practical starting point.
Other August additions to Baseline
Container queries weren't the only feature to become Widely available in August. Two others also crossed that threshold:
- The
color-gamutmedia query, which lets authors tailor styles to a device's color output range. - The
:autofillpseudo-class for styling form fields that the browser has populated automatically.
In addition, selection composed ranges joined the list of features that are Baseline Newly available as of August.
MDN's redesign puts Baseline at the core
Mozilla recently launched a completely reengineered frontend for MDN, built from scratch with a focus on better readability and search. The project also turned out to be a real-world test of Baseline: the team used the Widerly available set as the starting point when deciding which features to use. Anything outside that set was handled on a case-by-case basis, often through polyfills or progressive enhancement. A follow-up post with the technical details of that build is expected later.
Baseline tooling hackathon runs through October 6
The Baseline tooling hackathon officially kicked off at the start of this month and runs until October 6th. Prizes are on offer for the best contributions:
- First prize: $5,000
- Second prize: $3,000
- Third prize: $1,000
- Most valuable feedback (10 winners): $100 each
The top three winners will also be featured on the web.dev blog and receive a 30-minute private feedback and strategy session with the Chrome team. Details on registration and submission are in the hackathon announcement.
If anything Baseline-related was missed this month, the team is tracking issues via its issue tracker for future digests.
