WebKit Features for Safari 27.2
WebKit ·
Safari 27.2 is here, refining Customizable Select, renaming a Grid Lanes property, and delivering 20 bug fixes across accessibility, media, CSS, and more.
Customizable Select originally landed in Safari 27.0 . Since then, the web standards process continues to polish details. And implementations across all browsers are being updated to match.
For decades, when you use the element and a user selects an option, it gets displayed in the “button” (the interactive part of the control that appears on the page). The new superpowers of Customizable Select include a element to give you more control over what’s displayed and how it looks.
Processing Shipped Delivered Canceled But you are not required to use . You can still write HTML like this:
Processing Shipped Delivered Canceled Now in Safari 27.2, the new ::field-content pseudo-element gives you the ability to style the text of the selected option that’s displayed on the page, without needing the element.
In addition, Safari 27.2 refines a few of the default UA styles for appearance: base-select . The button’s contents vertically center more reliably. The selected option text now inherits text-overflow from . The way we draw the ::picker-icon has been updated so it can have a more straightforward layout. And the button uses flex: 1 to manage spacing, instead of margin-inline-start: auto on ::picker-icon , so the picker icon is always visible, even without .
Also, previously a large select picker could render partly outside the viewport. Safari 27.2 keeps it in view by applying safe alignment. This comes from a broader change to CSS alignment: for absolutely and fixed positioned boxes, safe now keeps the box within its original containing block. You can also now combine the safe and unsafe keywords with normal alignment.
Grid Lanes originally shipped in Safari 26.4 last March . Since then, the CSS Working Group decided to rename the flow-tolerance property to fit-tolerance to better describe its purpose. Safari 27.2 updates Grid Lanes to use the new name. Meanwhile, the older name will keep working for now as a deprecated alias. Be sure to update your code soon. Safari Web Inspector can help by marking what needs to be changed.
What is the fit-tolerance property? It controls how picky the browser is when it chooses where to put the next item. Without any tolerance, the browser looks for the column (or row in the other direction) whose content precisely ends highest on the page, and puts the item there. But if several columns end at nearly the same height, you may not care which one wins. With fit-tolerance , you define how much of a difference counts. When columns are within that distance of each other, the browser treats them as tied and just picks the first one. The default is fit-tolerance: 1em .
A higher tolerance keeps consecutive items in neighboring columns, instead of jumping back and forth across the page to chase tiny differences in height. That makes for a better experience tabbing through content, especially for sighted keyboard users, who watch focus move from item to item. So most of the time, you should increase this number significantly. How much depends on your content sizes and how much they vary.
Play with fit-tolerance on the Field Guide to Grid Lanes to better understand what it does. Learn more about how Grid Lanes and Fit Tolerance work in our article, Introducing CSS Grid Lanes .
In addition to these updates, in our continuing commitment to quality, WebKit for Safari 27.2 includes 20 bug fixes:
Safari 27.2 is available on iOS 27.2, iPadOS 27.2, visionOS 27.2, macOS 27.2 Golden Gate, macOS Tahoe and macOS Sequoia. On iOS, iPadOS, visionOS, and macOS 27.2 Golden Gate, you can update to Safari 27.2 as part of the OS update in Settings > General > Software Update. On older versions of macOS, if you want to only update Safari, you can do so in Software Update, by clicking “more”.
We love hearing from you. To share your thoughts, find our web evangelists online: Jen Simmons on Bluesky / Mastodon , Saron Yitbarek on Bluesky / Mastodon , and Jon Davis on Bluesky / Mastodon . You can follow WebKit on LinkedIn . If you run into any issues, we welcome your feedback on Safari UI (learn more about filing Feedback ), or your WebKit bug report about web technologies or Web Inspector. If you run into a website that isn’t working as expected, please file a report at webcompat.com . Filing issues really does make a difference.