关于css:5个可以尝试的-CSS-新特性译

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

注：该翻译文章是本人的了解，并没有齐全逐字翻译

通常 CSS3 的新个性在通过长时间的探讨之后，才会被退出到 W3C 标准当中，之后各浏览器才开始逐步去进行反对。有很多新的 CSS 个性值得咱们探讨，然而本文咱们会聚焦 5 个新个性，这些个性曾经至多有一个浏览器开始反对了:

1. CSS subgrid
2. Flexbox gaps
3. content-visibility
4. contain-intrinsic-size
5. :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() 中的款式。