平台新闻：支持对比度偏好、MathML、:is() 和 CSS 背景初始值

在本周的综述中，prefers-contrast 在 Safari 中上线，MathML 受到关注，:is() 实际上相当宽容，更多与 ADA 相关的诉讼，CSS 背景属性的不一致初始值可能导致意外的——但有点酷炫的——图案。

prefers-contrast: more 媒体查询在 Safari 预览版中受支持

继 2017 年的 prefers-reduced-motion、2019 年的 prefers-color-scheme 和 2020 年的 forced-colors 之后，第四个 用户偏好媒体特性 正在进入浏览器。CSS prefers-contrast: more 媒体查询现在已在 Safari 预览版中 受支持。此特性将允许网站尊重用户对提高对比度的偏好。

.pricing-info {
  color: #86868b; /* contrast ratio 3.5:1 */
}

@media (prefers-contrast: more) {
  .pricing-info {
    color: #535283; /* contrast ratio 7:1 */
  }
}

让数学成为网络上的头等公民

W3C 在 90 年代中后期开发的最早规范之一是一种用于在网络上显示数学符号的标记语言，称为 MathML。此语言目前在 Firefox 和 Safari 中 受支持。Chrome 的实现已于 2013 年 移除，原因是“涉及安全、性能和互联网上使用率低的问题”。

如果您使用的是 Chrome 或 Edge，请在 about:flags 页面上启用“实验性 Web 平台功能”以查看演示。

人们正在努力将 MathML 正确集成到 Web 平台中，并以可互操作的方式将其引入所有浏览器。Igalia 自 2019 年以来 一直在为 Chromium 开发 MathML 实现。新的 MathML Core 1 级 规范是 MathML 3（2014）的 基本子集，“最适合浏览器实现”。如果获得 W3C 批准，新的 数学工作组 将致力于改进 MathML 的可访问性和可搜索性。

数学工作组的使命是促进数学在网络上的融入，使其成为网络上的头等公民，能够良好显示、可访问且可搜索。

CSS :is() 升级选择器列表使其变得宽容

新的 CSS :is() 和 :where() 伪类现在在 Chrome、Safari 和 Firefox 中受支持。除了它们的 标准用例（减少重复并保持低特异性）之外，这些伪类还可以用来使选择器列表“宽容”。

出于遗留原因，选择器列表的一般行为是，如果列表中的任何选择器无法解析[…]整个选择器列表将变为无效。这可能使编写使用新选择器并在旧版用户代理中仍能正确工作的 CSS 变得困难。

换句话说，“如果选择器的任何部分无效，则会使整个选择器无效”。但是，将选择器列表包装在 :is() 中会使其变得宽容：不支持的选择器将被简单地忽略，但其余选择器仍将匹配。

不幸的是，伪元素在 :is() 中不起作用（尽管这可能 将来会改变），因此目前无法将两个供应商前缀的伪元素转换为宽容的选择器列表以 避免重复样式。

/* One unsupported selector invalidates the entire list */
::-webkit-slider-runnable-track, ::-moz-range-track {
  background: red;
}

/* Pseudo-elements do not work inside :is() */
:is(::-webkit-slider-runnable-track, ::-moz-range-track) {
  background: red;
}

/* Thus, the styles must unfortunately be repeated */
::-webkit-slider-runnable-track {
  background: red;
}
::-moz-range-track {
  background: red;
}

戴尔和卡夫亨氏因网站无障碍问题而被起诉

越来越多的美国企业因其网站的可访问性问题而面临诉讼。最近，科技公司戴尔被 起诉，原因是一位视障人士无法使用 JAWS 和 VoiceOver 屏幕阅读器浏览戴尔的网站和在线商店。

被告未能有效地传达其产品和服务的信息，因为 屏幕阅读器辅助工具无法访问数字平台上的重要内容。[…]数字平台使用视觉提示来传达内容和其他信息。不幸的是，屏幕阅读器无法解释这些提示并将其代表的信息传达给视障人士。

今年早些时候，卡夫亨氏食品公司因未能遵守其一个网站上的 Web 内容可访问性指南 而被 起诉。投诉称，该网站未声明语言（lang 属性）并为其图像链接提供可访问的标签，等等。

在美国，美国残疾人法案 (ADA) 适用于 网站，这意味着如果其网站无法访问，人们可以起诉零售商。根据 Deque Systems（axe 的制造商）的首席执行官的说法，最近基于 Web 的 ADA 诉讼的增加趋势可以 归因于 缺乏一项能够提供具体合规要求的单一总体法规。

background-clip 和 background-origin 具有不同的初始值

默认情况下，CSS 背景绘制在元素的边框框内（background-clip: border-box），但相对于元素的内边距框进行定位（background-origin: padding-box）。如果元素的边框是半透明或点线/虚线，则此不一致会导致 意外的图案。

.box {
  /* semi-transparent border */
  border: 20px solid rgba(255, 255, 255, 0.25);

  /* background gradient */
  background: conic-gradient(
    from 45deg at bottom left,
    deeppink,
    rebeccapurple
  );
}

由于初始值不同，上图中的背景渐变在半透明边框下的所有侧面重复为平铺图像。在这种情况下，相对于边框框定位背景（background-origin: border-box）更有意义。