這篇文章跟大家分享幾個2022年值得期待的、不該錯過的CSS新功能，一起收藏學習吧！
對CSS來說，2022年是非常值得期待的一年，大量的新功能即將出現，有些已經開始登入瀏覽器，有些可能會在2022年獲得瀏覽器的廣泛支援。下面就來看看2022年有哪些值得期待的 CSS 新功能吧！ （推薦學習：css影片教學）
容器查詢使我們能夠根據其父元素的大小設定元素的樣式，它類似於@media查詢，不同之處在於它根據容器的大小而不是視口的大小進行判斷。這一直是響應式設計的問題，因為我們有時希望元件能夠適應它的上下文。
對於容器查詢，需要使用 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 規範目前處於工作草案中，這表示語法可能隨時改變。
目前容器查詢在主流瀏覽器是不可用的，可以期待容器查詢在瀏覽器的實作。
CSS Containment Module Level 3 （官方規範）：https://www.w3.org/TR/css-contain-3
:has()通常被稱為“父選擇器”，這個偽類別使我們能夠根據其後代選擇一個元素。它有一些非常有趣的用例。例如，可以根據圖像是否包含
要設定包含的元素的樣式，可以執行以下操作：
section:has(h2) { background: lightgray; }
當包含時，設定
section:has(h2) img { border: 5px solid lime; }
目前還沒有主流瀏覽器支援該屬性，但可以在Safari 技術預覽版中使用它。
Safari 技術預覽版：https://developer.apple.com/safari/technology-preview/
CSS Selectors Level 4 （官方規格）：https://www .w3.org/TR/selectors-4/
@when media(min-width: 30em) and supports(display: subgrid) { } @else { }
CSS Conditional Rules Module Level 5（官方規範）：https://www.w3.org/TR/css-conditional-5四、accent- color
:root { accent-color: lime; }
可以在单个元素上使用：
form { accent-color: lime; } input[type="checkbox"] { accent-color: hotpink; }
目前，accent-color 在 Chrome、Edge、Firefox 和 Safari 技术预览版中已经得到了支持。不支持该属性的的浏览器会直接使用默认颜色，并且输入是完全可用的。
CSS Basic User Interface Module Level 4（官方规范）：https://www.w3.org/TR/css-ui-4/
我们可能已经很熟悉 Hex、RGB 和 HSL 颜色格式。CSS Color Module Levels 4 和 5 中包括一整套新的颜色函数，使我们能够以前所未有的方式在 CSS 中指定和操作颜色。它们包括：
hwb(), lab() 和 lch() 的使用方式与我 rgb() 和 hsl() 函数基本相同，都有一个可选的alpha 参数：
.my-element { background-color: lch(80% 100 50); } .my-element { background-color: lch(80% 100 50 / 0.5); }
color-mix() 将其他两种颜色混合后输出一种颜色。我们需要指定颜色插值方法作为第一个参数：
.my-element { background-color: color-mix(in lch, blue, lime); }
color-contrast() 需要一个基色来比较其他颜色。它将输出对比度最高的颜色，或者在提供额外关键字的情况下，输出列表中符合相应对比度的第一种颜色：
/* 输出对比度最高的颜色 */ .my-element { color: white; background-color: color-contrast(white vs, lightblue, lime, blue); } /* 输出符合AA对比度的第一种颜色 */ .my-element { color: white; background-color: color-contrast(white vs, lightblue, lime, blue to AA); }
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% 100 331); }
这样，当浏览器支持该函数时，就可以直接使用了。
CSS Color Module Level 4（官方规范）：https://www.w3.org/TR/css-color-4/
CSS Color Module Level 5（官方规范）：https://www.w3.org/TR/css-color-5
层叠层让我们有更多的能力来管理CSS的“层叠”部分。目前，有几个因素决定了 CSS 代码中将应用哪些样式，包括选择器群众和出现的顺序。层叠层允许我们有效地将CSS分组（或者“分层”）。顺序较低的层中的代码将优先于较高层中的代码，即使较高层中的选择器具有更高的权重。
下面来看看层叠层的基本使用：
/* 按顺序创建图层 */ @layer reset, base, theme; /* 将CSS添加到每个层 */ @layer reset { } @layer base { h1.title { font-size: 5rem; } } @layer theme { h1 { font-size: 3rem; } }
theme 层中的CSS字体大小声明将覆盖base层中的字体大小声明，尽管后者选择器具有更高的权重。
最新版本的 Firefox 已经支持了层叠层，并且可以在 Chrome 和 Edge 中使用 flag 启用（Chrome 99 版本将全面支持层叠层）。看起来所有主流浏览器都在使用这个规范，所以希望尽快能得到更广泛的支持。
CSS Cascading and Inheritance Level 5（官方规范）：https://www.w3.org/TR/css-cascade-5/
作为 CSS Grid Layout Module 2 规范的一部分，subgrid 允许元素在行轴或列轴上继承其父元素的网格。subgrid 对于解决各种用户界面挑战非常有用。
例如，以下面这个带有标题的图像为例。标题的长度各不相同，使用 subgrid 可以直接让它们对齐，而无需设置固定的高度。
首先将父元素设置为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; } .grid figcaption { grid-row: 2; }
实现效果：
完整代码：
html：
A colourful mix of blue, yellow, white and green makes the blue tit one of our most attractive and most recognisable garden visitors. 
Robins sing nearly all year round and despite their cute appearance, they are aggressively territorial and are quick to drive away intruders. 
The chaffinch is one of the most widespread and abundant bird in Britian and Ireland.
CSS：
* { box-sizing: border-box; } body { font-family: "Open Sans", 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(0 0% 0% / 0.6); color: white; } .grid { display: grid; max-width: 80rem; margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.5rem; } @media (min-width: 62em) { .grid { grid-template-rows: 1fr auto; } figure { grid-template-rows: subgrid; grid-row: 1 / 3; } }
演示demo：https://codepen.io/michellebarker/pen/YzERyor
值得注意的是，自 2019 年以来，Firefox 已经支持了 subgrid，但近三年后还没有其他浏览器跟进。有迹象表明 Chromium 团队已经开始着手实现它，所以可能有幸在今年看到它登陆 Chrome 和 Edge。
CSS Grid Layout Module Level 2（官方规范）：https://www.w3.org/TR/css-grid-2/
@scroll-timeline 属性定义了一个AnimationTimeline，其时间值由滚动容器中的滚动进度决定（而不是时间决定）。一旦指定，@scroll-timeline 将通过使用animation-timeline 属性与CSS Animation相关联。
这里来看一个简单的例子：
/* 设置关键帧动画 */ @keyframes slide { to { transform: translateX(calc(100vw - 2rem)); } } /* 配置scroll timeline，这里将它命名为了slide-timeline */ @scroll-timeline slide-timeline { source: auto; orientation: vertical; scroll-offsets: 0%, 100%; /* 指定关键帧动画和 scroll-timeline */ .animated-element { animation: 1s linear forwards slide slide-timeline; }
我们也可以对scroll-offsets属性使用基于元素的偏移量，以在特定元素滚动到视图中时触发 timeline：
@scroll-timeline slide-timeline { scroll-offsets: selector(#element) end 0, selector(#element) start 1; }
如果对 @scroll-timeline 感兴趣，可以在 Chrome 中使用 flag 来启用它。当我们遇到一个复杂的动画时，可能需要使用 JavaScript 动画库来实现，但是对于相对简单的动画，使用该属性就可以减少不必要的import。
Scroll-linked Animations（官方规范）：https://drafts.csswg.org/scroll-animations-1/
如果你熟悉 Sass，就会知道嵌套选择器的便利性。本质上，就是在父级中编写子级规则。嵌套可以使编写CSS代码更加方便，现在嵌套终于来到了原生 CSS！
从语法上讲，它与 Sass 相似。下面来给 class 为 card 中的 h2 子元素定义样式规则：
.card { color: red; & h2 { color: blue; } }
可以将其用于伪类和伪元素：
.link { color: red; &:hover, &:focus { color: blue; } }
这些就等价于下列 CSS 代码：
.link { color: red; } .link:hover, .link:focus { color: blue; }
目前还没有浏览器支持嵌套。如果你使用PostCSS，可以通过预置的 postcss-preset-env 插件来尝试嵌套。
CSS Nesting Module（官方规范）：https://www.w3.org/TR/css-nesting-1/
现在正处于 CSS 蓬勃发展的时代。在写这篇文章时，我注意到这些新功能有一些共同点，它们都是为了帮助我们编写更好、更干净、更高效的代码。随着时间的推移，预处理工具（如 Sass）可能会变得不再重要。让我们一起期待更多新的 CSS 功能出现吧！
英文原文：https://www.smashingmagazine.com/2022/03/new-css-features-2022/
作者：Michelle Barker
译者：CUGGZ
（学习视频分享：web前端）
以上是2022年你值得了解的幾個CSS新功能（收藏學習）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
