State of CSS 2022

Browser interoperability of CSS features was always a problem in the past. But that started to change when browser vendors started to agree on focus areas, enough to be hyped about it.

The CSS landscape is now rapidly changing, CSS variables, grids, flexbox and transforms are stable and production ready for a while now. While the features are nice, the potential shines when you start combining them.

We will have a look at legacy CSS components and see how we can improve them with modern CSS features. Answer the question if CSS pre-processing is still a thing and we will talk about upcoming CSS features and evaluate the impact.

Transcript

1. MODERN CSS Benjamin Kott benjamin.kott@typo3.com @benjaminkott State of CSS 2022
2. BENJAMIN KOTT ▪ Developer Advocate ▪ Frontend Developer ▪ Consultant @benjaminkott benjamin.kott@typo3.com
3. INTERNET EXPLORER REST IN PEACE June 15, 2022
4. 2019 / 2020 Web Developer Needs Assessment Web DNA Report https://insights.developer.mozilla.org/
5. Project Anaheim Chromium Based Edge January 15, 2020
7. Compat 2021 aspect-ratio css-flexbox css-grids css-transforms position-sticky https://web.dev/compat2021/ https://wpt.fyi/compat2021
8. Interop 2022 https://web.dev/interop-2022/ https://wpt.fyi/interop-2022
9. INTEROP 2022 Cascade Layers Color Spaces and Functions Containment Dialog Element Forms Scrolling Subgrid Typography and Encodings Viewport Units Web Compat
10. QUESTIONS? BENJAMIN KOTT @BENJAMINKOTT
11. THE END
12. A CARDS JOURNEY TYPO3 info@typo3.com @typo3 Modern CSS
13. ▪ CSS Variables ▪ Preferred Color Scheme ▪ Cascade Layers ▪ Containment ▪ Has
14. CSS VARIABLES
15. :root { --vcard-highlight-color: #ff8700; } .vcard-info { color: var(--vcard-highlight-color); }
16. .vcard-name { font-size: var(--vcard-name-font-size); margin-bottom: calc( var(--vcard-name-font-size) / 2 ); }
17. https://developer.mozilla.org/en-US/docs/Web/CSS/--* 96.18% caniuse.com CSS Variables
18. PREFERS- COLOR-SCHEME
19. light | dark
20. @media (prefers-color-scheme: dark) { :root { --vcard-color: #fafafa; --vcard-bg: #313131; --vcard-highlight-color: #9ccc65; --vcard-highlight-bg: #7cb342; } }
21. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme 93.79% caniuse.com prefers-color-scheme
22. CSS CASCADE LAYERS
23. @layer layout, theme, override; @layer theme { :root { --vcard-highlight-bg: #03a9f4; } } @layer override { :root { --vcard-highlight-bg: #9c27b0; } } @layer layout { :root { --vcard-highlight-bg: #8bc34a; } }
24. https://developer.mozilla.org/en-US/docs/Web/CSS/@layer 84.31% caniuse.com @layer
25. CONTAINMENT
26. <div class="vcard"> <div class="vcard-container"> <div class="vcard-image"></div> <div class="vcard-body"></div> </div> </div>
27. .vcard { container-type: inline-size; } @container (min-width: 250px) { .vcard-container { --vcard-name-font-size: 1.2rem; } } @container (min-width: 500px) { .vcard-container { --vcard-name-font-size: 1.5rem; } }
28. .vcard { container-type: inline-size; container-name: vcard } @container vcard (min-width: 250px) { .vcard-container { --vcard-name-font-size: 1.2rem; } } @container vcard (min-width: 500px) { .vcard-container { --vcard-name-font-size: 1.5rem; } }
29. 0.03% caniuse.com @container Should be stable end of 2022
30. GRID LAYOUT
31. .vcard-container { display: flex; flex-direction: column; } .vcard-image { display: flex; height: 100px; flex-grow: 0; flex-shrink: 0; }
32. .vcard-container { display: grid; grid-template: 'vcard-image' 100px 'vcard-body' ; } .vcard-image { grid-area: vcard-image; .vcard-body { grid-area: vcard-body; }
33. https://developer.mozilla.org/en-US/docs/Web/CSS/@layer 96.24% caniuse.com CSS Grid Layout
34. ACCENT COLOR
35. :root { --accent-color: unset; } input, progress { accent-color: var(--accent-color); }
36. https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color 87.04% caniuse.com accent-color
37. HAS
38. <div class="article"> <div class="article-image"><img src="…"></div> <div class="article-body">…</div> </div> <div class="article"> <div class="article-body">…</div> </div>
39. :root { --article-color: #313131; --article-bg: #fff; } .article { color: var(--article-color); background: var(--article-bg); } .article:has(.article-image) { --article-color: #fff; --article-bg: #9c27b0; }
40. https://developer.mozilla.org/en-US/docs/Web/CSS/:has 12.86% caniuse.com :has Should be stable end of 2022
41. QUESTIONS? BENJAMIN KOTT @BENJAMINKOTT
42. THE END