State of CSS 2023

Changes to the Web-Platform have picked up a lot of momentum over the last years. Browser Vendors are busy modernizing the CSS and providing long-overdue features to streamline the web and improve interoperability.

Instead of waiting for years to be able to adopt new features, evergreen browsers allow us to use the future already today.

We look at new CSS capabilities and see what we can use them for. Practical examples will help you understand how you can utilize the new features. We will talk about upcoming features that will come to a browser near you in a foreseeable time.

Transcript

1. STATE OF CSS 2023 Benjamin Kott benjamin.kott@typo3.com @benjaminkott Modern CSS
2. BENJAMIN KOTT ▪ Developer Advocate ▪ Frontend Developer ▪ Consultant @benjaminkott benjamin.kott@typo3.com
3. DISCLAIMER: CSS IS EASY
4. BROWSERS
5. DISCLAIMER: CSS IS NOT EASY
6. 2019 / 2020 Web Developer Needs Assessment Web DNA Report https://insights.developer.mozilla.org/
8. COMPAT 2021 aspect-ratio css-flexbox css-grids css-transforms position-sticky https://web.dev/compat2021 https://wpt.fyi/compat2021
9. INTEROP 2022 Cascade Layers Color Spaces and Functions Containment Dialog Element Forms Scrolling Subgrid Typography and Encodings Viewport Units Web Compat https://web.dev/interop-2022 https://wpt.fyi/interop-2022
10. UPDATE
11. CONTAINMENT
12. <div class="vcard"> <div class="vcard-container"> <div class="vcard-image"></div> <div class="vcard-body"></div> </div> </div>
13. .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; } }
14. .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; } }
15. 00.03% caniuse.com @container Should be stable end of 2022
16. 87.27% caniuse.com @container https://developer.mozilla.org/en-US/docs/Web/CSS/@container
17. HAS
18. <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>
19. :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; }
20. https://developer.mozilla.org/en-US/docs/Web/CSS/:has 12.86% caniuse.com :has Should be stable end of 2022
21. https://developer.mozilla.org/en-US/docs/Web/CSS/:has 87.03% caniuse.com :has Should be stable end of 2023
23. INTEROP 2023 Border Image in CSS Color Spaces and Functions in CSS Container Queries in CSS Containment in CSS CSS Pseudo-classes Custom Properties in CSS Flexbox Font Feature Detection and Palettes Forms Grid :has() Inert Masking in CSS Math Functions in CSS Media Queries 4 Modules in Web Workers Motion Path in CSS Animations Offscreen Canvas Pointer and Mouse Events Scrolling Subgrid Transforms URL Web Compat 2023 Web Codecs (video) Web Components https://web.dev/interop-2023 https://wpt.fyi/interop-2023
25. wpt.fyi/interop-2023?stable web-platform-tests dashboard
26. FOCUS VISIBLE
27. .button { display: inline-block; outline: 0; border: 1px solid white; } .button:focus { border-color: red; } .button:focus-visible { outline: 1px solid green; }
28. 91.41% caniuse.com :focus-visible ttps://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
29. FOCUS WITHIN
30. .block:focus-within { background-color: red; }
31. 95.85% caniuse.com :focus-within https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
32. CUSTOM PROPERTIES (--*): CSS VARIABLES
33. :root { --vcard-highlight-color: #ff8700; } .vcard-info { color: var(--vcard-highlight-color); }
34. .vcard-name { font-size: var(--vcard-name-font-size); margin-bottom: calc( var(--vcard-name-font-size) / 2 ); }
35. 96.18% caniuse.com Custom Properties
36. @property --color { syntax: '<color>'; initial-value: #000000; inherits: false; } @property --space { syntax: '<length>'; initial-value: 0; inherits: false; }
37. @keyframes pulse { 0% { --color: #ecd803; --space: 20px; } 80% { --color: #ec8603; --space: 10px; } 100% { --color: #ecd803; --space: 20px; } }
38. 81.22% caniuse.com @property
39. TEXT-WRAP: BALANCE
40. text-wrap: normal Lorem ipsum dolor sit amet, consectetur adipiscing elit. text-wrap: balance Lorem ipsum dolor sit amet, consectetur adipiscing elit.
41. * { text-wrap: balance; }
42. 57.67% caniuse.com text-wrap: balance https://developer.chrome.com/blog/css-text-wrap-balance/
43. 57.67% caniuse.com text-wrap: balance https://developer.chrome.com/blog/css-text-wrap-balance/
44. text-wrap: balance; /* all the things */
45. COLOR- SPACES
46. srgb Standard RGB srgb-linear Standard RGB Linear hsl Hue, Saturation, Lightness hwb Hue, Whiteness, Blackness lch Hue, Chroma, Luminance oklch Uniform Hue, Chroma, Luminance lab Perceptual lightness, Chroma, Hue oklab Uniform Perceptual lightness, Chroma, Hue
47. srgb Standard RGB srgb-linear Standard RGB Linear hsl Hue, Saturation, Lightness hwb Hue, Whiteness, Blackness lch Hue, Chroma, Luminance oklch Uniform Hue, Chroma, Luminance lab Perceptual lightness, Chroma, Hue oklab Uniform Perceptual lightness, Chroma, Hue
48. srgb Standard RGB srgb-linear Standard RGB Linear hsl Hue, Saturation, Lightness hwb Hue, Whiteness, Blackness lch Hue, Chroma, Luminance oklch Uniform Hue, Chroma, Luminance lab Perceptual lightness, Chroma, Hue oklab Uniform Perceptual lightness, Chroma, Hue 100% 100% 98% 90% 85% 85% 85% 85%
50. No animals were harmed in this photo shoot except for the last unicorn. Will not happen again, rest in peace.
51. COLOR-MIX
53. :root { --text-color-1-value: yellow; --text-color-1-percent: 50%; --text-color-2-value: cyan; --text-color-2-percent: 50%; } .block { background: color-mix( in srgb, var(--text-color-1-value) var(--text-color-1-percent), var(--text-color-2-value) var(--text-color-2-percent) ); }
54. 80.36% caniuse.com color-mix https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
55. NESTING
57. .demo .fade { opacity: .25; } .demo { & .fade { opacity: .25; } }
58. .nesting > .is > .awesome { color: deeppink; } .nesting { > .is { > .awesome { color: deeppink; } } }
60. .demo .triangle, .demo .square { opacity: .25; filter: blur(25px); } /* grouped with :is() */ .demo :is(.triangle, .square) { opacity: .25; filter: blur(25px); }
61. BONUS ROUND
62. GOOD LUCK!