在浏览器开始实现它们之前，新的CSS特性通常经过长时间的讨论后在W3联盟规范中定义。有许多新的CSS特性值得一提，但在本文中，我们重点介绍五个可以在稳定版浏览器中测试的特性：CSS子网格（subgrid）flexgapscontent-visibilitypropertycontains-intrinsic-size属性：is和:wherePseudo-classes浏览器对这些功能的支持一直在变化，请参阅我可以使用以查看支持。1.CSSSubgridCSSGrid是一个灵活的布局模块，允许开发人员在不使用JavaScript或使用复杂的CSShack的情况下创建复杂的布局。使用CSSGrid的语法很简单，如下所示：.grid-container{display:grid;}几个特定于网格的属性可用于设置您想要的确切布局。例如，在上面的示例中，.grid-container的子项将是网格项，这些项将根据使用grid-template-columns和grid-template-rows属性定义的规则进行布局：display:grid;grid-template-columns:1fr2fr1fr;grid-template-rows:50px70vh50px;}运行结果如下：但是如果你还想包含.grid-container的部分（或全部）后代元素怎么办在网格布局中？这就是CSS子网格发挥作用的地方。可以将以下规则添加到网格项以使其能够采用其父项的网格轨道（包括名称网格线和区域，即使它也可以定义自己的网格轨道和区域）。.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的子元素将形成一个子网格。一个网格项可以跨越多个网格单元格。比如这里分布在四个cell上（上面例子中grid-column和grid-row的取值是任意的）。正如你在上面看到的，subgrid不是一个独立的CSS属性，而是一个可以添加到grid-template-columns和grid-template-rows属性的值。它使.grid-item的子项包含在网格布局中：子网格已成为网格布局的一部分，并精确定位在我们想要的位置（在第二条和第四条垂直网格线之间，以及在第一条和第三水平网格线）。其余的网格项保持正常的网格流，第四行也出现在布局的底部。但是，由于我们使用grid-template-rows属性只定义了三行，因此第四行没有预设值，所以它只是采用其内容的自然高度。如果我们要从最后三个网格项中删除文本，它们甚至不会显示，因为它们的自然高度为0。可以使用下面的CodePen演示来测试上面的示例。我们还可以通过仅采用网格模板列或网格模板行并为另一个使用新值来创建一维子网格。例如，在以下情况下，子网格仅采用主网格的列，但为rows.grid-item{display:grid;grid-template-columns:subgrid;grid-template-rows:200px400px200px创建新规则;}浏览器支持CSSSubgrid规范自2020年8月起成为W3C候选推荐标准。目前，Firefox71+仅支持subgrid规范，但用作主要浏览器的开源Web浏览器Chromium（包括Chrome、Opera,Brave,和新的MicrosoftEdge。2.Flexboxgaps在felx布局中添加行或列之间的间隙一直是个问题。通常可以通过给flex项目添加边距来解决问题，但是边距的问题在于它们也会在每一行或者一列的首末添加，虽然可以通过CSS来弥补这些不足，但并不是最理想的解决方案，目前浏览器对flexboxgaps的支持越来越好。gap、row-gap和column-gap属性存在于不同的上下文中，具有不同级别的浏览器支持。我们可以在以下布局模块中使用gap属性。声明显示：flex；模块声明显示：网格；模块多列布局，由column-count或column-width属性定义在flexbox上下文中，我们可以在这里声明flex项目之间的间距：.flex-container{row-gap:10px;column-gap:15px;}gapattribute是row-gap和column-gap的简写。如果将它与两个值一起使用，第一个表示行间距，第二个表示列间距。.flex-container{gap:10px15px;}如果只使用一个值，row-gap和column-gap将取相同的值。.flex-container{gap:10px;}浏览器支持Edge84+、Firefox63+、Chrome84+和Opera70+目前支持gap属性。InternetExplorer和Safari目前不支持它。3.内容可见性属性在Chromium85中，内容可见性属性可能是在提高页面加载性能方面最具影响力的新CSS属性之一。因为content-visibility可以跳过不在屏幕上的内容渲染，包括布局和渲染，直到真正需要布局渲染。因此，利用它可以让初始用户更快地加载并更快地与屏幕上的内容进行交互。它有三个值：visible——元素正常渲染hidden——跳过元素的渲染，不管是offscreen还是onscreenauto——跳过元素在offscreen时的渲染；当它出现在屏幕上时，只需将content-visibility属性添加到我们想要更改其呈现过程的元素，就会自动呈现。article{content-visibility:auto;}具有content-visibility:auto属性的元素可以获得布局、样式和绘图约束（区域）。如果该元素在屏幕外（并且与用户无关，所讨论的元素将是具有焦点或在其子树中被选中的元素），它还会获得一个大小约束（包含）（并停止绘制和点击其内容测试).这是什么意思？简而言之，如果该元素不在屏幕上，则不会渲染其后代。浏览器决定元素的大小而不考虑元素的任何内容，这里会跳过大部分渲染（例如元素子树的样式和布局）。浏览器不会在元素接近视口时增加大小限制，而是开始绘制和命中测试元素的内容。这样可以让渲染工作及时被用户看到。浏览器对内容可见性的支持依赖于CSSContainmentSpec中的原语。虽然内容可见性属性目前仅在Chromium85中受支持（并且被认为是Firefox的“值得原型设计”），但大多数现代浏览器都支持ContainmentSpec。contains-intrinsic-size属性contains-intrinsic-size属性定义激活大小约束的元素的显式宽度和高度，这意味着元素的大小不受子元素大小的影响。设置明确的宽度和高度是为了防止这些元素在某些情况下折叠为零。如果元素在常规块布局中没有指定高度，则其高度为0。这可能并不理想，因为滚动条的大小会根据每个具有非零高度的内容而改变。因此，CSS提供了另一个属性contains-intrinsic-size，如果元素受到大小限制，它可以有效地指定元素的自然大小。article{content-visibility:auto;contain-intrinsic-size:700px1000px;}浏览器目前支持Chrome83+，支持contains-intrinsic-size`属性，Firefox不支持。5.:is和:where伪类:is()CSS伪类函数以一个选择器列表作为参数，选择列表中任何一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器很有用。:where()CSS伪类函数接受一个选择器列表作为它的参数，并将选择所有可以被选择器列表中的任何规则选择的元素。:where()和:is()的区别在于:where()的优先级始终为0，而??:is()的优先级由其选择器列表中优先级最高的选择器决定。例如，使用以下选择器列表：.my-classpem,.my-classliem,.my-classsectionem{//CSSrules}如果您想保持更高的优先级，以便更难用后续声明覆盖归属规则，您可以使用:is()来缩短列表。.my-class:is(p,li,section)em{//CSSrules}如果我们想保持优先级为0以便于重写归属规则，我们可以使用:where():.my-class:where(p,li,section)em{//CSSrules}在上面的示例中，.my-classem选择器将覆盖:where规则，但不会覆盖:is。浏览器支持：目前Firefox78+和Safari14+支持is伪类。基于Chrome的浏览器（Chrome15+、Edge79+、Opera15+）支持使用:-webkit-any()前缀的前缀语法。您还可以通过设置实验性网络平台功能标志来启用它：在Chrome68+、Opera55+和Edge79+中选中。:where伪类的支持较少。目前只有Firefox78+支持。总结就目前而言，此时需要谨慎使用本文中讨论的新CSS特性。理想情况下，使用带前缀的版本，或者等到它们被更广泛地使用。但是，如果要测试，可以使用content-visibility和contains-intrinsic-size属性。你可以在已经支持该特性的浏览器中实现性能优化（你可以使用@supports规则来测试浏览器支持），它不会影响还不支持该特性的浏览器。总而言之，CSS新特性的标准化和实现过程值得我们持续关注。有许多有用的功能最终将使前端开发变得更容易和更快。作者：AnnaMonus译者：前端小智来源：blog.logrocket原文：https://blog.logrocket.com/5-new-css-features-you-can-already-test/本文转载自微信公众号“盛世行”可通过以下二维码关注。转载本文请联系大千世界公众号。
