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

.flex-container {gap: 10px;}浏览器支持情况Edge 84+ ， Firefox 63+ ， Chrome 84+和Opera 70+当前支持 gap属性。 Internet Explorer 和 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中的原语（primitives）。虽然截止到目前只有Chromium 85中支持content-visibility属性（and deemed "worth prototyping" for Firefox），但是大多数现代浏览器均支持Containement Spec 。
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规则测试浏览器支持），并且不会影响尚不支持该功能的浏览器。