Uploaded April 2025 | Updated September 2026, 2 weeks ago

---

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: codepen.io/web-dot-dev/pen/gbOKyRZ
more info: developer.chrome.com/blog/a-customizable-select

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

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

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

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

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

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

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

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

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

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

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

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

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

✅ round(), mod(), and rem()
more info on all of them: https://web.dev/blog/css-stepped-value-functions
more info on round(): 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: developer.mozilla.org/en-US/docs/Web/CSS/text-wrap

✅ AVIF
more info: cloudinary.com/guides/image-formats/avif-format-a-next-gen-image-format-to-rule-them-all

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

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

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

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

✅ cascade layers
demo: codepen.io/kevinpowell/pen/OJdQqBm/34875ea609e2305f01cdd53e5a23489e
video: youtu.be/NDNRGW-_1EE
more info: smashingmagazine.com/2022/01/introduction-css-cascade-layers
more info: developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers

✅ dialog & modal
demo: codepen.io/kevinpowell/pen/JojmdRO/203804a2632f5b122bf766368fcd657a?editors=1010
more info on dialog: developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
more info on modal: 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 kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: learn.kevinpowell.co
🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/)
🚀 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: codepen.io/kevinpowell
Github: 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!