Safari 27 Beta Adds Customizable select and Case-Sensitive Selectors

Safari 27 hit beta on July 20 (build 20625.1.24). Two items lead: a customizable <select> element and the case-sensitive s modifier for attribute selectors.

The <select> work answers the oldest complaint in form styling. You opt in with appearance: base-select, which strips the OS chrome while keeping native popup behavior, and the new <selectedcontent> element renders the current selection however you want. Together they delete the category of custom select libraries and their keyboard-focus hacks. On the selector side, [data-status="active" s] matches case-sensitively, so you can drop the :not() chains and transform workarounds you were using to fake case-sensitive matching.

The rest matters if it touches your code. :heading replaces six-element selector lists in your design system resets. contain: style scopes quote counters, which matters for multi-column layouts where quote numbering bleeds across sections today. :host:has() in compound selectors means a shadow host can style itself based on its children without a wrapper element. Declarative shadow roots gain shadowrootslotassignment, so component slot setup moves from the constructor into markup. sizes="auto" on <img> lets the browser pick the right source after layout, which you currently approximate with srcset hand-tuning.

Safe to ignore for now: BigInt math methods and static import defer semantics land for JS platform completeness, and color-mix() gains multi-color support. If you support Safari, base-select and the s modifier are the two features that delete code from your codebase. The beta runs on iOS 27, iPadOS 27, visionOS 27, and macOS 27, with support for macOS 26 and Sequoia.