11 New CSS Features Every Browser Supports in 2025

Video Description

Sponsored by Sevalla (paid promotion) — Check it out here: https://sevalla.com/?utm_source=camelcase&utm_medium=Referral&utm_campaign=youtube Check out my new video on GitHub Spark: https://youtu.be/hTgCojl9qGo?si=s8-u1mQ2xwR96X98 Learn 11 powerful new #HTML & #CSS features that hit #Baseline in 2024/2025—so you can use them safely across all major browsers. We’ll speed up render time, replace fiddly JS with cleaner CSS/HTML solutions, and peek into #CSSHoudini for custom magic. 🍿 Chapters: 00:00 Intro 01:00 light-dark() 02:26 Popover API 05:16 Relative color syntax 08:22 content-visibility: auto 10:53 align-content on block layout 12:09 contenteditable "plaintext-only" 13:50 @property 16:54 Exclusive Accordion 18:03 backdrop-filter 18:59 ::target-text 19:52 scrollbar-gutter & scrollbar-width 🔗 Links: Color Switcher using light-dark(): https://codepen.io/fbernack/pen/myePZYR Popover API: https://codepen.io/fbernack/pen/rNgmexV Popover Example by Arby: https://codepen.io/mobalti/pen/EaYVJgr Relative Color Syntax: https://codepen.io/fbernack/pen/jEbegJg Content-visibility Rendering: https://content-visibility-demo-igp4j.sevalla.page/ Align content vertically: https://codepen.io/fbernack/pen/EaVYrrg Form with contenteditable toggle: https://codepen.io/fbernack/pen/GgpeqpY @property Example: https://codepen.io/fbernack/pen/QwjZpNz @property Animating Gradient: https://codepen.io/fbernack/pen/EaVKzvw Exclusive Accordion: https://codepen.io/fbernack/pen/ogjXXdj Horizontal Exclusive Accordion by web.dev: https://codepen.io/web-dot-dev/pen/XWvBZNo Backdrop-Filter Liquid Glass Effect: https://codepen.io/fbernack/pen/VYvEWeZ Backdrop-Filter Gallery: https://codepen.io/fbernack/pen/WbQQvwR MDN target-text Demo: https://mdn.github.io/css-examples/target-text/index.html#:~:text=Space%20forbids,first%20sight Scrollbar-gutter & scrollbar-width: https://codepen.io/fbernack/pen/KwdrpQM 🧑‍💻 Further information: Baseline 2025: https://web.dev/baseline/2025 Baseline 2024: https://web.dev/baseline/2024 Text fragments MDN: https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Fragment/Text_fragments 📜 Legal: Music License Codes: VOINKK4VUN4TLJ6C, VX5YXVKM8I8FSXA8, OHRMTVXNJQP3895M, OTQRUBEYV0BESSYT, DLUADDWLR7I5J8JD Android Logo: The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.