WWDC26期间，Safari 27带来了大量WebKit底层更新。其中最让前端开发者关注的，是Customizable Select和CSS Grid Lanes两项新能力。它们一个解决了原生表单控件定制化的老大难问题，另一个则为CSS布局打开了全新的维度。
Customizable Select：原生下拉框终于可以定制了
长久以来，前端开发者对原生<select>元素既爱又恨——它无障碍访问性好、键盘操作原生支持，但样式定制极其有限。Safari 27的Customizable Select从根本上改变了这一局面。
新规范允许开发者通过CSS对option元素进行丰富的样式设置，包括颜色、间距、图标等。但WebKit团队也给出了重要提醒：option内必须保留文本或可访问文本属性，纯图标选项仍然是坑。正如Matuzo在WebKit Field Guide中分析的：「原生控件能做的事情变多了，但icon-only选项依然是可访问性的雷区。」开发者在享受定制自由度的同时，不能丢掉无障碍访问的底线。
CSS Grid Lanes：瀑布流布局的原生方案
Grid Lanes是这周最该被前端警惕的CSS新能力。它能让你轻松实现卡片流、商品流、瀑布流等布局，但有一个隐藏陷阱：它很容易让视觉顺序和DOM/Tab顺序错位。虽然flow-tolerance属性可以部分缓解，但不能完全兜底。
这意味着，如果你的页面依赖键盘导航或屏幕阅读器，直接无脑上Grid Lanes可能会造成严重的可访问性问题。正确的做法是：先确保DOM顺序本身合理，再用Grid Lanes仅做视觉增强。
小编有话说
Safari 27的这两项更新体现了WebKit团队一贯的风格：功能很强大，但使用需谨慎。Customizable Select降低了自定义组件库的依赖，Grid Lanes则让瀑布流不再需要JS库。但「视觉不等于结构」这个原则，在这些新能力面前变得更加重要。建议前端团队将这些新特性纳入Code Review检查清单，避免上线后发现可访问性问题。
评论 (0)