对于CSS来说，2022年是值得期待的一年，大量的新特性即将到来，有的已经开始登陆浏览器，有的可能在2022年就可以浏览了广泛支持设备。一起来看看2022年值得期待的CSS新特性吧！一、容器查询1、基本概念容器查询允许我们根据元素的父元素的大小来设置元素的样式。它类似于@media查询，但不同的是，它是根据容器的大小而不是视口的大小来判断的。这一直是响应式设计的一个问题，因为我们有时希望组件适应其上下文。2.如何使用对于容器查询，需要使用container属性（container-type和container-name的缩写）来指定一个元素作为容器。容器类型可以是宽度、高度、内联大小、块大小。inline-size和block-size是逻辑属性，可能会根据文档的写入模式产生不同的结果。main,aside{container:inline-size;}您可以以类似于媒体查询的方式使用@container。需要注意的是，括号中的两个表达规则不同（在容器查询中应该使用inline-size>30em而不是min-width:30em）。这是MediaQueriesLevel4规范的一部分。当容器宽度大于30rem时，切换到flex布局：@container(inline-size>30em){.card{display:flex;}}CSSContainmentLevel3规范目前处于工作草案中，这意味着语法可能随时更改。3.现状目前主流浏览器不支持容器查询。可以期待容器查询在浏览器中的实现。CSSContainmentModuleLevel3（官方规范）：https://www.w3.org/TR/css-contain-32.:has()1.基本概念：has()通常被称为“父选择器”，这个伪类使我们能够根据其后代选择一个元素。它有一些非常有趣的用例。例如，根据图像是否包含，图像可以在a中设置不同的样式。2.使用方法设置包含
的元素的样式，可以如下操作：section:has(h2){background:lightgray;}当![]()
的父包含，设置![]()
的样式：section:has(h2)img{border:5pxsolidlime;}3当前状态目前主流浏览器还不支持该属性，但可以在SafariTechnologyPreview中使用。Safari技术预览：https://developer.apple.com/safari/technology-preview/CSSSelectorsLevel4（官方规范）：https://www.w3.org/TR/selectors-4/三、@when/@else1。基本概念@when/@else是CSS中的条件规则，类似于其他编程语言中的if/else逻辑。它可以使编写复杂的媒体查询更加合乎逻辑。这里选择使用@when而不是@if是为了避免与Sass冲突。2.通过方法查询各种媒体情况或支持的功能，比如用户视口是否超过一定宽度，用户浏览器是否支持subgrid。@whenmedia(min-width:30em)andsupports(display:subgrid){}@else{}3.当前状态浏览器尚不支持此属性。现在还处于早期阶段，仍在讨论中。预计今年浏览器不会广泛支持它，但它肯定是一个非常有用的属性，值得关注。CSS条件规则模块级别5（官方规范）：https://www.w3.org/TR/css-conditional-54.accent-color1。基本概念color-scheme属性允许元素指示它可以轻松呈现的配色方案。操作系统配色方案的常见选择是“浅色”和“深色”，或者“白天模式”和“夜间模式”。当用户选择其中一种配色方案时，操作系统会调整用户界面。这包括表单控件、滚动条和CSS系统颜色的使用值。2.使用方法很简单，这个属性是可以继承的。所以它可以在根级别设置以在任何地方应用它：:root{accent-color:lime;}可以用在单个元素上：form{accent-color:lime;}input[type="checkbox"]{accent-color:hotpink;}3.当前状态目前，chrome、Edge、Firefox和SafariTechPreview都支持accent-color。不支持此属性的浏览器将简单地使用默认颜色并且输入完全可用。CSSBasicUserInterfaceModuleLevel4（官方规范）：https://www.w3.org/TR/css-ui-4/五、颜色函数1、基本概念我们可能已经熟悉了Hex、RGB和HSL颜色格式。CSS颜色模块级别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{背景色：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目前是浏览器支持的领先者，支持hwb(),lch(),lab(),color(),color-mix自版本15()和color-contrast()可以通过标志启用。Firefox支持hwb()并且还标记了对color-mix()和color-contrast()的支持。令人惊讶的是，Chrome还不支持这些功能。在代码中提供样式兼容性并不难：给定两个颜色规则，如果浏览器不支持第二个颜色规则，则会忽略它：.my-element{background-color:rgb(84.08%0%77.36%);background-color:lch(50%100331);}这样，当浏览器支持该功能时，可以直接使用。CSSColorModuleLevel4（官方规范）：https://www.w3.org/TR/css-color-4/CSSColorModuleLevel5（官方规范）：https://www.w3.org/TR/css-color-56.级联层1.基本概念级联层使我们更有能力管理CSS的“级联”部分。目前，有几个因素决定了在CSS代码中应用哪些样式，包括选择器的数量和出现的顺序。图层图层允许我们有效地分组（或“分层”）CSS。较低层的代码将优先于较高层的代码，即使较高层的选择器具有更高的权重。2、使用方法先看一下图层的基本使用：/*按顺序创建图层*/@layerreset,base,theme;/*为每个图层添加CSS*/@layerreset{}@layerbase{h1.title{字体大小：5rem;}}@layertheme{h1{font-size:3rem;}}主题层中的CSS字体大小声明将覆盖基础层中的字体大小声明，尽管后者的选择器具有更高的权重。3、现状Firefox最新版本已经支持overlays，在Chrome和Edge中可以通过flag开启（Chrome99版本将全面支持overlays）。看起来所有主流浏览器都在使用这个规范，所以希望它能很快得到更广泛的支持。CSSCascadingandInheritanceLevel5（官方规范）：https://www.w3.org/TR/css-cascade-5/七、subgrid1。基本概念作为CSSGridLayoutModule2规范的一部分，subgrid允许将元素放置在行轴或列轴上继承其父元素的网格。子网格对于解决各种用户界面挑战很有用。例如，使用下面的标题拍摄这张图片。表头有各种长度，使用subgrid可以让它们直接对齐而无需设置固定高度。2、使用方法首先将父元素设置为网格布局，将子元素的“grid-template-columns”或“grid-template-rows”属性设置为subgrid：.grid{display:grid;网格模板列：重复（3、1fr）；grid-template-rows:repeat(2,auto);}.grid>figure{display:grid;grid-template-rows:subgrid;}.gridfigcaption{grid-row:2;}实现效果：完整代码：https://codepen.io/michellebarker/embed/YzERyor3。目前状态值得注意的是，从2019年开始，Firefox就支持了subgrid，但时隔近三年，其他浏览器都没有跟进。有迹象表明Chromium团队已经在着手实施它，因此您可能有幸在今年看到它出现在Chrome和Edge中。CSSGridLayoutModuleLevel2（官方规范）：https://www.w3.org/TR/css-grid-2/八、@scroll-timeline1。基本概念@scroll-timeline属性定义了一个AnimationTimeline，其时间值由滚动容器中滚动的进度决定（而不是时间）。一旦指定，@scroll-timeline将通过使用animation-timeline属性与CSS动画相关联。2.如何使用下面是一个简单的例子：/*设置关键帧动画*/@keyframesslide{to{transform:translateX(calc(100vw-2rem));}}/*配置滚动时间轴，这里命名为slide-timeline*/@scroll-timelineslide-timeline{source:auto;方向：垂直；滚动偏移量：0%、100%；/*指定关键帧动画和滚动时间轴*/.animated-element{animation:1slinearforwardsslideslide-timeline;}我们还可以为scroll-offsets属性使用基于元素的偏移量，以在特定元素被触发时触发时间轴scrolledintoview:@scroll-timelineslide-timeline{scroll-offsets:selector(#element)end0,selector(#element)start1;}3.当前状态如果你对@scroll-timeline感兴趣，可以使用Chrome中的标志以启用它。当我们遇到复杂的动画时，可能需要使用JavaScript动画库来实现，但是对于比较简单的动画，使用这个属性可以减少不必要的导入。滚动链接动画（官方规范）：https://drafts.c??sswg.org/scroll-animations-1/9。嵌套1.基本概念如果你熟悉Sass，你就会知道嵌套选择器的便利。本质上，您是在父级中编写子规则。嵌套可以让写CSS代码更方便，现在嵌套终于来到了原生CSS！2.用法在语法上，它类似于Sass。让我们为cardforclass中的h2子元素定义样式规则：.card{color:red;&h2{颜色：蓝色；}}它可以用于伪类和伪元素：.link{color:red;&:hover,&:focus{颜色：蓝色；}}这些相当于下面的CSS代码：.link{color:red;}.link:hover,.link:focus{color:blue;}3.目前状态是nowNobrowsersupportsnestingyet.如果你使用PostCSS，你可以通过预构建的postcss-preset-env插件来尝试嵌套。CSSNestingModule（官方规范）：https://www.w3.org/TR/css-nesting-1/十。总结现在我们正处于CSS蓬勃发展的时代。在写这篇文章时，我注意到这些新特性有一些共同点，它们都是为了帮助我们编写更好、更干净、更高效的代码而设计的。随着时间的推移，Sass等预处理工具可能会变得不那么重要。让我们期待更多新的CSS特性！
