5个可以尝试的 CSS 新特性【译】

原文链接： https://blog.logrocket.com/5-...
注：该翻译文章是自己的理解，并没有完全逐字翻译

通常 CSS3 的新特性在经过长时间的讨论之后，才会被加入到 W3C 规范当中，之后各浏览器才开始逐渐去进行支持。有很多新的 CSS 特性值得我们讨论，但是本文我们会聚焦5个新特性，这些特性已经至少有一个浏览器开始支持了:

CSS subgrid
Flexbox gaps
content-visibility
contain-intrinsic-size
:is 和 :where 伪类

浏览器对这些新特性的支持总是在变化，所以可以随时在类似 Can I Use，MDN CSS Reference，Chrome Platform Status查看当前特性支持的程度。

1. CSS subgrid

CSS Grid 是一个弹性布局模块。它能够让开发者创建复杂的布局而不用依赖于 Javascript 或者一些 CSS 小技巧。

在 HTML 元素上使用 grid 布局，可以添加如下的css规则。

.grid-container {
    display: grid;
}

有一系列的属性可以用于设置我们想要的效果。

例如，上面的例子当中，.grid-container 的子元素将会被视作 grid 中的项(grid items)。它们将会按照你所定义的 grid-template-columns 和 grid-tmeplate-rows 属性来呈现。

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 
}

上面的代码定义了如下的布局效果：

但是，如果你想要在 grid 布局中包含 .grid-container grid布局的嵌套子孙元素呢？这就是 CSS subgrid 所要解决的问题。

你可以在 grid item 中添加如下的 CSS 样式规则，使之能够采用父元素的网格轨道(grid tracks)。

grid tracks 可以理解为通过 grid 布局呈现出来的网格轨道。就像泳池中间的线把泳池分隔成一道道的泳道一样。两条网线 grid line 之间就形成了 grid track。

.grid-item {
    /* 指定了在父网格中的位置 */
    grid-column: 2 / 4;      /* 占据两列，位于第2、4两条网线之间 */
    grid-row: 1 / 3;         /* 占据行，位于第1、3两条网线之间 */
    /* 指定 subgrid 的布局样式 */
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

grid-column，grid-row 属性定义了grid item 的位置。.grid-item 的子元素将形成 subgrid。一个 grid item 可以跨多个网格。比如上面的示例中就占据了四个网格。

正如我们所见，subgid 并不是一个独立的 css 属性，而是可以添加到grid-template-columns 和 grid-template-rows中的值，使得.grid-item的子元素包含在 grid 布局中。

剩余的网格项保持正常的网格流布局，并且第四行依然在最底部出现。然而，尽管我们通过grid-template-rows只定义了3行。第四行没有预设的值，所以它保持了内容的自然高度。如果我们把最后3个网格项的内容删掉，它们都不会显示出来，因为他们的高度为0。

2. Flexbox gaps

在弹性布局中，在列或者行中间添加间隙在过去的很长一段时间里一直是一个比较困难的事情。通常的一个解决方式是给每一项添加外边距，但是问题是添加外边距通常也会给开始和结束行和列添加。尽管可以通过设置负的边距来满足需求，但这并不优雅。

幸运的是，浏览器对弹性盒布局的间隙越来越好了。gap，row-gap，column-gap 在浏览器中有不同程度的支持。你可以在以下的布局模式中使用 gap 属性。

Flexbox, 通过 display: flex;进行声明
CSS grid, 通过 display: grid;进行声明
Multicolumn (multicol)布局, 通过 column-count 和 column-width进行声明

你可以在 CSS Box Alignment Module (level 3) 进行相应的查看。

在使用gap，row-gap，column-gap属性时，你可以使用任何的长度单位（px, em, rem, cm, mm, vmin, vmax, 百分比等等）

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

<** 简写 **>
.flex-container {
  gap: 10px 15px;
}

3. content-visibility属性

content-visibility 属性可以控制离屏元素的渲染进程以及显示隐藏。这可以很大程度提高页面渲染的性能。

它有三个属性值：

visible (默认值) 正常的渲染
hidden 不渲染
auto 离屏的不渲染

给想要改变渲染方式的元素添加 content-visibility

article {
  content-visibility: auto;
}

你可以通过这篇文章来了解详细的内容。

4. contain-intrinsic-size 属性

contain-intrinsic-size 属性定义了元素准确的宽高，也就是说元素的大小不受子元素的影响。设置明确的宽高目的是为了防止在某些特定的情况下高度塌陷的问题。

例如，当我们在设定 content-visibility 的时候，通常需要设置contain-intrinsic-size，因为元素在离屏的时候会被渲染成空元素，所以宽高为0。这就会导致在这些元素在进入视口的时候，渲染出来，导致页面跳动的情况。

默认值为 none，也能够设置为任何的长度值(px, rem, em, cm, mm, etc.) 你也可以设置为一个或者两个值。设置一个值的时候，固有的宽高是设定的同一个值。设置两个值的时候，第一个表示宽度，第二个表示高度。

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

5. :is() 和 :where() 伪类

:is() 和 :where() 伪类在Selectors Level 4 定义，可以在比较长的CSS选择器列表中，减少重复的 CSS 选择器。它可以用于在重复的选择器中标识一个唯一的项，以便你能够只写一次，而不用重复写多次选择器。

这两个伪类功能基本一致。唯一的不同是:where()中的样式会被覆盖，而:is()不会。

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

可以简化如下：

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

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

上例中，.my-class em将会覆盖 :where() 中的样式。