1. 首页

你现在、即刻可以玩下这 5 个 CSS 新功能

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

点赞再看,养成习惯

本文 GitHub https://github.com/qq44924588… 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】。

最近开源了一个 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 网格的语法很简单,如下所示:

 /* Js中文网 - 全球前端挚爱的技术成长平台 https://www.javascriptc.com/ */

.grid-container {
    display: grid;
}

可以使用几个特定于网格的属性来设置所需的确切布局。

例如,在上面的示例中,.grid-container的子元素将是网格项,它们将根据使用grid-template-columnsgrid-template-rows属性定义的规则进行布局:

 /* Js中文网 - 全球前端挚爱的技术成长平台 https://www.javascriptc.com/ */

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

运行结果如下:

前端中文网

但是,如果你也想在网格布局中包括.grid-container的某些(或全部)子孙元素怎么办? 这就是CSS Subgrid 发挥作用的地方。

可以向网格项目添加以下规则,以使其能够采用其父级的网格轨道(包括名称网格线和区域,即使它也可以定义自己的网格轨道和区域)。

 /* Js中文网 - 全球前端挚爱的技术成长平台 https://www.javascriptc.com/ */

.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并为另一项使用新值来创建一维子网格。

例如,在以下情况下,子网格仅采用主网格的列,但为行创建新规则

 /* Js中文网 - 全球前端挚爱的技术成长平台 https://www.javascriptc.com/ */

.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 项目之前的间距:

 /* Js中文网 - 全球前端挚爱的技术成长平台 https://www.javascriptc.com/ */

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

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

 /* Js中文网 - 全球前端挚爱的技术成长平台 https://www.javascriptc.com/ */

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

如果仅使用一个值,则row-gapcolumn-gap将采用相同的值。

 /* Js中文网 - 全球前端挚爱的技术成长平台 https://www.javascriptc.com/ */

.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属性添加到我们希望更改其渲染过程的元素中。

 /* Js中文网 - 全球前端挚爱的技术成长平台 https://www.javascriptc.com/ */

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,如果元素受大小限制影响,它可以有效地指定元素的自然大小。

 /* Js中文网 - 全球前端挚爱的技术成长平台 https://www.javascriptc.com/ */

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() 的优先级是由它的选择器列表中优先级最高的选择器决定的。

例如,有以下选择器列表:

 /* Js中文网 - 全球前端挚爱的技术成长平台 https://www.javascriptc.com/ */

.my-class p em,
.my-class li em,
.my-class section em {
    // CSS rules
}

如果要保持较高的优先级,以使其更难以用后续声明覆盖所属规则,则可以使用:is()缩短列表。

 /* Js中文网 - 全球前端挚爱的技术成长平台 https://www.javascriptc.com/ */

.my-class :is(p, li, section) em {
  // CSS rules
}

如果我们希望将优先级保持为0以方便重写所属规则,那么可以使用:where()

 /* Js中文网 - 全球前端挚爱的技术成长平台 https://www.javascriptc.com/ */

.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新特性的标准化和实现过程值得我们不断关注。有许多有用的功能将最终使前端开发更容易和更快。


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

作者:前端小智
链接:https://segmentfault.com/a/1190000037493676

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:你现在、即刻可以玩下这 5 个 CSS 新功能

链接:https://www.javascriptc.com/4797.html

« 别光知道用console.log调试了,快来试试这些高效的调试方法!
为开源项目做贡献的10个步骤»
Flutter 中文教程资源

相关推荐

QR code