5个你已经可以尝试的css新特性

本篇 文章 给大家介绍一下5 个 CSS 新特性。 有一定的参考价值 ， 有需要的朋友可以参考一下 ， 希望对大家有所帮助 。

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

CSS S ub grid (子网格)

flex gaps

content-visibil IT y 属性

cont ai ns -i ntrinsic -s ize 属性

:is 和 :where 伪类

浏览器对这些特性的支持一直在变化，可以通过 Can I Use 来查看支持情况。

1、CSS Subgrid

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

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

.grid-container {
    dis play : grid;
}

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

例如，在上面的示例中， .grid-container 的子元素将是网格项，它们将根据使用 grid -t emplate-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 。

可以使用下面的Code PE n演示来测试上面的示例。

https://codepen.io/ am onus/pen/dyMgeLP

我们也可以通过仅采用 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 也已开始使用它，该浏览器被用作主要浏览器（包括Ch rom e， opera ， br ave，以及新的Microsoft Edge 。

2、 flexbox gaps

长期以来，在 felx 布局中的 行 或 列 之间添加间隙一直是一个难题。 通常可以通过在 flex 项目中添加 m arg in 来解决问题，但是 mar gin 的问题在于，它们也会被添加到每个 行 或 列 的开头和结尾。 即使可以通过 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+ ， C hr ome 84+ 和 Opera 70+ 当前支持 gap 属性。 internet E xp lorer 和 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中的原语（ PR imitives）。虽然截止到目前只有Chromium 85中支持 content-visibility 属性（and deemed "worth prototyping" for Firefox），但是大多数现代浏览器均支持Containement Spec。

4、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新特性的标准化和实现过程值得我们 不断 关注。有许多有用的功能将最终使前端开发更容易和更快。

英文原文地址：https:// blog . LOG rocket .COM /5-new-css-features-you-can-already- test /

作者： Anna Monus

译文地址：https://segmentfault测试数据/a/1190000040031049

更多编程相关知识，请访问：编程视频！！

以上就是5个你已经可以尝试的css新特性的详细内容，更多请关注其它相关文章！

总结

以上是 为你收集整理的 5个你已经可以尝试的css新特性 全部内容，希望文章能够帮你解决 5个你已经可以尝试的css新特性 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于5个你已经可以尝试的css新特性的详细内容...