乐趣区

关于css:5-个-CSS-新功能

作者:Anna Monus
译者:前端小智
起源:blog.logrocket

点赞再看 ,微信搜寻【大迁世界】,B 站关注【前端小智】 这个没有大厂背景,但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录,文章的已分类,也整顿了很多我的文档,和教程材料。

最近开源了一个 Vue 组件,还不够欠缺,欢送大家来一起欠缺它,也心愿大家能给个 star 反对一下,谢谢各位了。

github 地址:https://github.com/qq44924588…

在浏览器开始实现它们之前,CSS 新的性能通常须要通过长时间探讨之后,才在 W3 联盟的标准中定义。有许多值得一提的 CSS 新性能,然而在本文中,咱们重点介绍能够浏览器的稳定版中进行测试的五个性能:

  1. CSS Subgrid (子网格)
  2. flex gaps
  3. content-visibility 属性
  4. contains-intrinsic-size 属性
  5. :is:where 伪类

浏览器对这些个性的反对始终在变动,能够通过 Can I Use 来查看反对状况。

1.CSS Subgrid

CSS 网格是一个灵便的布局模块,容许开发人员创立简单的布局,无需应用 JavaScript 或应用简单的 CSS hack

应用 CSS 网格的语法很简略,如下所示:

.grid-container {display: grid;}

能够应用几个特定于网格的属性来设置所需的确切布局。

例如,在下面的示例中,.grid-container的子元素将是网格项,它们将依据应用 grid-template-columnsgrid-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-columngrid-row 属性定义了网格我的项目在网格列或行中的地位。.grid-item的子元素将造成子网格。一个网格我的项目能够逾越多个网格单元。例如,这里它散布在四个像元上(在下面的示例中 grid-columngrid-row的值是任意的)。

如上所见,subgrid 不是独立的 CSS 属性,而是能够增加到 grid-template-columnsgrid-template-rows属性的值。它使 .grid-item 的子级蕴含在网格布局中:

子网格已成为网格布局的一部分,并且已定位到咱们想要的确切地位(在第二和第四条垂直网格线之间,以及在第一和第三条程度网格线之间)。

其余的网格我的项目放弃了失常的网格流,第四行也呈现在布局的底部。然而,因为咱们仅应用 grid-template-rows 属性定义了三行,因而第四行没有预设值,因而仅取其内容的天然高度。如果咱们要从最初三个网格我的项目中删除文本,则它们甚至不会显示,因为它们的天然高度为0

能够应用上面的 CodePen 演示来测试下面的示例。

咱们也能够通过仅采纳 grid-template-columnsgrid-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 的反对越来越好。gaprow-gapcolumn-gap 属性存在于不同的上下文中,具备不同级别的浏览器反对。咱们能够在以下布局模块中应用gap 属性。

  • 申明 display: flex; 的模块
  • 申明 display: grid; 的模块
  • 多列布局,由 column-countcolumn-width属性定义

flexbox 上下文中,咱们能够这里申明 flex 我的项目之前的间距:

.flex-container {
  row-gap: 10px;
  column-gap: 15px;
}

gap属性是 row-gapcolumn-gap的简写。如果将它与两个值一起应用,则第一个示意row-gap,第二个示意column-gap

.flex-container {gap: 10px 15px;}

如果仅应用一个值,则 row-gapcolumn-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。

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-visibilitycontains-intrinsic-size属性。你能够在曾经反对该性能的浏览器中实现性能上的优化(能够应用 @supports 规定测试浏览器反对),并且不会影响尚不反对该性能的浏览器。

总而言之,CSS 新个性的标准化和实现过程值得咱们一直关注。有许多有用的性能将最终使前端开发更容易和更快。


代码部署后可能存在的 BUG 没法实时晓得,预先为了解决这些 BUG,花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文:https://blog.logrocket.com/5-…

交换

文章每周继续更新,能够微信搜寻「大迁世界」第一工夫浏览和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录,整顿了很多我的文档,欢送 Star 和欠缺,大家面试能够参照考点温习,另外关注公众号,后盾回复 福利,即可看到福利,你懂的。

退出移动版