Firefox 71:率先支持 Subgrid

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

Firefox 本周发布了一个很棒的版本!请参阅 Chris Mills 的完整汇总文章。我个人很高兴看到 clip-path: path(); 正式上线,我们一直在 跟踪它,因为它显然非常有用。我们还获得了 column-span: all;,如果您是少数几个使用 CSS 列 的人之一,那将非常不错。

但还有两件事我认为是**非常重要**的

  1. 如果您通过灵活宽度的容器和 img { max-width: 100%; } 使用流体图像(大多数网站都使用),则在这些图像加载时,您可能会遇到一些加载问题,因为浏览器在知道图像的尺寸之前,不知道需要预留多大的空间高度。但是现在,如果您添加了 width/height 属性(例如 <img width="500" height="250" src="...">),Firefox(和 Chrome)将根据这些属性计算纵横比并预留正确数量的空间。这看起来像是小事,但实际上并非如此。它将改善数百万个网站的感知加载速度。
  2. 现在我们有了 subgrid!还记得几年前 Eric Meyer 将它们称为 必不可少 吗?它们允许元素共享父元素的网格线,而无需创建新的网格线。结果可能是 减少标记扁平化 并创建更简洁的设计。 “卡片”网格就是一个很好的例子,Miriam 在 此视频 中展示了如何获得更合理的空格分配。这似乎很流行,Anton Ball 在 这篇博文中 也涵盖了相同的概念。我喜欢它如何支持渐进增强。您仍然可以在不支持 subgrid 的浏览器中为元素设置网格列/行,然后使用 display: subgrid; 使它们在支持的浏览器中继承网格线。

直链 →