WebKit 引擎引入 CSS Grid Lanes：让 CSS 原生支持瀑布流，已上线苹果 Safari 技术预览版 234

12 月 28 日消息，WebKit 浏览器引擎上周（12 月 19 日）更新开发文档，提出 CSS Grid Lanes 概念，旨在将瀑布流（Waterfall）排版放入浏览器原生 CSS 中。

官方文档中显示，CSS Grid Lanes 方案基于 Mozilla 与 WebKit 的早期工作，同时也经过 CSS 开发组与各大浏览器厂商的多轮讨论，目前已形成较为明确的开发方式。同时文档将 grid-lanes 和 inline-grid-lanes 纳入 display 属性，定义 Grid Lanes 的布局模型及相关行为。

官方强调，CSS Grid Lanes 在可用性及无障碍方面改进显著，传统瀑布流网页存在视觉顺序与键盘操作顺序不一致的问题，例如当用户使用 Tab 键移动页面焦点时，一开始可能会移动到第一列的底部，然后才能跳回第二列的顶部，导致阅读和操作体验割裂。

为了避免出现这种问题，WebKit 引入了 item-tolerance 概念，可在保留瀑布流网页高密度视觉效果的同时，让用户能更自然地通过键盘操作网页，减少过去为测量内容高度、计算位置而不得不使用 JavaScript 介入布局的情况。

此外，W3C 协会还讨论了新特性的兼容性、降级问题，文档实例中提到，开发者可以先声明 display: grid 再声明 display: grid-lanes，使不支持 Grid Lanes 的浏览器忽略特性，仍以普通 Grid 布局呈现，只是可能在垂直方向上产生更多空隙，效果还算可以接受。

不过 Grid Lanes 目前还处于测试阶段，同时相关规范已在苹果 Safari 技术预览版（Safari Technology Preview） 234 浏览器中上线。

附 WebKit 官方文档地址如下：

• https://webkit.org/blog/17660/introducing-css-grid-lanes/