The :open pseudo-class is now supported in every major browser, letting you style open states of <dialog>, <details>, and <select> without JavaScript or custom attribute toggling.
The :open CSS pseudo-class reached Baseline Widely Available in May 2026, with Safari 26.5 closing the last browser gap. Chrome has supported it since version 133, Firefox since 136, and now the full set is complete. You can style the open state of <dialog>, <details>, and <select> elements directly in CSS.
Before :open, styling an open dialog meant toggling a class or [open] attribute selector, which required JavaScript to add and remove it at the right moment. details[open] worked for disclosure widgets, but the attribute selector only matched when the open attribute was present in the DOM, it could not distinguish between a <select> that was actively expanded by the user and one that was just rendered. :open handles both cases correctly because the browser owns the state.
The practical win is removing JS from common interaction patterns. A details element can animate its disclosure with a CSS transition on ::details-content and change its summary marker color with details:open > summary. A dialog's backdrop can change opacity based on dialog:open::backdrop. None of these require a line of JavaScript.
Container style queries and :open shipping in the same Baseline window means 2026 is the year CSS took over interaction styling that previously belonged to JavaScript. If your component library still ships a useOpenState hook to append a class name to a dialog, you can retire it.
Firefox 154 is the last gap: text-box and the sibling functions now work in every major engine, so you can delete the JavaScript and utility-class hacks doing their job.
1 source
Scroll-driven animations achieved Baseline status in 2026, meaning they're available in all major browsers. Parallax, scroll-triggered reveals, and progress-linked animations now work with pure CSS, no JavaScript, no IntersectionObserver, no animation libraries.
1 source
Chrome 150 stable ships text-fit, which fits text to its container width in pure CSS and lets you drop FitText-style measurement JavaScript, though the spec stays a W3C draft with no Baseline support yet.
1 source