八年前Flexbox刚普及时，开发者为了给网格间隙加条分隔线，只能写一堆border和伪元素的补丁代码。如今，一种原生CSS方案终于结束这种“hack”模式。
微软Edge web平台团队近日宣布，CSS gap decorations特性已从Chrome和Edge 149版本开始全面支持，所有基于Chromium的浏览器都会陆续获取该能力。团队主导了功能的设计与标准化工作，使得开发者可以用几行声明式代码，精确控制grid和flexbox布局中行与列的间隙样式。
有前端工程师认为，这类视觉强化只是锦上添花，过去用border、outline甚至box-shadow也能凑合。但另一部分开发者指出，随着组件化设计越来越依赖gap属性管理空间，原生间隙样式能大幅削减冗余代码，同时避免伪元素层级失控引发的样式覆盖问题。从可维护性看，这是一次对日常开发痛点的直接回应。
此次更新最核心的变化是把早期草案中的column-rule能力从多列布局延展到grid和flexbox，并新增row-rule属性，实现两个轴向的间隙装饰。语法上则做了进一步扩展，提供更精细的线条样式、颜色和宽度控制。根据开发者早期测试反馈，标准推进过程中还调整了部分属性命名，使其语义更清晰，并引入若干新属性来覆盖实际使用场景。
目前的浏览器支持情况：Chrome与Edge 149起已可用，其他Chromium浏览器在版本对齐后会跟进。参与标准讨论的其他浏览器引擎也表现出积极态度，因此未来有望实现跨引擎互操作。如果你的项目将间隙装饰视为渐进增强，现在就可以直接使用——不支持的浏览器上不会有任何破坏。如果必须确保全平台一致性，一个polyfill已进入开发阶段。
在一个简洁的个人站点demo里，页面使用grid划分不同版块，并借助gap decorations为博客文章列表的卡片间添加了垂直分隔线，以及为导航区的项目之间插入水平装饰线。这类原本需要额外容器或伪元素实现的效果，现在只需在网格或弹性容器上设定row-rule或column-rule即可，样式声明同样支持虚线、双线等多样式类型。
gap decorations的到来，并没有改变布局模型的基础逻辑，也没有引入新的盒模型概念。它做的是把过去开发者必须绕路才能达到的效果，变成可直接配置的选项。对于长期被伪元素和border方案困扰的前端工程来说，这算得上一次务实而有节制的体验升级。
热门跟贴