5 个 CSS 新功能

做者： Anna Monus
译者：前端小智
来源：blog.logrocket

点赞再看，微信搜索 【大迁世界】,B站关注 【前端小智】这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了不少个人文档，和教程资料。

最近开源了一个 Vue 组件，还不够完善，欢迎你们来一块儿完善它，也但愿你们能给个 star 支持一下，谢谢各位了。

github 地址：https://github.com/qq44924588...

在浏览器开始实现它们以前，CSS 新的功能一般须要通过长时间讨论以后，才在W3联盟的规范中定义。 有许多值得一提的 CSS 新功能，可是在本文中，咱们重点介绍能够浏览器的稳定版中进行测试的五个功能：

1. CSS Subgrid (子网格)
2. flex gaps
3. content-visibility 属性
4. contains-intrinsic-size 属性
5. :is 和 :where 伪类

浏览器对这些特性的支持一直在变化，能够经过 Can I Use 来查看支持状况。

1.CSS Subgrid

CSS 网格是一个灵活的布局模块，容许开发人员建立复杂的布局，无需使用JavaScript或使用复杂的 CSS hack。

使用 CSS 网格的语法很简单，以下所示：

.grid-container { display: grid; }

可使用几个特定于网格的属性来设置所需的确切布局。

例如，在上面的示例中，.grid-container的子元素将是网格项，它们将根据使用grid-template-columns和grid-template-rows属性定义的规则进行布局：

.grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 50px 70vh 50px; }

运行结果以下：

可是，若是你也想在网格布局中包括.grid-container的某些（或所有）子孙元素怎么办？ 这就是CSS Subgrid 发挥做用的地方。

能够向网格项目添加如下规则，以使其可以采用其父级的网格轨道（包括名称网格线和区域，即便它也能够定义本身的网格轨道和区域）。

.grid-item { /* 这些规则指定子网格在布局中的位置*/ grid-column: 2 / 4; /* 两列垂直 */ grid-row: 1 / 3; /* 两行水平 */ /* 这些规则属于子网格自己 */ display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }

grid-column和grid-row属性定义了网格项目在网格列或行中的位置。 .grid-item的子元素将造成子网格。 一个网格项目能够跨越多个网格单元。 例如，这里它分布在四个像元上（在上面的示例中grid-column和grid-row的值是任意的）。

如上所见，subgrid 不是独立的CSS属性，而是能够添加到grid-template-columns和grid-template-rows属性的值。 它使.grid-item的子级包含在网格布局中：

子网格已成为网格布局的一部分，而且已定位到咱们想要的确切位置（在第二和第四条垂直网格线之间，以及在第一和第三条水平网格线之间）。

其他的网格项目保持了正常的网格流，第四行也出如今布局的底部。 可是，因为咱们仅使用grid-template-rows属性定义了三行，所以第四行没有预设值，所以仅取其内容的天然高度。 若是咱们要从最后三个网格项目中删除文本，则它们甚至不会显示，由于它们的天然高度为0。

可使用下面的CodePen演示来测试上面的示例。

咱们也能够经过仅采用grid-template-columns或grid-template-rows并为另外一项使用新值来建立一维子网格。

例如，在如下状况下，子网格仅采用主网格的列，但为行建立新规则

.grid-item { display: grid; grid-template-columns: subgrid; grid-template-rows: 200px 400px 200px; }

浏览器支持状况

自2020年8月起，CSS 子网格规范已成为W3C的候选推荐标准。目前，Firefox 71+仅支持该子网格规范，但开源 Web 浏览器 Chromium 也已开始使用它，该浏览器被用做主要浏览器（包括Chrome，Opera， Brave，以及新的Microsoft Edge。

2. Flexbox gaps

长期以来，在 felx 布局中的行或列之间添加间隙一直是一个难题。 一般能够经过在 flex 项目中添加 margin 来解决问题，可是margin的问题在于，它们也会被添加到每一个行或列的开头和结尾。 即便能够经过 CSS 来解决这些缺陷，但这也不是最理想的解决方案。

目前，浏览器对flexbox gap 的支持愈来愈好。 gap，row-gap 和column-gap 属性存在于不一样的上下文中，具备不一样级别的浏览器支持。 咱们能够在如下布局模块中使用gap属性。

• 声明 display: flex; 的模块
• 声明 display: grid; 的模块
• 多列布局，由column-count或column-width属性定义

在flexbox上下文中，咱们能够这里声明 flex 项目以前的间距：

.flex-container { row-gap: 10px; column-gap: 15px; }

gap属性是row-gap和column-gap的简写。 若是将它与两个值一块儿使用，则第一个表示row-gap，第二个表示column-gap。

.flex-container { gap: 10px 15px; }

若是仅使用一个值，则row-gap和column-gap将采用相同的值。

