平台新闻：圆形轮廓，GPU加速SVG动画，如何解决CSS变量

在本周的新闻中，Firefox的概述被绕线，SVG动画现在已在Chrome中加速了，CSS中没有物理单位，纽约时报填字游戏可访问，并且在该值继承之前解决了CSS变量。

让我们跳入新闻！

圆形轮廓即将到达Firefox

自从2000年代中期通过Border-Radius物业创建圆形边界以来，要遵循边界曲线的大纲的想法就一直存在。十年前，它建议向Mozilla，Webkit和Chromium提出，甚至是自2015年以来CSS UI规范的一部分：

大纲的部分不需要矩形。在大纲遵循边界边缘的范围内，它应该遵循边界拉迪乌斯曲线。

在2021年的今天，在每个浏览器中仍然是矩形，毫无例外：

但这终于开始改变了。几周后，Firefox将成为第一个自动遵循边框形状的圆形轮廓的浏览器。这也适用于Firefox对按钮的默认焦点概述。

请星级铬发行＃81556（登录要求），以帮助优先考虑此错误，并尽快将圆形轮廓带到Chrome。

SVG动画现在已在Chrome中加速了

直到最近，通过CSS对SVG元素进行动画元素将在基于铬的浏览器中的每一帧（通常每秒60次）触发重新粉刷。这种持续的重新粉刷会对动画的平稳性和页面本身的性能产生负面影响。

Chrome的最新版本通过为SVG动画启用硬件加速而消除了此性能问题。这意味着SVG动画被卸载到GPU，并且不再在主线程上运行。

切换到GPU加速器会自动使SVG动画在基于铬的浏览器中更具性能（Firefox也可以做到这一点），这对于Web来说绝对是个好消息：

Hooray，可提供更多屏幕阅读器访问，逐渐增强的SVG动画和更少的画布。

CSS中不能有真实的物理单位

CSS定义了六个物理单元，包括（英寸）和CM（厘米）。每个物理单元都与像素单元的固定比例，即规范单元。例如，1英寸始终是96px。在大多数现代屏幕上，此长度不对应于1个现实世界英寸。

CSS工作组的FAQ页面现在回答了一个问题，为什么CSS中不能有实际的物理单位。简而言之，浏览器不能总是确定显示器的确切大小和分辨率（想想投影仪）。对于需要准确现实世界单元的网站，工作组建议人均校准：

有一个校准页面，您要求用户测量两行相距距离（例如10厘米）的两条线之间的距离，并输入其获得的值。使用它来找到该屏幕所需的缩放系数（CSS长度除以用户提供的长度）。

然后可以将此缩放系数设置为自定义属性，并用于计算CSS中的准确长度：

 html {
   - 单位规模：1.428;
}

。盒子 {
  / * 5实际厘米 */
  宽度：计算（5cm * var（ - 单位尺度，1））;
}

屏幕阅读器用户可以访问时代填字游戏

NYT Open团队写了有关《纽约时报》网站的一些改进，这些改进使其近年来更容易访问。该网站使用语义HTML（，等），对重要组件（例如，登录和注册）的对比度增加，以及适合该网站付费工作室的跳动到容器链接。

此外，游戏团队使键盘和屏幕阅读器用户可以访问每日填字游戏。该填字游戏被实现为SVG 元素的网格。当用户浏览拼图时，当前广场的ARIA-LABEL属性（可访问名称）会动态更新以提供其他上下文。

您可以在没有帐户的情况下播放迷你填字游戏。尝试用键盘解决难题。

在继承该值之前，请解决CSS变量

Yuan Chuan最近分享了我没有正确回答的小CSS测验，因为我不确定CSS变量（var（）函数）是否在继承该值之前或之后解决。我将尝试解释以下示例的工作方式：

 html {
  -Text-Color：var（ - 主彩色，黑色）;
}

页脚 {
   - 浅色：棕色；
}

p {
  颜色：var（ - 文本色）;
}

问题：页脚黑色还是棕色的段落的颜色？有两种可能性。要么（a）两个自定义属性的声明值均继承为段落，然后颜色属性解析为棕色，或（b） - text-color属性在元素上直接解决到黑色，然后将此值继承为段落并分配给颜色属性。

正确答案是选项B（颜色为黑色）。在继承该值之前，请解决CSS变量。在这种情况下，-Text-Color落后于黑色，因为 - 元素上不存在 - 颜色。该规则在CSS变量模块中指定：

重要的是要注意，自定义属性在计算值时间内解决其值中的任何var（）函数，该函数在该值继承之前发生。

以上是平台新闻：圆形轮廓，GPU加速SVG动画，如何解决CSS变量的详细内容。更多信息请关注PHP中文网其他相关文章！