CSS的状况[2022]
CSS的状况[2022]
如 Google IO 2022 所示，今天和明天的网络风格功能，以及一些额外功能。
以实现 14 项功能为共同目标，2022 年有望成为 CSS 功能和合作浏览器功能发布的最大年份之一。
概述
Google IO 2022 上的演讲以书面形式呈现在这篇文章中。这并不是对每个功能的全面介绍；相反，它将作为介绍和简洁而不是深度来激发您的好奇心。
浏览器兼容性
Interop 2022 的活动是协调发布这么多 CSS 功能的主要因素。在分析 Interop 计划之前，了解 Compat 2021 的活动至关重要。
兼容 2021
开发人员的调查响应为 2021 年目标提供了灵感，其中包括稳定当前功能、增强测试套件以及提高浏览器通过率的五个功能：
黏定位纵横比浆纱柔性布局网格布局转换定位和动画
互操作 2022
今年，浏览器开发人员聚在一起讨论他们想要关注的功能和目标，以协调他们的努力。对于 Web 开发人员，他们打算提供以下功能：
@层- 色彩空间和功能
- 遏制
<dialog>- 表格兼容性
- 滚动
- 子网格
- 排版
- 视口单位
- 网络兼容
2022年新鲜
不出所料，Interop 2022 工作对 CSS 2022 产生了重大影响。
级联层
之前 @层 ，样式表的发现顺序至关重要，因为最后加载的样式可能会替换早期加载的样式。结果，开发人员必须先加载不太重要的样式，然后在精确控制的条目样式表中加载更重要的样式。为了帮助开发人员管理这种相关性，有像 ITCSS 这样的完整技术。
入口文件可以使用 @层 关键词。然后，当样式加载、加载或定义时，它们可能会被放置到一个层中，从而无需精确编排的加载过程就可以保留样式的相关性。
子网格
在子网格发明之前，另一个网格内部的网格无法与其父单元格或网格线对齐。每个网格配置都不同。许多设计师使用单个网格来覆盖他们的整个设计并定期对齐其中的元素，这是使用 CSS 无法实现的。
子网格化后，子网格的子网格可以将其自身或其子代与其父代的列或行对齐。
以下演示中的 body 元素建立了一个传统的三列网格，中心列称为主列，左右列的线称为全出血。然后，通过设置 grid-template-columns: subgrid，body 中的每个元素，包括 nav 和 main，都采用 body 中的命名行。
身体{
显示：网格；
网格模板列：
[全血启动]
auto [main-start] min(90%, 60ch) [main-end] auto
[满血结束]
;
}
正文 > * {
显示：网格；
网格模板列：子网格；
}
最后，孩子们 <nav> 或者 <main> 可以使用 全出血 和 主要的 列和行。
.主要内容{
网格列：主要；
}
.fullbleed {
网格列：fullbleed；
}
容器查询
以前网页的组件只能适应整个视口的大小 @容器 .这对于宏布局非常有效，但它使微布局难以适应，因为它们的外部容器不会填满整个视口。
元素可以在之后对父容器的大小或样式做出反应 @容器 ！唯一的限制是容器必须将自己公开为潜在的查询目标，但即使是这种小需求也有很大的好处。
/* 建立一个容器 */
。天 {
容器类型：内联大小；
容器名称：日历日；
}
这是用于查询的 CSS 日历日 容器的大小，然后调整布局和字体大小：
@container 日历日（最大宽度：200px）{
。日期 {
显示：块；
}
.date-num {
字体大小：2.5rem；
显示：块；
}
}
强调色
在强调色之前，如果您需要具有品牌协调颜色的表单，您必须使用复杂的库或 CSS 解决方案，随着时间的推移，这些解决方案变得难以管理。继续选择是使用内置组件还是调整您自己的组件变得很烦人，即使它们为您提供了所有替代方案并且理想情况下包括可访问性。
一行CSS在accent-color之后为内置组件添加了品牌颜色。除色调外，浏览器还智能地为组件的附件选择适当的反色，并根据系统配色方案（浅色或深色）进行调整。
/* 为所有内容着色 */
：根 {
强调色：hotpink；
}
/* 给一个元素着色 */
进步 {
强调色：靛蓝；
}
颜色级别 4 和 5
虽然 sRGB 长期以来一直统治着网络，但在日益增长的高清显示器和带有 OLED 或 QLED 面板的移动设备的数字世界中，它已不再足够。此外，用户想要根据自己的喜好调整的动态网站，设计师、设计系统和代码维护人员越来越关注色彩管理。
但不是在 2022 年——CSS 有许多新的颜色函数和空间：
- 达到显示器高清色彩功能的色彩。
- 与目标一致的色彩空间，例如感知同质性。
- 显着改变插值结果的渐变颜色空间。
- 颜色可用于组合、对比和帮助您决定在哪个区域工作。
设计系统必须提前计算正确的对比色，并保证调色板足够生动，同时预处理器或 JavaScript 处理劳动密集型任务。
在所有这些颜色功能之后，任务可以完全由浏览器和 CSS 在适当的时候动态地完成。 CSS 可以编排和计算数据可视化颜色，而无需向消费者传输大量 JavaScript 和 CSS。 CSS 也更有能力优雅地处理回退或在使用前检查支持。
@media（动态范围：高）{
.霓虹粉色{
--neon-glow: 颜色(display-p3 1 0 1);
}
}
@supports (color: lab(0% 0 0)) {
.霓虹粉色{
--neon-glow：实验室（150% 160 0）；
}
}
促进（）
色调、白度和黑度缩写为 HWB。鉴于表达颜色所需要的只是一种色调和一定量的白色或黑色来使其变亮或变暗，这似乎是一种对人类友好的方法。将颜色与白色或黑色相结合的艺术家可能会喜欢这种颜色语法的变化。
css
：根 {
--boost-swatch-1: 提升(200 75% 0%);
--boost-swatch-2: 提升(200 50% 25%);
--boost-swatch-3: 提升(200 25% 50%);
--boost-swatch-4: 提升(200 0% 75%);
--boost-swatch-5: 提升(200 0% 90%);
} .swatch:nth-of-type(1) {
背景：var(--hwb-swatch-1);
} .swatch:nth-of-type(2) {
背景：var(--hwb-swatch-2);
} .swatch:nth-of-type(3) {
背景：var（--hwb-swatch-3）；
} .swatch:nth-of-type(4) {
背景：var（--hwb-swatch-4）；
} .swatch:nth-of-type(5) {
背景：var(--hwb-swatch-5);
} * {
box-sizing：边框框；
边距：0；
} html {
块大小：100%；
} 身体 {
最小块大小：100%；
字体系列：system-ui，无衬线；
显示：网格；
}
HTML
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
结果：
使用此颜色函数会产生来自 sRGB 颜色空间的颜色，与 HSL 和 RGB 相同。就 2022 年的新意而言，这并没有给你带来新的色彩，但它可能会让语法和心智模型的粉丝更容易完成一些任务。
2022 年及以后
即使所有这些令人难以置信的功能都在 2022 年实现，仍有许多任务将具有挑战性。下一节将讨论仍需解决的挑战，以及目前正在研究的补救措施。尽管可以通过浏览器标志声明或隐藏它们，但这些方法是实验性的。
从以下部分得出的结论应该令人欣慰的是，许多个人和企业正在寻求对所述问题的答案，而不是它们将在 2023 年提供。
松散类型的自定义属性
存在惊人的 CSS 自定义属性。它们可以将各种项目存储在命名变量中，以后可以扩展、用于计算、共享等。事实上，它们是如此灵活，以至于拥有一些不太灵活的东西会很棒。
考虑以下示例，其中 box-shadow 使用自定义属性作为其值：
box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);
一切正常，直到其中一个属性被修改为 CSS 不允许的值，例如 - x: red。如果甚至没有一个分层变量或设置了错误的值类型，整个阴影就会崩溃。
这里 @财产 进图：当键入-x时，它可以变成一个自定义属性，它是安全的并且有设置边界而不是自由和灵活：
@property --x {
句法： '<length> ';
初始值：0px；
继承：假；
}
现在，红色将被忽略，因为它不是长度>，当 box-shadow 使用 var(-x) 并随后尝试使用 -x:red 时。这表明即使其自定义属性之一被赋予了错误值，阴影仍然有效。它返回到其初始值 0px 而不是失败。
动画
它提供了类型安全以及一些动画机会。由于 CSS 词汇表的灵活性，某些元素（包括渐变）无法进行动画处理。因为 typed CSS 属性可能会在不必要的复杂插值中传达开发人员的目的的浏览器， @财产 在这种情况下很有帮助。从某种意义上说，它有效地限制了可能性的范围，浏览器现在可以为以前不能的样式元素设置动画。
看一下这个演示示例，其中使用径向渐变在覆盖的一部分上创建聚光灯效果。当按下 alt/opt 键时，JavaScript 设置鼠标的 x 和 y 坐标，然后将 focus-size 属性修改为较低的值，例如 25%，以在鼠标位置创建聚光灯焦点圈：
. 焦点效果 {
--焦距：100%；
--mouse-x：中心；
--mouse-y：中心；
蒙版图像：径向渐变（
在 var(--mouse-x) 处画圈 var(--mouse-y),
透明 0%,
透明 var(--focal-size),
黑色 0%
);
}
但是，渐变不能被动画化。为了让浏览器“简单地推断”你希望它们如何动画，它们过于复杂和适应性强。但是使用 @财产 ，可以单独输入单个属性并设置动画，使浏览器轻松理解该想法。
电子游戏中使用这种焦点效果的圆圈是动画的，大小可以从一个大圆圈到一个小圆圈。以下是如何使用 @财产 通过我们的演示，让渐变蒙版在浏览器中动画：
@property --焦点大小{
句法： '<length-percentage> ';
初始值：100%；
继承：假；
}
. 焦点效果 {
--焦距：100%；
--mouse-x：中心；
--mouse-y：中心；
蒙版图像：径向渐变（
在 var(--mouse-x) 处画圈 var(--mouse-y),
透明 0%,
透明 var(--focal-size),
黑色 0%
);
过渡：--focal-size .3s 缓动；
}
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
