Explore Safari 27's browser improvements, component-sized container queries, and a custom checkbox pattern that preserves native focus behavior. Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 38-2026bolt1 CRITICAL
article
TAG: FRAMEWORK UPDATEREAD_TIME: 80_MIN
WebKit Features for Safari 27.0
Safari 27.0 ships 83 features and 844 fixes, with improvements to native controls, layout stability, and JavaScript module loading. Customizable select enables appearance: base-select and new styling hooks while retaining keyboard navigation, validation, and form submission. Scroll anchoring is enabled by default, and transformed anchors now track tooltips and popovers correctly; position-anchor also changes its default from auto to normal. The rebuilt ECMAScript module loader fixes top-level await ordering, while WebAssembly gains JavaScript Promise Integration. WebKit also ships BigInt math APIs from a Stage 1 proposal, so teams should treat that API shape as provisional and test cross-browser behavior before depending on it.
Ahmad Shadeed explains why vertically centering an icon beside a multiline label can place it between lines instead of beside the first line. A fixed pixel offset can repair one example but fails as font size or line height changes. His alternative derives the offset from the difference between the first line’s height and the known icon size, using the lh unit in a calc() expression. The icon starts at the top and is translated into alignment with that first line, while its sizing and shrink behavior remain explicit. This pattern makes alignment respond to typography rather than relying on a position tuned to one screenshot.
A decent custom checkbox pattern for until ::checkmark is ready
Andy Bell builds a custom checkbox while preserving a real checkbox input and its native focus behavior. A wrapping label links the text to the control, while an aria-hidden SVG supplies the visible tick without adding an extra announcement. The input uses appearance: none and absolute positioning, and CSS switches the icon with :checked while :has() changes the surrounding box. Relative em and ex units let the component scale with its font size, and baseline alignment keeps wrapped labels aligned. The pattern also adapts to radio buttons, providing a current workaround while broader checkbox support for appearance: base and ::checkmarkremains unavailable.
Stop Treating CSS Container Queries Like Traditional Media Queries
Container size queries make reusable components respond to their available space, while media queries remain responsible for page-level layout and user preferences. Victor Ayomipo demonstrates how a card in a narrow sidebar can need a vertical layout even on a wide desktop screen. Naming a parent container and setting container-type: inline-size lets @container rules style its descendants; cqi with clamp() also makes typography follow the component's width. The article shows a flex-wrapping workaround but warns that containers cannot query themselves, container-type: size can collapse height without explicit sizing, and query thresholds cannot use var(). Use the component's actual constraints to choose its breakpoints instead of copying viewport thresholds.
Kevin Powell demonstrates why viewport-based fluid type can keep growing after a content wrapper has reached its maximum width. Container query units make the size follow local space, but nested containers introduce another problem when identical headings inherit different available widths. His proposed technique registers a custom property as a length and allows descendants to inherit the computed size instead of repeatedly resolving the original expression against their own containers. An unregistered sizing recipe can still be retained for places that intentionally need a new local calculation. The lesson is to decide where fluid type should be calculated and where that result should remain consistent, then test the behavior across nested layouts.
Safari 27.0 ships 83 features and 844 fixes, with improvements to native controls, layout stability, and JavaScript module loading. Customizable select enables appearance: base-select and new styling hooks while retaining keyboard navigation, validation, and form submission. Scroll anchoring is enabled by default, and transformed anchors now track tooltips and popovers correctly; position-anchor also changes its default from auto to normal. The rebuilt ECMAScript module loader fixes top-level await ordering, while WebAssembly gains JavaScript Promise Integration. WebKit also ships BigInt math APIs from a Stage 1 proposal, so teams should treat that API shape as provisional and test cross-browser behavior before depending on it.
Kevin Powell demonstrates why viewport-based fluid type can keep growing after a content wrapper has reached its maximum width. Container query units make the size follow local space, but nested containers introduce another problem when identical headings inherit different available widths. His proposed technique registers a custom property as a length and allows descendants to inherit the computed size instead of repeatedly resolving the original expression against their own containers. An unregistered sizing recipe can still be retained for places that intentionally need a new local calculation. The lesson is to decide where fluid type should be calculated and where that result should remain consistent, then test the behavior across nested layouts.
Ahmad Shadeed explains why vertically centering an icon beside a multiline label can place it between lines instead of beside the first line. A fixed pixel offset can repair one example but fails as font size or line height changes. His alternative derives the offset from the difference between the first line’s height and the known icon size, using the lh unit in a calc() expression. The icon starts at the top and is translated into alignment with that first line, while its sizing and shrink behavior remain explicit. This pattern makes alignment respond to typography rather than relying on a position tuned to one screenshot.
A decent custom checkbox pattern for until ::checkmark is ready
Andy Bell builds a custom checkbox while preserving a real checkbox input and its native focus behavior. A wrapping label links the text to the control, while an aria-hidden SVG supplies the visible tick without adding an extra announcement. The input uses appearance: none and absolute positioning, and CSS switches the icon with :checked while :has() changes the surrounding box. Relative em and ex units let the component scale with its font size, and baseline alignment keeps wrapped labels aligned. The pattern also adapts to radio buttons, providing a current workaround while broader checkbox support for appearance: base and ::checkmarkremains unavailable.
Stop Treating CSS Container Queries Like Traditional Media Queries
Container size queries make reusable components respond to their available space, while media queries remain responsible for page-level layout and user preferences. Victor Ayomipo demonstrates how a card in a narrow sidebar can need a vertical layout even on a wide desktop screen. Naming a parent container and setting container-type: inline-size lets @container rules style its descendants; cqi with clamp() also makes typography follow the component's width. The article shows a flex-wrapping workaround but warns that containers cannot query themselves, container-type: size can collapse height without explicit sizing, and query thresholds cannot use var(). Use the component's actual constraints to choose its breakpoints instead of copying viewport thresholds.
Safari 27.0 strengthens the browser's role in component behavior with customizable select, automatic scroll anchoring, and a large compatibility-fix set. Build on browser behavior before replacing it with custom control logic.
That principle also changes responsive design: container size queries let a component follow the space it actually receives, while media queries retain their role in page layout and user preferences. The practical work is choosing the right containing element and handling size containment, rather than copying viewport breakpoints into a different rule.
Native capability still differs between controls: the new select styling model does not mean equivalent checkbox customization is ready. Andy Bell's interim checkbox pattern keeps the real input and its focus behavior while changing the visual layer, showing how to improve presentation without discarding the underlying control.
Typography makes these boundaries visible at a smaller scale. Ahmad Shadeed aligns an icon with the label’s first line using its line height, while Kevin Powell explores where fluid type should resolve its size. Both approaches favor relationships that survive changing content over offsets tuned to a single layout.
Key Takeaways
Test Safari 27.0's native select styling and changed position-anchor defaults against existing components.
Choose container-query breakpoints from a component's available space, keeping media queries for page-level decisions.
Preserve the real input and keyboard focus when customizing checkbox visuals.
