CSS新特性有哪些及如何使用

魁首哥

作者

CSS新特性有哪些及如何使用

这篇文章主要介绍“CSS新特性有哪些及如何使用”，在日常操作中，相信很多人在CSS新特性有哪些及如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS新特性有哪些及如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

一、容器查询

1. 基本概念

容器查询使我们能够根据其父元素的大小设置元素的样式，它类似于 @media查询，不同之处在于它根据容器的大小而不是视口的大小进行判断。这一直是响应式设计的一个问题，因为我们有时候希望组件能够适应它的上下文。

2. 使用方法

对于容器查询，需要使用 container 属性（它是 container-type 和 container-name 的缩写）指定一个元素作为容器。container-type 可以是width、height、inline-size、block-size。inline-size 和 block-size 是逻辑属性，根据文档的写入模式，它们可能会产生不同的结果。

main,aside{container:inline-size;}

可以使用类似于媒体查询的方式来使用@container。需要注意，两者在括号中表达规则的方式有所不同（在容器查询中应该使用 inline-size > 30em 而不是 min-width: 30em）。这是媒体查询 4 级规范的一部分。当容器宽度大于 30rem 时，就切换到 flex 布局：

@container(inline-size>30em){.card{display:flex;}}

CSS Containment Level 3 规范目前处于工作草案中，这意味着语法可能随时改变。

3. 当前状态

目前容器查询在主流浏览器是不可用的，可以期待一下容器查询在浏览器的实现。

二、:has()

1. 基本概念

:has()通常被称为“父选择器”，这个伪类使我们能够根据其后代选择一个元素。它有一些非常有趣的用例。例如，可以根据图像是否包含 <figcaption>，而在<figure>中对图像进行不同的样式设置。

2. 使用方法

要设置包含<h3>的<section>元素的样式，可以执行以下操作：

section:has(h3){background:lightgray;}

当 <img> 的父级 <section> 包含 <h3>时，设置 <img>的样式：

section:has(h3)img{border:5pxsolidlime;}

3 当前状态

目前还没有主流浏览器支持该属性，但可以在 Safari 技术预览版中使用它。

三、@when/@else

1. 基本概念

@when/@else 是CSS中的条件规则，类似于其他编程语言中的if/else 逻辑。它可以使编写复杂的媒体查询更加符合逻辑。这里选择使用@when而不是@if是为了避免与 Sass 产生冲突。

2. 使用方法

可以查询多种媒体条件或支持的功能，例如用户的视口是否超过一定宽度，用户浏览器是否支持 subgrid。

@whenmedia(min-width:30em)andsupports(display:subgrid){}@else{}

3. 当前状态

现在改属性还没有在浏览器得到支持。现在还为时过早，仍在讨论中。预计今年不会广泛被浏览器支持，但它肯定是值得关注的一个非常实用的属性。

四、accent-color

1. 基本概念

color-scheme 属性允许元素指示它可以轻松呈现的配色方案。操作系统配色方案的常见选择是“亮”和“暗”，或者是“白天模式”和“夜间模式”。当用户选择其中一种配色方案时，操作系统会对用户界面进行调整。这包括表单控件、滚动条和 CSS 系统颜色的使用值。

2. 使用方法

用法很简单，而且该属性是可继承的。所以可以在根级别设置它，以在任何地方应用它：

:root{accent-color:lime;}

可以在单个元素上使用：

form{accent-color:lime;}input[type="checkbox"]{accent-color:hotpink;}

3. 当前状态

目前，accent-color 在 Chrome、Edge、Firefox 和 Safari 技术预览版中已经得到了支持。不支持该属性的的浏览器会直接使用默认颜色，并且输入是完全可用的。

五、颜色函数

1. 基本概念

我们可能已经很熟悉 Hex、RGB 和 HSL 颜色格式。CSS Color Module Levels 4 和 5 中包括一整套新的颜色函数，使我们能够以前所未有的方式在 CSS 中指定和操作颜色。它们包括：

hwb()：色相、白度、黑度。
lab()：亮度以及决定色调的 a和b值。
lch()：亮度、色度、色调。
color-mix()：将两种颜色混合在一起。
color-contrast()：从颜色列表中，输出与第一个参数相比对比度最高的颜色。
color()：指定不同颜色空间中的颜色（例如display-p3）。

2. 使用方法

hwb(), lab() 和 lch() 的使用方式与我 rgb() 和 hsl() 函数基本相同，都有一个可选的alpha 参数：

.my-element{background-color:lch(80%10050);}.my-element{background-color:lch(80%10050/0.5);}

color-mix() 将其他两种颜色混合后输出一种颜色。我们需要指定颜色插值方法作为第一个参数：

.my-element{background-color:color-mix(inlch,blue,lime);}

color-contrast() 需要一个基色来比较其他颜色。它将输出对比度最高的颜色，或者在提供额外关键字的情况下，输出列表中符合相应对比度的第一种颜色：

/*输出对比度最高的颜色*/.my-element{color:white;background-color:color-contrast(whitevs,lightblue,lime,blue);}/*输出符合AA对比度的第一种颜色*/.my-element{color:white;background-color:color-contrast(whitevs,lightblue,lime,bluetoAA);}

3. 当前状态

