它将成为2022年CSS最伟大的一年。没有功能或合作浏览器的功能，合作的目标是实现14个功能。
原始：https：//web.dev/state-5 CSS-2022/
翻译：Cuggz
如果翻译不准确，请纠正我！
本文是在Google IO 2022上发表的演讲的文本。对每个功能的深度解释都不是在深度解释中，但是对每个功能的简要概述以提供广度而不是深度。
以下是这些CSS函数的概述：
设置如此多的CSS函数的主要原因是来自Interop 2022的努力。让我们分别看一下Interop 2022和Compat 2021的努力。
2021年的目标是由开发人员通过调查获得的反馈来驱动的。它旨在稳定当前功能，改善测试套件并在五个功能中提高浏览器的分数：
测试分数得到了完全改进，显示出更高的稳定性和可靠性。
今年，浏览器共同努力讨论他们计划开发的功能和优先级。他们计划为开发人员提供以下Web功能：
以前，加载样式的顺序非常重要，因为最终的加载样式将涵盖先前加载的样式。这样，开发人员需要首先加载较少重要的样式，然后加载更多重要的样式。
之后，入口文件可以提前定义层及其顺序。然后，当样式被加载，加载或已定义时，可以将它们放入层中以允许保留样式覆盖的重要性，但无需仔细管理加载顺序。
上图显示了类Co -Layer如何允许更多免费，更公开的写作和加载过程。在同一时间，它仍然可以根据需要维护图层堆栈。
Chrome Devtools有助于以下可视化风格的样式：
相关资源：
以前，另一个网格中的网格无法与其父亲的单元或网格线保持一致。每个网格布局是独一无二的。许多设计师在整个设计上都有一个网格并保持对齐，这在CSS中无法完成。
之后，网格的子网格可以将其父亲网格的列或线作为自己的列或行，并将其对齐或与它们对齐！
在以下演示中，该元素会创建一个经典的三行网格，该网格在中间列出，左右的列被称为。
最后，或子级可以使用列和行来对齐或调整自己的大小。
完整示例：https：//codepen.io/web-dot-dev/pen/jjmqzvv
当前，Firefox DevTools可以帮助我们查看sub -grid。在下图中，父栅格和子网格已经重叠。现在，它与设计师对布局的思考方式相似。
在DevTools的“元素”面板中，可以在和谐中看到元素，这对于调试或验证布局非常有用。
相关资源：
之后，该元素可以响应父容器的大小或样式！唯一要注意的是，容器必须将其声明为可能的查询。这是一个很小的要求，可以带来巨大的好处。
这些样式使下图中的周一，周二，周三，周三，周四和周五的列可以通过活动元素查询。
以下CSS用于查询容器的大小，然后调整布局和字体大小：
以下是另一个示例：根据拖动列中的可用空间进行调整的书籍组件：
相关资源：
浏览器支持：
以前，当我们想要与该品牌匹配的表格时，它最终可能需要复杂的库或CSS解决方案。随着时间的流逝，这些解决方案将变得难以管理。尽管它们提供了所有选择，并希望包括可访问性，选择在组件中使用构建或采用自己的组件会变得单调并且无法继续选择。
之后，一组CSS将主题颜色带入了内置组件。除颜色外，浏览器还将为组件的辅助部分智能选择适当的对比度颜色，并适应系统配色方案（明亮的深色）。
相关资源
CSS具有许多新的颜色功能和空间（但在2022年没有）：
在出现所有这些颜色特征之前，设计系统需要预先计算正确的对比度颜色，并确保调色板具有适当的活力，并且前处理器或JavaScript起着重要作用。
完成所有这些颜色后，浏览器和CS可以动态和及时完成所有作业。CSS可以安排和计算，而不是将大型CSS和JavaScript发送给用户以启用主题和数据可视化颜色。CSS还可以在使用前更好地检查支持情况。，或优雅地处理它。
（1）HWB（）浏览器支持：
HWB代表颜色，白度和黑色。它显示出一种向人类表达颜色的方法，因为它只是一种色调，再加上一定数量的白色或黑色，以使其变亮或黑暗。
效果如下：
使用此颜色功能将从SRGB颜色空间产生颜色，该颜色与HSL和RGB相同。就2022年的新想法而言，这并不能给您带来新的颜色，但它可能会使语法和心理模型的粉丝更多可能完成一些任务。
相关资源：
在2022年，SS将提供10个新的颜色空间，每个颜色空间都具有独特的功能，可帮助设计师和开发人员显示，选择和混合颜色。彩色空间LCH。
（3）color-mix（）浏览器支持：
在浏览器看到颜色之前，开发人员和设计师需要混合颜色。对于指定颜色空间指定的混合选项，最大的颜色混合功能没有提供，有时结果是混乱的。
之后，开发人员和设计人员可以在浏览器中混合颜色和所有其他样式，而无需运行施工过程或包括JavaScript。此外，他们可以在哪种颜色空间中指定混合的颜色空间，或使用LCH的默认混合颜色空间。
通常，主题颜色用作基本颜色，并创建一个变体，例如悬停样式的浅色或深色。以下是一个例子：
如果您想在不同的颜色空间（例如SRGB）中混合这些颜色，请更改：
在2022年的样式桌上享受各种颜色空间的颜色！
相关资源：
以前，样式表作者需要了解可以预先访问的颜色。通常，调色板将在颜色样本上显示黑色或白色文本，以指示颜色系统用户与样品进行比较。
之后，样式表作者可以将任务完全传输到浏览器。您只能使用浏览器自动选择黑色或白色，但是您还可以为其提供设计系统的颜色列表，然后让它选择它需要通过所需的对比度比较的第一种颜色。
这是HWB颜色面板集演示的屏幕截图。浏览器会根据样品颜色自动选择文本颜色：
语法的基本内容如下所示。灰色传递到功能。浏览器确定黑色还是白色的对比度最大：
也可以使用颜色列表自定义此功能。它将选择最高对比的颜色：
最后，如果最好不要从列表中选择具有最高对比度的颜色，则可以提供目标对比度，并选择第一种颜色来传递对比度：
此功能不仅可以用于文本颜色，而且可以是其主要目的。考虑到它，一旦将正确的对比度颜色内置到CSS语言本身中，那么提供可访问且可读的接口是多么容易。
相关资源：
在使用相对颜色语法之前，为了计算颜色并调整颜色，需要将颜色通道分开放入自定义属性中。此限制还使HSL成为颜色处理颜色的主要颜色函数，因为颜色，饱和度或亮度可以直接调节。
在相对颜色语法之后，任何空间中的任何颜色都可以被解构，修改和返回为颜色，所有颜色都可以在CSS行中完成。为简化操作而创建。
在以下语法示例中，提供了基本的十六进制，并创建了两种新颜色。第一种颜色从LCH中的基本颜色创建了新的颜色，然后继续将基本颜色的亮度替换为75％，并保持颜色（C）和色调（H）。第二种颜色从LCH中的基本颜色产生了新的颜色，但这次将颜色（C）降低了20％。
它类似于混合颜色，但更像更改而不是混合。您可以从另一种颜色创建颜色，访问以所使用的颜色函数命名的三个通道值，并有机会调整这些频道。，这是一种非常酷和强大的颜色语法。
在下面的示例中，使用基本颜色的相对较明亮，更暗的变体来创建相对五颜六色的语法，并用于确保标签具有适当的对比度：
该功能也可以用于着色板的生成。这是一个示例，它是根据整个调色板提供的基本色素生成的。这组CSS支持所有不同的调色板，每个调色板仅提供不同的基本颜色。
到目前为止，我希望您能根据其优势和缺点如何将颜色空间和不同颜色功能用于不同的目的。
相关资源：
在梯度颜色空间之后，告诉浏览器使用哪个颜色空间用于颜色插值。这使开发人员和设计师可以选择自己喜欢的梯度。默认的颜色空间也更改为LCH而不是SRGB。
在沿梯度方向添加语法后，使用新的语法，并且是可选的：
这是从黑色到白色的基本且必不可少的梯度。检查每个颜色空间中的颜色空间的结果。有些人早些时候达到了深黑色，有些人稍后到达白色。
在下一个示例中，黑色被转换为蓝色，因为它是一个已知的渐变问题空间。大多数颜色空间在颜色插值过程中逐渐变成紫色，或者，当颜色从颜色空间中从点A到B点B时。采用从A点到B点的直线，颜色空间的形状将大大改变沿路径的停止点。
俄克利和俄克拉荷马州是特殊的色彩空间，可以解释各种变化。例如，这变成紫色，这使得它们对于梯度特别准确。
相关资源：
以前，这是指导用户对页面或应用领域的关注的好方法，需要立即遵循该页面或应用程序区域。该指导重点策略称为焦点捕获，因为开发人员将把焦点放在交互式空间中，监视重点以更改事件。。如果焦点离开交互式空间，它将被迫返回。使用键盘或屏幕读取器的用户将被带回到交互式空间，以确保先前的任务继续完成。
之后，由于您可以冻结或保护页面或应用程序的整个部分，因此无需设置陷阱。当文档的这些部分处于惰性状态时，完全无法使用试验和焦点更改。也可以将其想象为警卫而不是陷阱。惰性元素不希望您呆在某个地方，而是要使它在其他地方不可用。
JavaScript功能是一个很好的例子：
请注意，在致电之前，通过鼠标和键盘访问页面。显示窗口弹出窗口后，该页面的其余部分将被冷冻或未激活。用户的注意力在“警报”对话框中，无处可为了完成用户交互并完成警报功能请求，该页面将再次交互。制定开发人员可以轻松获得相同的指导重点体验。
以下示例显示了它的工作原理：
对话框是一个很好的例子，但它也有助于诸如滑动端菜单用户体验之类的内容。当用户滑出侧菜单时，允许鼠标或键盘与后页交互是不合适的。相反，当显示侧面菜单时，页面处于状态。现在，用户必须在侧面菜单中关闭或导航，并且永远找不到您在菜单页面上的其他位置迷失了。
相关资源：
在使用ColRV1字体之后，Web具有较小的职业空间，矢量缩放，重新定位，梯度函数和混合模式驱动器。他们接受参数来定义每个用例的字体或匹配主题。
以下是Chrome Developer的博客文章中表达式符号的一个示例。也许您已经注意到，如果您缩放表情符号的字体大小，它将不会保持清晰。这是图像，而不是vector art.使用colrv1 font，colrv1 font，表情符号既是矢量又美丽：
图标字体可以采用这种格式做一些令人惊奇的事情，提供定制的两个色调面板，等等。
ColRV1字体的使用已完成，这是一种特殊的CSS规则，用于分组一组自定义选项并命名为未来参考的软件包。指定自定义名称，就像自定义属性一样，以：开始：
作为定制别名，最后一步是将着色板应用于颜色字体系列的元素：
随着越来越多的可变字体和彩色字体的出现，网络布局正在朝着丰富的自定义和创意表达的方向发展。
相关资源：
在新的观看变体之前，Web提供了物理单元以帮助适应视口。高度，宽度，最小尺寸（VMIN）和最大边缘（VMAX）（VMAX）。这些对许多事情有效，但移动浏览器会带来复杂性。
在移动设备上，加载页面时，将显示带有URL的状态栏，此列将占据一些视口空间。几秒钟的交互后，状态栏可能会滑落以为用户提供更大的视点体验。但是，当条带滑出时，视口的高度会发生变化，任何VH单元都会随着目标尺寸的变化而移动并调整大小。在接下来的几年中，VH单元特别需要确定两个视口尺寸中的哪一个，因为它会在移动设备上引起不一致的视觉布局问题，因此确定VH将始终代表最大的视图端口。
在新的查看变体之后，可以根据物理视图端口单元添加一个小型，大而动态的视图端口单元，并且可以添加逻辑等效单元。此想法允许开发人员和设计人员选择他们想要使用的单元在给定的情况下。当状态栏消失时，您可能会更改不协调的布局，因此您不必担心使用DVH（动态视口高）。
以下是新视图端口变体提供的所有新视口单元选项的完整列表：
希望这些能为开发人员和设计师提供实现视图端口设计所需的灵活性。
相关资源：
以前，选择器的主体始终在最后。
之后：has（），元素树中的较高主题可以保留为主体，同时提供相关的子项目：...................... termody）如何获得“父亲的共同名称选择”，因为在这种情况下，选择器的主题现在为父。
这是基本语法的一个例子。该类仍然是主体，但是仅当子元素有一个类时才选择：
这是一个示例，其中元素是主体，但是仅当一个子元素具有：
选择器开始成为一种神奇的实用工具，因为实际情况变得更加明显。例如，在包装图像时不能选择标签，因此很难确定如何在用例中更改其样式。用于实施：
这些是看似父母选择的示例。如果图片可用，请考虑用例并调整元素中图像的图像。在以下示例中，选择图像，然后在上下文中选择图像。不会改变主题，因为我们的目标是图像而不是数字：
使用及其功能使检查支持简单。该函数在使用该函数之前先对语法进行测试：
相关资源：
CSS自定义属性令人惊讶。它们允许各种东西存储在命名变量中，然后扩展，计算，共享等。实际上，它们是如此灵活，如果有些灵活的东西，它将会更好。
考虑一个方案，将矩形阴影的自定义属性用作其值：
所有这些都将正常运行，直到将任何属性更改为CSS的值，例如任何嵌套变量丢失或设置为无效的值类型，则整个阴影都会中断。
这是武术的地方：它可以成为一种自定义属性，不再松散且灵活，但是在某些定义边界下是安全的：
现在，当使用它时，红色将被忽略，因为它不是。这意味着阴影将继续正常工作，即使对于其自定义属性之一是无效的。它没有失败，但返回其初始值。
除了类型安全外，它还为动画打开了许多门。CSS语法的灵活性使某些动画变得不可能，例如渐变。在这里将很有用，因为CSS属性的类型可以告知浏览器开发人员在其他过于过度的浏览器开发人员的意图复杂的插值。它本质上限制了可能性的范围，因此浏览器可以为以前无法实现的样式的每个方面设置动画。
考虑以下示例，该示例使用径向梯度使盖子的一部分，以创建集中的光聚焦效果。按下键后，JavaScript设置为设置鼠标，然后将焦点大小更改为较小的值。例如，在鼠标位置创建聚焦重点：
但是，无法设置梯度。它们太灵活且对于浏览器来说太复杂了，他们无法理解您希望它们制作动画。但是，如果您使用它，则可以单独设置属性并为其设置动画。浏览器可以轻松理解其意图。
关注此效果的视频游戏将始终为圆圈设置动画，从大圆圈到针孔圆圈。以下是如何在演示中使用它，以便浏览器为渐变蒙版设置动画：
浏览器现在可以为梯度大小设置动画，因为我们将修改后的表面积减少到一个属性并设置值，以便浏览器可以智能地插入长度。
相关资源：
后者看上去比前者更清楚。要增加规范，开发人员将能够选择自己喜欢的东西，甚至可以交换它们。
相关资源：
之后，CSS允许定义对媒体查询的别名和引用，就像自定义属性一样。
命名非常重要：它可以保持目的和语法，使事情更容易分享，并且在团队中更容易使用。这里是一些自定义媒体查询：
现在他们已经定义了，我可以这样使用其中一个：
相关资源
之后，它反复消失。几乎所有支持预处理器的嵌套功能都将在CSS中构建。
除了避免重复代码外，嵌套的最重要的是保留在样式块中的样式上下文。阅读器无需从一个选择器及其样式跳到另一个选择器（示例1）。相反，他们可以留在文章的背景下并查看其中的文章。
考虑到子组件，它希望在不同的父级上下文而不是父级组件样式中调整自身，并更改子组件：
@nest帮助更健康的风格组织，集中化和所有权。com.potents可以包装并具有自己的风格，而不是让它们以其他风格的范围传播。在这些示例中，它看起来很小，但是为了方便和可读性，它可以拥有巨大的影响。
相关资源：
之后，样式不仅可以限于上下文，就像一类一样，它们也可以清除样式的最终位置，并且不会继续级别或继承。
在以下示例中，BEM命名的范围可以转换为实际意图。BEM选择器试图将元素的颜色范围限制为具有命名同意的容器的颜色范围。此类别要求此类别完成目标。使用，使用。您无需命名协议即可完成相同的目标：
以下是另一个示例。它不是特定于组件的。它更多地是关于CS的全球性质。黑暗和光色的主题必须存储在样式表中，这对于确定获胜的样式很重要。这通常意味着黑暗主题样式在光主题之后出现。这将浅色设置为默认样式，并将深色设置为可选样式。
还允许使用任何名称协议或前处理器完成样式范围的末端。这很特别，只能完成CSS中的浏览器。在以下示例中，当子项目是兄弟或父母时，它将被应用和时尚：
相关资源：
下图使用以下CSS实现：
相关资源：
媒体查询后，CSS可以加入用户体验增强功能并在保存数据中发挥作用。
以前的CSS在此媒体滚动组件中使用，节省了大量资源。根据访问端口的大小，您可以在页面上保存更多资源。当用户与媒体滚动栏交互时，它继续保存。这些图像具有属性，加上CSS完全隐藏的元素，这意味着它永远不会向图像发出网络请求。
在我的测试中，首先加载了40个请求和700KB资源。当用户滚动媒体以选择时，将加载更多的请求和资源。使用CSS媒体查询，加载10个请求和172KB资源。这节省了半算数字节，用户甚至没有滚动任何媒体。目前没有其他请求。
减少数据体验的优势不仅是节省资源。您可以看到更多的标题并且没有分散图片来吸引注意力。许多用户在数据保护模式下浏览，因为它们会根据每个MEGER BYTE的数据付款-I很高兴在这里看到CSS帮助。
相关资源：
.snap-scroll-y {scroll-start-y：var（-nav-height）;};}
在这些滚动快照提案之后，制作滑块，旋转或画廊要容易得多，因为浏览器现在为任务提供便利，消除了观察者和滚动布置代码，这有助于使用构建的-in Apis。
这些CS和JS功能仍处于早期阶段，但请注意，尽快使用和测试其多填充。
相关资源：
之后，您可以在任何元素上创建一个自定义状态，以便可以更改CSS并用于样式。它允许循环和定向开关。
在以下示例中，删除该行的效果是完成表格的完整列表，但是没有复选框元素：
和相关的CSS样式：
如果您熟悉状态机，您可能会注意到有多少个交叉口。此功能将使开发人员能够将更多的状态构建为CSS，希望以更清晰和更语义的方式编译互动和状态。
相关资源：
之后，开发人员可以为期权元素提供丰富的HTML，并根据需要设置样式设置，同时仍然满足可访问的要求并提供语义HTML。
在下面的示例中，从解释器页面中获取它，并创建一个新的选择菜单，其中有一些基本选项：
CSS可以为元素的每个部分设置其样式：
相关资源：
之后），开发人员可以将元素定位到其他元素，它们是否为子元素。它还允许开发人员指定边缘的位置，以及元素之间定位关系的其他细节。
相关资源：
原始：https：//juejin.cn/post/70966659729577773860