Firefox 本周发布了一个很棒的版本!请参阅 Chris Mills 的完整汇总文章。我个人很高兴看到 clip-path: path();
正式上线,我们一直在 跟踪它,因为它显然非常有用。我们还获得了 column-span: all;
,如果您是少数几个使用 CSS 列 的人之一,那将非常不错。
但还有两件事我认为是**非常重要**的
- 如果您通过灵活宽度的容器和
img { max-width: 100%; }
使用流体图像(大多数网站都使用),则在这些图像加载时,您可能会遇到一些加载问题,因为浏览器在知道图像的尺寸之前,不知道需要预留多大的空间高度。但是现在,如果您添加了 width/height 属性(例如<img width="500" height="250" src="...">
),Firefox(和 Chrome)将根据这些属性计算纵横比并预留正确数量的空间。这看起来像是小事,但实际上并非如此。它将改善数百万个网站的感知加载速度。 - 现在我们有了 subgrid!还记得几年前 Eric Meyer 将它们称为 必不可少 吗?它们允许元素共享父元素的网格线,而无需创建新的网格线。结果可能是 减少标记扁平化 并创建更简洁的设计。 “卡片”网格就是一个很好的例子,Miriam 在 此视频 中展示了如何获得更合理的空格分配。这似乎很流行,Anton Ball 在 这篇博文中 也涵盖了相同的概念。我喜欢它如何支持渐进增强。您仍然可以在不支持 subgrid 的浏览器中为元素设置网格列/行,然后使用
display: subgrid;
使它们在支持的浏览器中继承网格线。
Firefox 的这些功能很棒,但是我(我认为很多人也是)真正期待的是简单地实现 min()。
这个小升级真的会让网格在网络上的应用发挥出更大的作用。Subgrid 很好,但它不是最重要的事情。
希望如此。