This page shows the source for this entry, with WebCore formatting language tags and attributes highlighted.

Title

State of CSS 2021

Description

I just finished reading through the <a href="https://2021.stateofcss.com/en-US/" author="" source="">State of CSS 2021</a>. It's a well-presented<fn> summary of a developer survey about CSS. I liked the following sections: <dl dt_class="field"> <a href="https://2021.stateofcss.com/en-US/features">Features</a> the sub-sections have a pretty fine-grained listing of CSS features, usage, <a href="https://caniuse.com">caniuse</a> and <a href="https://developer.mozilla.org/">MDN</a> links, if you're interested in finding out what you might be missing...or want to be smug about all of the CSS features you know about and use. <a href="https://2021.stateofcss.com/en-US/technologies">Technologies</a> The rankings in the sub-sections are broken down by "Satisfaction", "Interest", "Usage", and "Awareness". <a href="https://2021.stateofcss.com/en-US/awards">Awards</a> <a href="https://postcss.org/">PostCSS</a>, <a href="https://vanilla-extract.style/">vanilla-extract</a>, <a href="https://github.com/css-modules/css-modules">CSS Modules</a>, and <a href="https://stitches.dev/">Stiches</a> seem worth following up on. <a href="https://2021.stateofcss.com/en-US/conclusion">Conclusion</a> They rightly note that <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries">container queries</a><fn> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer">Cascade Layers</a><fn> will drastically reduce the number of media queries and prefixing and pre- or post-processing needed for CSS. Another step in eliminating pre- or post-processing would be to support CSS nesting natively, but that's a <a href="https://caniuse.com/css-nesting">bit farther out</a>.<fn> </dl> <hr> <ft>The permalinks next to the titles don't work. I submitted an <a href="https://github.com/StateOfJS/Monorepo/issues/59">issue</a> and it may already be fixed by the time you browse to it.</ft> <ft>Available behind a flag in Blink-based browsers (Chrome, Edge, Opera). In-progress in WebKit/Safari. There's a <a href="https://github.com/GoogleChromeLabs/container-query-polyfill">container-query polyfill</a> available</ft> <ft>Available behind a flag in Blink-based browsers and Firefox and the Safari TP.<fn> No polyfill, so you really have to wait for non-flag release to use this feature.</ft> <ft>Technology Preview</ft> <ft>There are support bugs for all major browsers, but no released implementation so far, even behind a feature flag.</ft>