作者：AnnaMonus译者：前端小智来源：blog.logrocket微信搜索【伟大的走向世界】，我将与大家分享前端行业趋势、学习路径等作为尽快。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。新的CSS功能通常在浏览器开始实施之前经过长时间的讨论后在W3联盟规范中定义。有许多新的CSS特性值得一提，但在本文中，我们重点介绍五个可以在稳定版浏览器中测试的特性：CSS子网格（subgrid）flexgapscontent-visibilitypropertycontains-intrinsic-sizeproperty:is和:where伪类浏览器对这些特性的支持是不断变化的，你可以通过CanIUse查看支持状态。1.CSSSubgridCSSGrid是一个灵活的布局模块，允许开发人员在不使用JavaScript或使用复杂的CSShack的情况下创建复杂的布局。使用CSSGrid的语法很简单，看起来像这样：例如，在上面的示例中，.grid-container的子项将是网格项，这些项将根据使用grid-template-columns和grid-template-rows属性定义的规则进行布局：显示：网格；网格模板列：1fr2fr1fr；grid-template-rows:50px70vh50px;}结果如下：但是，如果你还想在网格布局中包含部分（或全部）.grid-container的后代元素呢？这就是CSS子网格发挥作用的地方。可以将以下规则添加到网格项以使其能够采用其父项的网格轨道（包括名称网格线和区域，即使它也可以定义自己的网格轨道和区域）。.grid-item{/*这些规则指定子网格在布局中的位置*/grid-column:2/4;/*两个垂直列*/grid-row:1/3;/*两个水平行*//*这些规则属于子网格本身*/display:grid;网格模板列：子网格；网格模板行：子网格；行中的位置。.grid-item的子元素将形成一个子网格。一个网格项可以跨越多个网格单元格。比如这里分布在四个cell上（上面例子中grid-column和grid-row的取值是任意的）。正如你在上面看到的，subgrid不是一个独立的CSS属性，而是一个可以添加到grid-template-columns和grid-template-rows属性的值。它使.grid-item的子项包含在网格布局中：子网格已成为网格布局的一部分，并准确定位在我们想要的位置（在第二条和第四条垂直网格线之间，以及在第一条和第三条水平网格线之间）网格线）。其余的网格项保持正常的网格流，第四行也出现在布局的底部。但是，由于我们使用grid-template-rows属性只定义了三行，因此第四行没有预设值，所以它只是采用其内容的自然高度。如果我们要从最后三个网格项中删除文本，它们甚至不会显示，因为它们的自然高度为0。可以使用下面的CodePen演示来测试上面的示例。我们还可以通过仅采用网格模板列或网格模板行并为另一个使用新值来创建一维子网格。例如，在以下情况下，子网格仅采用主网格的列，但为行创建新规则。网格项目{显示：网格;网格模板列：子网格；grid-template-rows:200px400px200px;}浏览器支持截至2020年8月，CSS子网格规范已成为W3C候选推荐标准。目前，Firefox71+仅支持此子网格规范，但用作主浏览器的开源网络浏览器Chromium（包括Chrome、Opera、Brave和新的MicrosoftEdge）。2.Flexboxgaps添加行与行之间的间隙或felx布局中的列一直是一个问题。通常可以通过为flex项目添加边距来解决问题，但边距的问题在于它们也被添加到每一行或列的开头和结尾。即使这些不足可以通过CSS来解决，并不是最理想的方案，目前浏览器对flexboxgap的支持越来越好，gap、row-gap和column-gap属性存在于不同的上下文中，浏览器的支持程度不同.我们可以在下面的布局模块中使用gap属性声明display的模块:flex;声明display的模块:grid;-width属性定义在flexboxcontext中，我们可以在这里声明flexitems之间的间距:.flex-container{行间距：10px；column-gap:15px;}gap属性是row-gap和column-gap的简写。如果将它与两个值一起使用，第一个表示行间距，第二个表示列间距。.flex-container{gap:10px15px;}如果你只使用一个值，row-gap和column-gap将取相同的值。.flex-container{gap:10px;}浏览器支持Edge84+、Firefox63+、Chrome84+和Opera70+目前支持gap属性。InternetExplorer和Safari目前不支持它。3.content-visibility属性在Chromium85中，content-visibility属性可能是在提高页面加载性能方面影响最大的新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，如果元素受到大小限制，它可以有效地指定元素的自然大小。文章{内容可见性：自动；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{//CSS规则}在上面的示例中，.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新特性的标准化和实现过程值得我们持续关注。有许多有用的功能最终将使前端开发变得更容易和更快。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://blog.logrocket.com/5-...交流有梦想，有干货，微信搜索【大招天下】关注这位凌晨还在洗碗的洗碗智者.本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。
