本周的新闻包括，Firefox 将获得圆角轮廓，Chrome 中的 SVG 动画现在支持 GPU 加速，CSS 中没有物理单位，《纽约时报》的字谜游戏已实现无障碍化，以及 CSS 变量在值被继承之前解析。
让我们一起了解一下最新消息吧！
Firefox 将支持圆角轮廓
自从 2000 年代中期通过 border-radius 属性创建圆角边框成为可能以来，就一直存在让轮廓跟随边框曲线的想法。它被建议给 Mozilla、WebKit 和 Chromium，距今已有十年之久，甚至从 2015 年起就成为了 CSS UI 规范 的一部分。
轮廓的各个部分不需要是矩形。在轮廓跟随边框边缘的范围内，它应该跟随
border-radius曲线。
快进到 2021 年的今天，所有浏览器中的轮廓仍然是矩形，没有例外。
但这种情况终于开始改变了。几周后，Firefox 将 成为 首个支持圆角轮廓的浏览器，这些轮廓会自动跟随边框形状。这也将适用于 Firefox 按钮上的默认焦点轮廓。
请为 Chromium 问题 #81556（需要登录）加星，帮助提高此问题的优先级，以便尽快将圆角轮廓添加到 Chrome。
Chrome 中的 SVG 动画现在支持 GPU 加速
直到最近，在基于 Chromium 的浏览器中，通过 CSS 对 SVG 元素进行动画处理会触发每帧重绘（通常每秒 60 次）。这种持续的重绘会对动画的流畅性和页面本身的性能产生负面影响。
Chrome 的最新版本通过 启用 SVG 动画的硬件加速解决了这个问题。这意味着 SVG 动画会卸载到 GPU，不再在主线程上运行。
切换到 GPU 加速在基于 Chromium 的浏览器中自动使 SVG 动画性能更佳（Firefox 也支持此功能），这对 Web 来说绝对是 好消息。
更多支持屏幕阅读器、渐进增强的 SVG 动画，Canvas 更少，真是太棒了。
CSS 中不能使用真实的物理单位
CSS 定义了六个 物理单位，包括 in（英寸）和 cm（厘米）。每个物理单位都与像素单位（标准单位）保持固定比例。例如，1in 始终等于 96px。在大多数现代屏幕上，此长度并不对应于现实世界中的 1 英寸。
CSS 工作组的常见问题解答页面现在 回答了为什么 CSS 中不能使用真实的物理单位的问题。简而言之，浏览器无法始终确定显示器的确切大小和分辨率（例如投影仪）。对于需要准确的现实世界单位的网站，工作组建议对每个设备进行校准。
创建校准页面，要求用户测量两条线之间的距离（这两条线之间的 CSS 距离，例如
10cm），并输入他们得到的数值。使用此信息找到该屏幕所需的缩放系数（CSS 长度除以用户提供的长度）。
然后，可以将此缩放系数设置为自定义属性，用于计算 CSS 中的准确长度。
html {
--unit-scale: 1.428;
}
.box {
/* 5 real-world centimeters */
width: calc(5cm * var(--unit-scale, 1));
}《纽约时报》的字谜游戏已实现无障碍化
NYT Open 团队 写道，近年来《纽约时报》网站进行了一些改进，使其更具可访问性。该网站使用语义化 HTML（<article>、<nav> 等），增加了重要组件（例如登录和注册）的对比度，以及适应网站付费墙的跳过到内容链接。
此外，游戏团队使每日字谜游戏对键盘和屏幕阅读器用户可访问。字谜游戏以 SVG <rect> 元素网格的形式实现。当用户在字谜游戏中导航时，当前方块的 aria-label 属性（可访问名称）会动态更新，以提供更多上下文。
您可以玩 迷你字谜游戏，无需帐户。尝试使用键盘来解谜。
CSS 变量在值被继承之前解析
Yuan Chuan 最近 分享了一个 CSS 小测验，我并没有答对，因为我不确定 CSS 变量（var() 函数）是在值被继承之前还是之后解析的。我将尝试通过以下示例来解释它的工作原理。
html {
--text-color: var(--main-color, black);
}
footer {
--main-color: brown;
}
p {
color: var(--text-color);
}问题：页脚中的段落的颜色是 black 还是 brown？有两种可能性。要么 (A) 两个自定义属性的声明值被继承到段落中，然后 color 属性解析为 brown，要么 (B) --text-color 属性直接在 <html> 元素中解析为 black，然后此值被继承到段落中并分配给 color 属性。
正确答案是选项 B（颜色为黑色）。CSS 变量是在值被继承之前解析的。在本例中，--text-color 回退到 black，因为 --main-color 在 <html> 元素中不存在。此规则在 CSS 变量模块 中指定。
需要注意的是，自定义属性在计算值时会解析其值中的任何
var()函数，这发生在值被继承之前。
+1 支持圆角轮廓！
“快进到 2021 年的今天，所有浏览器中的轮廓仍然是矩形，没有例外”。
除了 Safari。
是的，我应该说明一下。Safari 的原生焦点轮廓是圆角的，但任何通过
outline属性创建的轮廓都是矩形。这是个问题，因为原生焦点轮廓并不总是很容易看到（如果按钮或周围背景是蓝色的），所以网站可能需要使用自定义轮廓使其更加明显，而该轮廓将是矩形。
我想知道轮廓动画在 Firefox 上是否仍然存在问题。 https://bugzilla.mozilla.org/show_bug.cgi?id=1305976