:open Pseudo-Class Reaches Baseline, Styling Open Dialogs and Details Without JS

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.