你现在可以玩下这 5 个 CSS 新功能在浏览器开始实现它们之前

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

CSS Subgrid (子网格)
flex gaps
content-visibility 属性
contains-intrinsic-size 属性
:is 和 :where 伪类

浏览器对这些特性的支持一直在变化，可以通过 Can I Use 来查看支持情况。
1.CSS SubgridCSS 网格是一个灵活的布局模块，允许开发人员创建复杂的布局，无需使用JavaScript或使用复杂的 CSS hack 。
使用 CSS 网格的语法很简单，如下所示：
.grid-container {display: grid;}可以使用几个特定于网格的属性来设置所需的确切布局。
例如，在上面的示例中， .grid-container的子元素将是网格项，它们将根据使用grid-template-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 。
可以使用下面的CodePen演示来测试上面的示例。
我们也可以通过仅采用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 也已开始使用它，该浏览器被用作主要浏览器（包括Chrome ， Opera ，Brave ，以及新的Microsoft Edge 。
2. Flexbox gaps长期以来，在 felx 布局中的行或列之间添加间隙一直是一个难题。通常可以通过在 flex 项目中添加 margin 来解决问题，但是margin的问题在于，它们也会被添加到每个行或列的开头和结尾。即使可以通过 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将采用相同的值。