Chrome 111 beta发布！新增6大CSS，8大Web API功能？

1.Canary、Dev、Beta、正式版区分

除去开源的 Chromium，Chrome 一共有Canary、Dev、Beta 以及正式版 Stable。虽然 Chrome 这几个版本名称各不相同，但都沿用了相同的版本号，只是更新早晚的区别。

Chrome Canary

Chrome Canary 是更新速度最快的 Chrome 版本，几乎每天更新。相当于支持自动更新、同时添加谷歌自家服务、商业闭源插件的 Chromium，功能更加强大。

Canary是功能、代码最先进的 Chrome 版本，但是因为测试不全面，极不稳定。谷歌将其设定为可独立安装、与其他版本共存，因此适合进阶用户安装备用，尝鲜最新功能。

Chrome Dev

Chrome Dev 最初是以 Chromium 为基础、更新最快的 Chrome，后来则被 Canary 取代。Dev 版每周更新一次，虽然不太稳定，但可勉强满足日常使用，适合 Web 开发者用来测试新功能和网页。

Chrome Beta

Chrome Beta 以 Dev 为基础，每月更新一次。它是正式发布前的最后测试版本，所有功能都已在前面几个版本中得到测试、修改，已经十分稳定，普通用户也可日常使用。

Chrome Stable

Chrome Stable 就是正式版，它以 Beta 为基础，几个月更新一次。由于所有的功能都已经过数个月反复测试，是稳定性最高的 Chrome 版本。

2.Chrome 111 Beta发布

Chrome 111 Beta支持新的 css 颜色类型和颜色空间、CSS 三角函数和 View Transitions api。 Chrome 111 于 2023 年 2 月 9 日开始测试。可以在桌面版 Google.com 或 Android 版 Google Play 商店中下载最新版本。

2.1 支持新的 CSS 颜色类型和空间

CSS Color Level 4 中描述的所有功能现已启用。 包括四种与设备无关的颜色类型（lab、Oklab、lch 和 Oklch）、color() 函数以及用于渐变和动画的用户定义颜色空间。

color-mix() 函数

CSS Color 5 的 color-mix() 函数已支持。此功能可以在任何支持的色彩空间中将一定百分比的一种颜色混合到另一种颜色中。以下示例将 10% 的蓝色混合到 SRGB 中的白色中。

.item { 
  background-color: color-mix(in srgb, blue 10%, white);
}

CSS 选择器 4 伪类 :nth-child(an + b of S)

扩展 :nth-child(an + b) 和 :nth-last-child() 选择器。 例如，:nth-child(3 of .c) 是给定父级下的第三个 .c。

:nth-child(2): 选中第二个子元素
:nth-child(2n): 选中偶数子元素 (2nd, 4th, 6th, 8th, and so on).
:nth-child(2n+1): 选中奇数子元素 (1st, 3rd, 5th, 7th, and so on).
:nth-child(5n+1): 选中1st (=(5×0)+1), 5th (=(5×1)+1), 10th (=(5×2)+1), …child.
:nth-child(5n+2): 选中 2nd (=(5×0)+2), 6th (=(5×1)+2), 11th (=(5×2)+2), … child.

CSS 根字体单位

将根字体单位：ex、ch、ic 和 lh 添加到 rem 的现有根字体单位。

CSS 三角函数

三角函数 sin()、cos()、tan()、asin()、acos()、atan()、atan2() 已添加到 CSS 数学表达式中。

selector { 
	property: functional-notation( [argument]? [, argument]! ); 
}

语法以函数符号的名称开头，后跟左括号（接下来是符号参数，函数以右括号结束）。

函数可以接受多个参数，其格式类似于 CSS 属性值。 空格是允许的，但它们在括号内是可选的。 在一些函数符号中，多个参数用逗号分隔，而其他的则使用空格。

/* Single values */ 
transform: rotate(asin(-0.2)); 
transform: rotate(asin(2 * 0.125)); 
/* Other values */ 
transform: rotate(asin(pi / 5)); 
transform: rotate(asin(e / 3));

CSS 自定义属性的样式容器查询

将 style() 函数添加到 @container 规则，以便可以根据祖先元素的自定义属性的计算值应用样式。

main { container: inline-size / name; } 
@container name (max-width: 800px) { 
   span { color: gray; } 
}

baseline-source 属性

允许 web 开发人员指定行内级框是否应使用第一个或最后一个基线在行框内进行对齐。目前该属性也就chrome自己支持。

2.2 Web APIs新增

窗口管理权限和权限策略字符串

Chrome 111 添加了窗口管理作为窗口放置权限和权限策略字符串的别名。 这是通过最终弃用和删除窗口放置来重命名字符串的更大努力的一部分。 随着 Window Management API 随的发展，术语更改提高了描述符的寿命。

Media Session API

演示幻灯片操作，将上一张幻灯片previousslide和下一张幻灯片nextslide操作添加到现有的媒体会话 API。

Resizable ArrayBuffer 和growable SharedArrayBuffer

扩展 ArrayBuffer 构造函数以获取额外的最大长度，从而允许增长和缩小缓冲区。 类似地，SharedArrayBuffer 被扩展为采用允许就地增长的额外最大长度。

referrer policy key

扩展了推测规则语法，允许开发人员指定引用策略以用于推测规则触发的推测请求。 这也重新引入了“足够严格的推荐人政策（sufficiently-strict referrer policy）”要求。

Streaming declarative shadow dom

通过在开始而不是结束的模板标签上附加影子根来增加对流的支持。

const shadowOpen = elementRef.attachShadow({ mode: "open" }); 
const shadowClosed = elementRef.attachShadow({ mode: "closed" });

View Transitions API

通过快照视图并允许 DOM 更改而状态之间没有任何重叠，可以在单页应用程序 (SPA) 中创建完美的过渡。 使用视图过渡来构建自定义过渡，或使用简单的淡入淡出默认值来改善用户体验。

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)); }

WebRTC 可扩展视频编码

此扩展定义了一种标准方法，用于在传出的 WebRTC 视频轨道上选择可能的可伸缩视频编码 (SVC) 配置。

WebXR enabledFeatures 属性

返回由 XRSessionInit 指定的为此 XRSession 启用的功能集以及给定模式和功能的规范所需的隐含功能。

链接: https://www.fly63.com/article/detial/12470