5 new CSS features you can already try

This article introduces 5 new CSS features to you. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

New CSS features often need to be defined in the W3 Consortium's specifications after lengthy discussions before browsers begin to implement them. There are many new CSS features worth mentioning, but in this article, we focus on five features that can be tested in the stable version of the browser:

• CSS Subgrid (subgrid )

• flex gaps

• content-visibility Properties

• ##contains-intrinsic-size Attributes

• :is and :where Pseudo-class

Browser support for these features is constantly changing. You can check the support status through Can I Use.

1. CSS Subgrid

CSS Grid is a flexible layout module that allows developers to create complex layouts without using JavaScript or using complex

CSS hack.

The syntax for using CSS Grid is simple and looks like this:

.grid-container {
    display: grid;
}

There are several grid-specific properties you can use to set the exact layout you want.

For example, in the above example, the child elements of

.grid-container will be grid items and they will be based on the usage of grid-template-columns and grid-template-rows attributes are defined according to the rules for layout:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 50px 70vh 50px;
}

The running results are as follows:

However, if you also want What to do if you include some (or all) descendant elements of

.grid-container in your grid layout? This is where CSS Subgrid comes into play.

The following rules can be added to a grid item to enable it to adopt its parent's grid tracks (including name grid lines and areas, even though it can also define its own grid tracks and areas). The

.grid-item {
    /* 这些规则指定子网格在布局中的位置*/
    grid-column: 2 / 4;      /* 两列垂直 */
    grid-row: 1 / 3;         /* 两行水平 */

    /* 这些规则属于子网格本身 */
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

grid-column and grid-row properties define the position of a grid item within a grid column or row. The child elements of .grid-item will form a subgrid. A grid item can span multiple grid cells. For example, here it is distributed over four cells (the values ​​of grid-column and grid-row are arbitrary in the example above).

As you can see above,

subgrid is not a standalone CSS property, but can be added to grid-template-columns and grid-template-rowsThe value of the attribute. It makes the children of .grid-item included in the grid layout:

The child grid has become part of the grid layout and has Position it exactly where we want it (between the second and fourth vertical grid lines, and between the first and third horizontal grid lines).

The rest of the grid items maintain the normal grid flow, and the fourth row also appears at the bottom of the layout. However, since we only have three rows defined using the

grid-template-rows property, the fourth row has no preset value and therefore simply takes the natural height of its content. If we were to remove the text from the last three grid items, they wouldn't even display since their natural height is 0.

You can use the CodePen demo below to test the above example.

https://codepen.io/amonus/pen/dyMgeLP

We can also do this by just taking

grid-template-columns or grid -template-rows and create a 1D subgrid with new values ​​for another item.

For example, in the following case, the subgrid only takes the columns of the main grid, but creates new rules for the rows

.grid-item {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 200px 400px 200px;
}

Browser support

Since August 2020, the CSS Subgrid specification has become a candidate recommendation standard of W3C. Currently, Firefox 71 only supports this subgrid specification, but it has also started to be used by the open source web browser Chromium, which is used as the main browser (including Chrome, Opera, Brave, and the new Microsoft Edge.

2. Flexbox gaps

It has long been a problem to add gaps between

rows or columns in felx layouts . You can usually solve the problem by adding margin to the flex item, but the problem with margin is that they are also added to every row or The beginning and end of the column . Even if these deficiencies can be solved through CSS, this is not the most ideal solution.

Currently, browser support for flexbox

gap Getting better. The gap, row-gap and column-gap properties exist in different contexts with different levels of browser support. We can Use the gap attribute in the following layout module.

• 声明 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+，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。

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.logrocket.com/5-new-css-features-you-can-already-test/

作者： Anna Monus

译文地址：https://segmentfault.com/a/1190000040031049

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

The above is the detailed content of 5 new CSS features you can already try. For more information, please follow other related articles on the PHP Chinese website!