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_anchor_positioning ✅ 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-transitions ✅ 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-unified-concept-for-layout/ Newly available ✅ popover demo: https://codepen.io/kevinpowell/pen/NPWEbWe more info: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover ✅ scrollbar-width and scrollbar-gutter demo: https://codepen.io/kevinpowell/pen/bNGQBLP/9798a07821bc445477a46b2691ff1f04 more info on scrollbar-gutter: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter ✅ 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-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(): 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/text-wrap ✅ AVIF more info: https://cloudinary.com/guides/image-formats/avif-format-a-next-gen-image-format-to-rule-them-all 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/overscroll-behavior ✅ 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/34875ea609e2305f01cdd53e5a23489e video: https://youtu.be/NDNRGW-_1EE more info: https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/ more info: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers ✅ dialog & modal demo: https://codepen.io/kevinpowell/pen/JojmdRO/203804a2632f5b122bf766368fcd657a?editors=1010 more info on dialog: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog 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.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: 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!