每周平台新闻：焦点环、甜甜圈作用域、更多 em 单位和全球隐私控制

在本周的新闻中，Chrome 解决了焦点环问题，我们学习了如何获得“甜甜圈”作用域，全球隐私控制获得了大牌采用，是时候在媒体查询中抛弃像素了，还有一个片段可以防止烦人的表单验证样式。

Chrome 将在点击按钮时停止显示焦点环

Chrome、Edge 和其他基于 Chromium 的浏览器在用户点击或点击 (样式化) 按钮时会显示一个焦点指示器（也称为焦点环）。相比之下，Safari 和 Firefox 在点击或点击按钮时不会显示焦点指示器，而只会在通过键盘聚焦按钮时显示。

一些开发人员发现这种行为 很烦人，并使用各种 解决方法 来防止焦点环在点击或点击按钮时出现。例如，流行的 what-input 库 持续跟踪用户的输入方法（鼠标、键盘或触摸），允许页面专门针对鼠标点击抑制焦点环。

[data-whatintent="mouse"] :focus {
  outline: none;
}

几个月前，Chromium 添加了 CSS :focus-visible 伪类，从而启用了更近期的解决方法。在当前版本的 Chrome 中，点击或点击按钮会调用按钮的 :focus 状态，但不会调用其 :focus-visible 状态。这样，页面可以使用合适的选择器来抑制点击和点击的焦点环，而不会影响键盘用户。

:focus:not(:focus-visible) {
  outline: none;
}

幸运的是，这些解决方法很快将不再需要。Chromium 的用户代理样式表最近 切换 了，从 :focus 到 :focus-visible，并且由于此更改，按钮点击和点击不再调用焦点环。新行为将在下个月发布的 Chrome 90 中首次发布。

增强的 CSS :not() 选择器启用“甜甜圈作用域”

我最近 写道 关于 A:not(B *) 选择器模式，它允许作者选择所有不是 B 元素的后代的 A 元素。这种模式可以扩展到 A B:not(C *) 来创建“甜甜圈作用域”。

例如，选择器 article p:not(blockquote *) 匹配所有作为 <article> 元素的后代但不是 <blockquote> 元素的后代的 <p> 元素。换句话说，它选择文章中的所有段落，除了块引用中的段落。

纽约时报现在支持全球隐私控制

宣布 去年 10 月，全球隐私控制 (GPC) 是一种新的网络隐私信号，旨在具有法律效力。本质上，它是一个 HTTP Sec-GPC: 1 请求标头，它告诉网站用户不希望他们的个人数据被共享或出售。

纽约时报已成为首个支持 GPC 的主要出版商。一些其他出版商，包括华盛顿邮报和 Automattic（WordPress.com），承诺将在“本季度”支持 GPC。

来自 NYT 的隐私页面

时报是否支持全球隐私控制 (GPC)？

是的。当我们在读者浏览器中检测到 GPC 信号，并且适用 GDPR、CCPA 或类似隐私法时，我们会停止与其他公司在线共享读者的个人数据（除了与我们的服务提供商共享）。

em 基于媒体查询的案例

一些浏览器允许用户在浏览器的设置中增加默认字体大小。不幸的是，这种用户偏好对以像素设置字体大小的网站（例如，font-size: 20px）没有影响。部分出于这个原因，一些网站（包括 CSS-Tricks）使用 字体相关单位，例如 em 和 rem，它们确实会响应用户的字体大小偏好。

理想情况下，一个对 font-size 使用字体相关单位的网站也应该在媒体查询中使用 em 值（例如，min-width: 80em 而不是 min-width: 1280px）。否则，网站的响应式布局可能无法按预期工作。

例如，CSS-Tricks 在窄视口中从两列布局切换到一列布局，以防止文章的行变得太短。但是，如果用户将浏览器中的默认字体大小增加到 24px，页面上的文本将变大（应该如此），但页面布局不会改变，导致某些视口宽度下出现极短的行。

如果您想在您的网站上尝试 em 基于媒体查询，有一个 PostCSS 插件，它会自动将 min-width、max-width、min-height 和 max-height 媒体查询从 px 转换为 em。

(来自 Nick Gard)

将 CSS :user-invalid 推向浏览器的最新推动

2017 年，Peter-Paul Koch 发布了一系列关于网络上原生表单验证的 三篇文章。 第一部分 指出了广泛支持的 CSS :invalid 伪类的缺陷

• <input> 元素的有效性在每次击键时都会重新评估，因此表单字段在用户仍在输入值时可能会变为 :invalid。
• 如果表单字段是必需的 (<input required>)，它将在页面加载时立即变为 :invalid。

这两种行为都可能令人困惑（并且 烦人），因此网站不能仅仅依靠 :invalid 选择器来表明用户输入的值无效。但是，有一个选项可以 组合 :invalid 与 :not(:focus) 甚至 :not(:placeholder-shown)，以确保页面的“无效”样式在用户完成输入值并将焦点移至另一个元素之前不会应用于 <input>。

CSS 选择器模块定义了一个 :user-invalid 伪类，它通过仅在用户“与之有重大交互”后才匹配 <input> 来避免 :invalid 的问题。

Firefox 已经通过 :-moz-ui-invalid 伪类支持了此功能 (查看实际效果)。Mozilla 现在 打算 取消此伪类的前缀，并在标准 :user-invalid 名称下发布它。其他浏览器供应商还没有这方面的信号，但已经为该功能创建了 Chromium 和 WebKit 错误。