.flex-container { gap: 10px; }

浏览器支持状况

Edge 84+，Firefox 63+，Chrome 84+和Opera 70+当前支持 gap属性。 Internet Explorer 和 Safari 目前还不支持它。

3. content-visibility 属性

在Chromium 85中，content-visibility属性多是在提升页面加载性能方面最具影响力的新CSS属性之一。由于content-visibility可跳过不在屏幕上的内容渲染，包括布局和渲染，直到真正须要布局渲染的时候为止。因此利用它可使初始用户加载速度更快，还能与屏幕上的内容进行更快的交互。

它有三个值：

• visible — 元素渲染正常进行
• hidden— 跳过元素渲染时，不管是在屏幕外仍是在屏幕上
• auto — 当元素在屏幕外时，将跳过其渲染； 当它出如今屏幕上时，将自动渲染

能够简单地将content-visibility属性添加到咱们但愿更改其渲染过程的元素中。

article { content-visibility: auto; }

一个具备content-visibility: auto属性的元素能够得到布局、样式和绘制的限制（区域）。若是该元素不在屏幕上（而且与用户无关，则相关元素将是在其子树中具备焦点或已选择的元素），它也会得到大小限制（containment）(而且中止绘制和对其内容进行命中测试)。

这意味着什么呢？简而言之，若是元素不在屏幕上，这不会渲染其后代。浏览器在不考虑元素任何内容的状况下肯定元素的大小，在此处则跳过大多数渲染（例如元素子树的样式和布局）。

当元素接近视口时，浏览器再也不增长大小限制，而是开始绘制并命中测试元素的内容。这使得渲染工做可以及时被用户看到。

浏览器支持

content-visibility依赖于CSS Containement Spec中的原语（primitives）。虽然截止到目前只有Chromium 85中支持content-visibility属性（and deemed "worth prototyping" for Firefox），可是大多数现代浏览器均支持Containement Spec。

contain-intrinsic-size 属性

contains-intrinsic-size属性定义激活大小限制的元素的显式宽度和高度，这意味着元素的大小不受子元素大小的影响。 设置明确的宽度和高度旨在防止这些元素在某些状况下崩溃为零

为了实现content-visibility的潜在好处，浏览器须要应用大小限制，以确保内容的呈现结果不会被任何方式影响元素的大小。 若是元素没有在常规块布局中指定的高度，则其高度为0。

这可能不是理想的，由于滚动条的大小会发生变化，这取决于每一个具备非零高度的内容。

因此， CSS 提供了另外一个属性contains-intrinsic-size，若是元素受大小限制影响，它能够有效地指定元素的天然大小。

article { content-visibility: auto; contain-intrinsic-size: 700px 1000px; }

浏览器支持

目前Chrome 83+，和支持contains-intrinsic-size`属性， Firefox不支持。

5.:is 和 :where 伪类

:is() CSS 伪类 函数将选择器列表做为参数，并选择该列表中任意一个选择器能够选择的元素。这对于以更紧凑的形式编写大型选择器很是有用。

:where() CSS 伪类函数接受选择器列表做为它的参数，将会选择全部能被该选择器列表中任何一条规则选中的元素。

:where() 和 :is() 的不一样之处在于，:where() 的优先级老是为 0 ，可是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。

例如，有如下选择器列表:

.my-class p em, .my-class li em, .my-class section em { // CSS rules }

若是要保持较高的优先级，以使其更难以用后续声明覆盖所属规则，则可使用:is()缩短列表。

.my-class :is(p, li, section) em { // CSS rules }

若是咱们但愿将优先级保持为0以方便重写所属规则，那么可使用:where()：

.my-class :where(p, li, section) em { // CSS rules }

在上面的示例中，.my-class em选择器将覆盖:where规则，但不会覆盖:is。

浏览器支持

:is伪类目前被Firefox 78+和Safari 14+支持。基于 Chrome 的浏览器(Chrome 15+、Edge 79+、Opera 15+)使用:-webkit-any()前缀支持其前缀语法。你也能够经过设置试验性的网络平台特性标志来启用该功能:在Chrome 68+、Opera 55+和Edge 79+中选中。

:where伪类的支持较少。 目前，只有Firefox 78+支持它。

总结

目前， 目前还须要谨慎使用本文讨论的CSS新功能。 理想状况下，使用带前缀的版本，或者等到它们获得更普遍的实行。

可是，若是你想进行测试，则可使用content-visibility和contains-intrinsic-size属性。 你能够在已经支持该功能的浏览器中实现性能上的优化（可使用@supports规则测试浏览器支持），而且不会影响尚不支持该功能的浏览器。

总而言之，CSS新特性的标准化和实现过程值得咱们不断关注。有许多有用的功能将最终使前端开发更容易和更快。

---

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://blog.logrocket.com/5-...

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。