Safari 目前在浏览器支持方面处于领先地位，从版本 15 就开始支持hwb()、 lch()、lab()、color()，color-mix() 和 color-contrast() 可以通过 flag 启用。Firefox 支持 hwb()，并且还标记了对 color-mix() 和 color-contrast() 的支持。令人惊讶的是，Chrome 现在还不支持这些函数。

在代码中提供样式兼容并不难：给定两种颜色规则，如果浏览器不支持第二种颜色规则，它将忽略第二种颜色规则：

.my-element{background-color:rgb(84.08%0%77.36%);background-color:lch(50%100331);}

这样，当浏览器支持该函数时，就可以直接使用了。

六、层叠层

1. 基本概念

层叠层让我们有更多的能力来管理CSS的“层叠”部分。目前，有几个因素决定了 CSS 代码中将应用哪些样式，包括选择器群众和出现的顺序。层叠层允许我们有效地将CSS分组（或者“分层”）。顺序较低的层中的代码将优先于较高层中的代码，即使较高层中的选择器具有更高的权重。

2. 使用方法

下面来看看层叠层的基本使用：

/*按顺序创建图层*/@layerreset,base,theme;/*将CSS添加到每个层*/@layerreset{}@layerbase{h2.title{font-size:5rem;}}@layertheme{h2{font-size:3rem;}}

theme 层中的CSS字体大小声明将覆盖base层中的字体大小声明，尽管后者选择器具有更高的权重。

3. 当前状态

最新版本的 Firefox 已经支持了层叠层，并且可以在 Chrome 和 Edge 中使用 flag 启用（Chrome 99 版本将全面支持层叠层）。看起来所有主流浏览器都在使用这个规范，所以希望尽快能得到更广泛的支持。

七、subgrid

1. 基本概念

作为 CSS Grid Layout Module 2 规范的一部分，subgrid 允许元素在行轴或列轴上继承其父元素的网格。subgrid 对于解决各种用户界面挑战非常有用。

例如，以下面这个带有标题的图像为例。标题的长度各不相同，使用 subgrid 可以直接让它们对齐，而无需设置固定的高度。

2. 使用方法

首先将父元素设置为grid布局，将子元素的“grid-template-columns”或“grid-template-rows”属性设置为 subgrid：

.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,auto);}.grid>figure{display:grid;grid-template-rows:subgrid;}.gridfigcaption{grid-row:2;}

实现效果：

完整代码：

html：

<divclass="grid"><figure><imgsrc='https://images.unsplash.com/photo-1633083018029-bd1d4d52cb19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTYyMw&ixlib=rb-1.2.1&q=80&w=400'alt='Bluetit'><figcaption>Acolourfulmixofblue,yellow,whiteandgreenmakesthebluetitoneofourmostattractiveandmostrecognisablegardenvisitors.</figcaption></figure><figure><imgsrc='https://images.unsplash.com/photo-1619976302135-5efbc2a7785a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTY4NA&ixlib=rb-1.2.1&q=80&w=400'alt='Robin'><figcaption>Robinssingnearlyallyearroundanddespitetheircuteappearance,theyareaggressivelyterritorialandarequicktodriveawayintruders.</figcaption></figure><figure><imgsrc='https://images.unsplash.com/photo-1623627733740-4724cb1fe84e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTc4NQ&ixlib=rb-1.2.1&q=80&w=400'alt='Chaffinch'><figcaption>ThechaffinchisoneofthemostwidespreadandabundantbirdinBritianandIreland.</figcaption></figure></div>

CSS：

*{box-sizing:border-box;}body{font-family:"OpenSans",sans-serif;margin:0;padding:max(1rem,3vw);}figure{margin:0;display:grid;/*grid-template-rows:subgrid;*//*grid-row:1/3;*/}img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;grid-row:1/3;grid-column:1;}figcaption{padding:1rem;grid-column:1;grid-row:2;background:hsl(00%0%/0.6);color:white;}.grid{display:grid;max-width:80rem;margin:0auto;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1.5rem;}@media(min-width:62em){.grid{grid-template-rows:1frauto;}figure{grid-template-rows:subgrid;grid-row:1/3;}}

3. 当前状态

值得注意的是，自 2019 年以来，Firefox 已经支持了 subgrid，但近三年后还没有其他浏览器跟进。有迹象表明 Chromium 团队已经开始着手实现它，所以可能有幸在今年看到它登陆 Chrome 和 Edge。

八、@scroll-timeline

1. 基本概念

@scroll-timeline 属性定义了一个AnimationTimeline，其时间值由滚动容器中的滚动进度决定（而不是时间决定）。一旦指定，@scroll-timeline 将通过使用animation-timeline 属性与CSS Animation相关联。

2. 使用方法

这里来看一个简单的例子：

/*设置关键帧动画*/@keyframesslide{to{transform:translateX(calc(100vw-2rem));}}/*配置scrolltimeline，这里将它命名为了slide-timeline*/@scroll-timelineslide-timeline{source:auto;orientation:vertical;scroll-offsets:0%,100%;/*指定关键帧动画和scroll-timeline*/.animated-element{animation:1slinearforwardsslideslide-timeline;}

我们也可以对scroll-offsets属性使用基于元素的偏移量，以在特定元素滚动到视图中时触发 timeline：

@scroll-timelineslide-timeline{scroll-offsets:selector(#element)end0,selector(#element)start1;}