当前位置： 首页 > 热点 > >正文

Google I/O 2023：最新 CSS 特性解读！

来源：前端充电宝    时间：2023-05-16 10:39:54

当今的前端开发正呈现出越来越多的特性，新的 CSS 特性也随之不断涌现。在近日的 2023 Google I/O 大会上，有很多新的 CSS 特性被介绍，让我们一起来看看这些最新的功能吧！

以下是最近推出或即将推出的 20 个最令人兴奋的 CSS 功能：

容器查询样式查询:has()nth-oftext-wrap: balanceinitial-letter动态视口单位广色域颜色空间color-mix()嵌套级联层作用域样式三角函数单个变换属性popover定位锚点selectmenu离散属性过渡滚动驱动的动画View transitions新的响应式容器查询

浏览器支持：

容器查询最近在所有现代浏览器中已经稳定。它允许查询父元素的大小和样式，以确定应应用于其任何子元素的样式。媒体查询只能访问和利用视口的信息，它是一种更精确的工具，可以支持任意数量的布局或嵌套布局。

在下面的收件箱示例中，主收件箱和收藏夹侧边栏都是容器。它们内部的电子邮件根据可用空间调整其网格布局，并根据需要显示或隐藏电子邮件时间戳。

因为有了容器查询，这些组件的样式都是动态的。 如果调整页面大小和布局，组件将响应它们单独分配的空间。 侧边栏变成了一个有更多空间的顶部栏，布局看起来更像主收件箱。当空间较少时，它们都以紧凑的格式显示。

样式查询

浏览器支持：

容器查询规范还允许查询父容器的样式。这目前在 Chrome 111 中部分实现，可以在其中使用 CSS 自定义属性来应用容器样式。以下示例使用存储在自定义属性值中的天气特征（例如下雨、晴天和多云）来设置卡片背景和指示器图标的样式。

@container style(--sunny: true) {  .weather-card {    background: linear-gradient(-30deg, yellow, orange);  }  .weather-card:after {    content: url();    background: gold;  }}

这只是样式查询的开始。将来，将使用布尔查询来确定自定义属性值是否存在并减少代码重复，目前正在讨论的是范围查询，以根据值的范围应用样式。这样就可以使用下雨或云层覆盖几率的百分比值来应用此处显示的样式。

:has()

浏览器支持：

:has()选择器是现代浏览器中最强大的新 CSS 功能之一。 使用:has()可以通过检查父元素是否包含特定子元素或这些子元素是否处于特定状态来应用样式，也就是父选择器。

在容器查询示例的基础上，可以使用:has()使组件更加动态。 其中，带有“⭐️”元素的项目会应用灰色背景，而带有选中复选框的项目会应用蓝色背景。

此 API 不限于父级选择，还可以为父级中的任何子级设置样式。 例如，当项目具有 ⭐️ 元素时，标题为粗体。 这是通过.item:has(.star) .title完成的。 使用:has()选择器可以访问父元素、子元素，甚至兄弟元素，这使它成为一个非常灵活的 API。

nth-of

浏览器支持：

Web 平台现在有更高级的第 n 个子元素选择。 高级 nth-child 语法提供了一个新关键字（“of”），它允许使用现有的 An+B 语法，并在其中搜索更具体的子集。

如果使用常规的 nth-child，例如:nth-child(2)在特殊类上，浏览器将选择应用了特殊类的元素，也是第二个子元素。 这与:nth-child(2 of .special)形成对比，后者将首先预过滤所有.special元素，然后从该列表中选择第二个。

:nth-child(2 of .highlight) { outline: 0.3rem dashed hotpink; outline-offset: 0.7rem;}
text-wrap: balance

从 Chrome 114 开始，可以使用text-wrap属性并设置balance值，对标题使用文字自动换行平衡技术实现排版。

为了平衡文本，浏览器有效地对最小宽度执行二进制搜索，这不会导致任何额外的行，在一个 CSS 像素（不是显示像素）处停止。 为了进一步减少二进制搜索中的步骤，浏览器从平均线宽的 80% 开始。

initial-letter

initial-letter属性可以更好地控制内嵌首字下沉样式。可以在:first-letter伪元素上使用initial-letter指定以下内容：基于字母占据的行数，来指定字母的大小。字母的块偏移量或“下沉”，来指定字母所在位置。

动态视口单位

浏览器支持：

Web开发人员面临的一个常见问题是在移动设备上实现准确和一致的全视口大小。作为开发者，希望100vh（视口高度的100％）指的是“与视口一样高”，但vh单位无法考虑到移动设备上缩回的导航栏之类的因素，因此有时它会太长并导致页面滚动。

为了解决这个问题，现在Web平台上有新的单位值，包括：

小视口高度和宽度（svh和svw），表示最小活动视口大小。大视口高度和宽度（lvh和lvw），表示最大活动视口大小。动态视口高度和宽度（dvh和dvw）。

当额外的动态浏览器工具栏（例如顶部地址或底部选项卡栏）可见或不可见时，动态视口单位的值会发生变化。

广色域颜色空间

Web 平台的另一个重要新增功能是广色域色彩空间。 在 Web 平台上提供广色域颜色之前，可以拍出色彩鲜艳的照片，可以在现代设备上查看，但无法获得按钮、文本颜色或背景来匹配这些鲜艳的值。

