IT之家 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 浏览器中上线。
IT之家附 WebKit 官方文档地址如下:
-
https://webkit.org/blog/17660/introducing-css-grid-lanes/
广告声明:文内含有的对外跳转链接(包括不限于超链接、二维码、口令等形式),用于传递更多信息,节省甄选时间,结果仅供参考,IT之家所有文章均包含本声明。

