What 8,000 developers told CSS browser vendors this year

The 2021 edition of the State of CSS survey drew responses from more than 8,000 developers. Beyond capturing yearly trends in feature adoption, the results feed directly into browser vendor priorities for the coming year. Here is a closer look at some of the headline findings.

The survey's year-over-year data shows steady growth in both awareness and usage of CSS Grid. This aligns with similar adoption curves tracked by the Web Almanac and Chrome's platform usage metrics. If grid is still on your learning list, the ecosystem and documentation around it have never been more mature.

Growing grid usage has also raised awareness of subgrid, the feature that lets a grid item inherit track sizing from its parent. Subgrid has been available in Firefox for some time, and now Chrome is set to ship it as part of the GridNG work led by the Microsoft Edge team.

Other features showing strong upward movement in this year's results include aspect-ratio, scroll snap, and custom properties.

Compatibility pain points shape vendor roadmap

The survey probed which CSS features cause the most cross-browser friction. The answers are not just a symptom report; they help browser vendors set priorities for interoperability efforts. Several of the most-cited problem areas are already part of the Compat 2021 initiative, itself derived from the MDN Browser Compatibility Report 2020. Other sore spots, such as subgrid, are now on the table as proposed focus areas for Interop 2022.

Container queries: the missing feature developers want most

Developers were again asked which CSS capability they would most like to use today. For the second year running, container queries came out on top. The appeal is clear: container queries enable component-based responsive design by letting an element react to its parent's size and style, a far more local scope than what global media queries can offer.

Work is underway to change that. Chrome has an experimental implementation behind a flag, and the spec is being actively developed in the CSS Working Group with funding from Google for spec editor Miriam Suzanne. Developers who want to experiment today can enable the Container Queries flag in Canary at about:flags or use the container query polyfill.

The full State of CSS 2021 report includes more data, recommended resources, and the complete breakdown of responses.