现在在 Web 平台上有一系列新的颜色空间，包括 REC2020、P3、XYZ、LAB、OKLAB、LCH和OKLCH。

可以在 DevTools 中看到颜色范围是如何扩展的，那条白线标示出 sRGB 范围的结束位置和广色域颜色范围的开始位置。

color-mix()

浏览器支持：

color-mix()函数支持混合两个颜色值，基于颜色通道创建新值。混合颜色的颜色空间会影响结果。在更感知的颜色空间（如oklch）中工作时，将经过与sRGB等不同的颜色范围。

color-mix(in srgb, blue, white);color-mix(in srgb-linear, blue, white);color-mix(in lch, blue, white);color-mix(in oklch, blue, white);color-mix(in lab, blue, white);color-mix(in oklab, blue, white);color-mix(in xyz, blue, white);

color-mix()函数提供了一个备受期待的功能：在保留不透明颜色值的同时，添加一些透明度。现在，可以在不同的不透明度下使用品牌颜色变量创建这些颜色的变体。方法是将颜色与透明混合。当将品牌颜色蓝色与10%透明度混合时，会得到一个90%不透明的品牌颜色。

现在可以在 Chrome DevTools 中看到这一点，在样式窗格中有一个非常漂亮的预览维恩图图标。

CSS基础CSS 嵌套

浏览器支持：

CSS嵌套是Sass中很受欢迎的功能，也是多年来CSS开发人员最重要的需求之一，现在终于出现在 Web 平台上。嵌套允许开发人员以更简洁、分组的格式编写代码，减少冗余。

.card {}.card:hover {}/* 嵌套 */.card {  &:hover {      }}

我们还可以嵌套媒体查询，这也意味着可以嵌套容器查询。在下面的示例中，如果卡片容器足够宽度，卡片将从纵向布局更改为横向布局：

.card {  display: grid;  gap: 1rem;  @container (width >= 480px) {    display: flex;  }}

当容器有更多（或等于）480px 的可用行内空间时，就会发生对 flex 的布局调整。 当条件满足时，浏览器将简单地应用新的显示样式。

级联层

浏览器支持：

开发人员另一个痛点是确保样式胜过其他样式的一致性，解决这个问题的一个部分是更好地控制 CSS 级联。级联层通过让用户控制哪些层比其他层具有更高的优先级来解决这个问题，这意味着可以更好地控制何时应用样式。

作用域

浏览器支持：

CSS 作用域样式允许开发人员指定应用特定样式的边界，本质上是在 CSS 中创建原生命名空间。 以前，开发人员依靠第 3 方脚本来重命名类，或特定的命名约定来防止样式冲突，但很快，可以使用@scope。

这里将.title元素限定为.card。 这将防止该 title 元素与页面上的任何其他.title元素发生冲突，例如博客文章标题或其他标题。

@scope (.card) {  .title {     font-weight: bold;  }}
三角函数

浏览器支持：

CSS的另一个新功能是将三角函数添加到现有的CSS数学函数中。这些函数现在在所有现代浏览器中都是稳定的，并使您能够在Web平台上创建更有机的布局。一个很好的例子是这个径向菜单布局，现在可以使用sin()和cos()函数进行设计和动画。

在下面的示例中，点围绕中心点旋转。每个点不是围绕其自身的中心旋转然后向外移动，而是在 X 和 Y 轴上平移。 X 轴和 Y 轴上的距离分别通过考虑--angle的cos()和sin()来确定。

、

单个变换属性

过去，需要依赖变换函数来应用子函数来缩放、旋转和平移 UI 元素。这涉及大量重复工作，并且在动画中的不同时间应用多个变换时尤其令人沮丧。

.target {  transform: translateX(50%) rotate(30deg) scale(1.2);}.target:hover {  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */}

现在，可以通过分离变换类型并单独应用它们来在 CSS 动画中拥有所有这些细节。

.target {  translate: 50% 0;  rotate: 30deg;  scale: 1.2;}.target:hover {  scale: 2;}

这样，平移、旋转或缩放的变化可以在动画期间的不同时间以不同的变化率同时发生。

可定制的组件

为了确保通过 Web 平台解决一些关键的开发人员需求，正在与 OpenUI 社区小组合作，并确定了三个解决方案：

具有事件处理程序、声明性DOM结构和可访问默认值的内置弹出功能。用于将两个元素连接在一起以启用锚定定位的CSS API。可自定义下拉菜单组件，用于想要在选择框内部样式化内容的情况。Popover

popover API 为元素提供了一些内置的浏览器支持，例如：

支持顶层，因此不必管理 z-index。 当打开弹出窗或对话框时，将该元素提升到页面顶部的特殊层。当在元素外部单击时，弹出窗口将被关闭，从可访问性树中删除，并正确管理焦点。

这一切意味着可以编写更少的 JavaScript 来创建所有这些功能并跟踪所有这些状态。

popover 的 DOM 结构是声明性的，可以像给popover元素一个id和popover属性一样清晰地编写。 然后，将该id同步到将打开弹出窗的元素，例如具有popovertarget属性的按钮：

  
        

                          
X 关闭

        


        


          

            
推荐内容

            
            

            
最近更新

            

              

            


          


        



        
        

             
Copyright ©  2015-2022 热讯办公网版权所有  备案号：豫ICP备20005723号-6   联系邮箱：29 59 11 57 8@qq.com