以下是您有必要知道的信息:
- 使用 View Transitions API 在单页应用中创建精美的转场效果。
- 借助对 CSS 颜色级别 4 的支持,让颜色更上一层楼。
- 在样式面板中探索新工具,充分利用新的颜色功能。
- 还有许多更多内容。
我是 Adriana Jara。我们来深入了解下,看看 Chrome 111 会为开发者带来哪些新变化。
View Transitions API。
在网页上创建平滑过渡是一项复杂的任务。此处的 View Transitions API 通过拍摄视图快照并允许 DOM 在不重叠的状态之间发生重叠,从而简化了精美过渡的创建过程。
默认的视图过渡是淡入淡出,以下代码段实现了这种体验。
function spaNavigate(data) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow(data);
return;
}
// With a transition:
document.startViewTransition(() => updateTheDOMSomehow(data));
}
当调用 .startViewTransition()
时,该 API 会捕获页面的当前状态。
完成后,系统会调用传递给 .startViewTransition()
的 callback
。这就是 DOM 发生变化的地方。然后,该 API 会捕获网页的新状态。
请注意,该 API 是针对单页应用 (SPA) 发布的,但也在实现对其他模式的支持。
有关此 API 的许多详细信息,请参阅我们包含示例和详细信息的文章了解详情,或者浏览在 MDN 上查看转换文档。
CSS 颜色级别 4。
使用 CSS 颜色级别 4,CSS 现在支持高清显示,指定高清色域的颜色,同时提供专用颜色空间。
简而言之,这意味着多出 50% 的颜色可供选择!你以为 1600 万种颜色听起来不错啊。我也想。
该实现包含 color()
函数;该函数可用于任何使用 R、G 和 B 通道指定颜色的颜色空间。color()
首先接受颜色空间参数,然后接受一系列 RGB 通道值,以及一些 alpha 值(可选)。
以下是将颜色函数用于不同颜色空间的一些示例。
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
如需更多文档,请参阅这篇文章,了解如何通过 CSS 充分利用高清颜色。
新的颜色开发者工具。
Devtools 的新功能支持 CSS 颜色级别 4 规范。
Styles 窗格现在支持规范中列出的 12 个新颜色空间和 7 个新色域。以下是使用 color()、lch()、oklab() 和 color-mix() 定义 CSS 颜色的示例。
使用 color-mix()
(支持将一定比例的某种颜色混合到另一种颜色)时,您可以在 Computed 窗格中查看最终颜色输出
此外,颜色选择器还支持具有更多功能的所有新颜色空间。例如,点击颜色样本(display-p3 1 0 1)。还添加了色域边界线,用于区分 sRGB 和 display-p3 色域,以便更清楚地了解所选颜色的色域。
颜色选择器还支持在颜色格式之间转换颜色。
如需详细了解如何调试颜色以及开发者工具中的其他新功能,请参阅这篇博文。
还有更多其他奖励!
当然还有许多其他功能。
- CSS 添加了三角函数、额外的根字体单位,并扩展了第 n 个子级伪选择器。
- Document Picture in Picture API 目前处于源试用阶段
previousslide
和nextslide
操作现在是 Media Session API 的一部分。点击此处查看演示。
深入阅读
这里仅介绍一些重要的亮点。如需了解 Chrome 111 中的其他变化,请点击以下链接。
- Chrome 开发者工具的新变化 (111)
- Chrome 111 弃用和移除
- Chrome 版本 111 的 ChromeStatus.com 更新
- Chromium 源代码库更改列表
- Chrome 发布日历
订阅
如需随时了解最新动态,请订阅 Chrome Developers YouTube 频道,每当我们发布新视频时,您都会收到电子邮件通知。
我是 Adriana Jara