你现在可以玩下这 5 个 CSS 新功能

旧城等待， 2022-12-20 11:23 117阅读 0赞

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

> **点赞再看，养成习惯**
> 
> **本文 `GitHub` [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。**

**最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。**

github 地址：[https://github.com/qq449245884/vue-okr-tree][https_github.com_qq449245884_vue-okr-tree]

在浏览器开始实现它们之前，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;
    }

运行结果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70_pic_center]

但是，如果你也想在网格布局中包括`.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`的子级包含在网格布局中：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70_pic_center 1]

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

其余的网格项目保持了正常的网格流，第四行也出现在布局的底部。 但是，由于我们仅使用`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 [子网格规范][Link 1]已成为W3C的候选推荐标准。目前，[Firefox 71+][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-new-css-features-you-can-already-test/

## 交流 ##

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

[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi
[https_github.com_qq449245884_vue-okr-tree]: https://github.com/qq449245884/vue-okr-tree
[Can I Use]: https://caniuse.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/d3e8e98e73f24267b25c33dc9f1937b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/2020111208200440.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0,size_16,color_FFFFFF,t_70#pic_center
[CodePen]: https://codepen.io/amonus/pen/dyMgeLP
[Link 1]: https://www.w3.org/TR/css-grid-2/
[Firefox 71]: https://caniuse.com/css-subgrid
[CSS Containement Spec]: http://drafts.csswg.org/css-contain/
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi