New CSS features to know for 2025

This is the first installment of a new series I'm going to start called CSS Quarterly, where I'm going to look at the newest CSS features that are on their way to browsers, as well as look at features that are hitting Baseline Newly Available and Baseline Widely Supported.

✅ Custom selects
demo: https://codepen.io/web-dot-dev/pen/gbOKyRZ
more info: https://developer.chrome.com/blog/a-customizable-select

✅ Carousels
many demos: https://chrome.dev/carousel/
more info: https://developer.chrome.com/blog/carousels-with-css

✅ mixins and functions
more info: https://css.oddbird.net/sasslike/mixins-functions/
video on functions: https://youtu.be/fhuYPNlBkyw

✅ anchor positioning
demo: https://codepen.io/kevinpowell/pen/poMaLjR
video tutorial for that demo: https://youtu.be/DNXEORSk4GU
more info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS...

✅ view transitions
video on multi-page view transitions: https://youtu.be/quvE1uu1f_I
video on single-page view transitions: https://youtu.be/jZiZs8cZAKU
more info: https://developer.chrome.com/docs/web-platform/view-...

✅ text-box-trim:
more info: https://github.com/jantimon/text-box-trim-examples

✅ advanced attr()
demo: https://codepen.io/kevinpowell/pen/XJrxLaN
more info: https://una.im/advanced-attr/

✅ transition-behavior: allow-discrete and starting-style
demo: https://codepen.io/kevinpowell/pen/bGydPEb
video tutorial for that demo: https://youtu.be/vmDEHAzj2XE
more info: https://developer.chrome.com/blog/entry-exit-animations

✅ A new, unified layout concept?
https://webkit.org/blog/16587/item-flow-part-1-a-new...

Newly available
✅ popover
demo: https://codepen.io/kevinpowell/pen/NPWEbWe
more info: https://developer.mozilla.org/en-US/docs/Web/HTML/Gl...

✅ scrollbar-width and scrollbar-gutter
demo: https://codepen.io/kevinpowell/pen/bNGQBLP/9798a0782...
more info on scrollbar-gutter: https://developer.mozilla.org/en-US/docs/Web/CSS/scr...

✅ backdrop-filter
demo: https://codepen.io/kevinpowell/pen/RwOewNr
make better frosted glass effects: https://www.joshwcomeau.com/css/backdrop-filter/

✅ Relative colors
demo: https://codepen.io/kevinpowell/pen/yLWzzbx
video: https://youtu.be/gPacarD9NuA
more info: https://ishadeed.com/article/css-relative-colors/

✅ alt text for generated content
more info: https://adrianroselli.com/2020/10/alternative-text-f...

✅ round(), mod(), and rem()
more info on all of them: https://web.dev/blog/css-stepped-value-functions
more info on round(): https://danielcwilson.com/posts/mathematicss-round/

✅ light-dark()
html and css tip of the week: https://html-css-tip-of-the-week.netlify.app/
more info: https://12daysofweb.dev/2024/css-light-dark/

✅ text-wrap
- more info: https://developer.mozilla.org/en-US/docs/Web/CSS/tex...

✅ AVIF
more info: https://cloudinary.com/guides/image-formats/avif-for...

Widely supported
✅ overflow: clip
video tutorial: https://www.youtube.com/watch?v=2WWAEftnzf0
demo: https://codepen.io/kevinpowell/pen/KwKraPg

✅ overscroll-behavior
more info: https://developer.mozilla.org/en-US/docs/Web/CSS/ove...

✅ text-align-last
demo: https://codepen.io/kevinpowell/pen/GgRzXPj

✅ :focus-visible
demo: https://codepen.io/kevinpowell/pen/KwPVPpb

✅ cascade layers
demo: https://codepen.io/kevinpowell/pen/OJdQqBm/34875ea60...
video: https://youtu.be/NDNRGW-_1EE
more info: https://www.smashingmagazine.com/2022/01/introductio...
more info: https://developer.mozilla.org/en-US/docs/Learn_web_d...

✅ dialog & modal
demo: https://codepen.io/kevinpowell/pen/JojmdRO/203804a26...
more info on dialog: https://developer.mozilla.org/en-US/docs/Web/HTML/El...
more info on modal: https://developer.mozilla.org/en-US/docs/Web/CSS/:modal

⌚ Timestamps
00:00 - Introduction
01:10 - The new features
12:41 - Baseline newly available
23:20 - Baseline widely supported

#css

✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co
🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.c...
🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:

Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!