在本周的综述中，WebKit 的前缀自动填充成为标准功能，指针光标不仅用于链接，而且浏览器也纷纷加入延迟自动播放视频（直到视频出现在视野中）的行列…… 还有更多！让我们直接进入正题。
CSS ::-webkit-autofill 已成为标准功能
Chrome、Safari 以及几乎所有其他现代 Web 浏览器（除了 Firefox，稍后会详细介绍）多年来一直支持 CSS :-webkit-autofill 伪类。此选择器匹配浏览器自动填充的表单字段。网站可以使用此功能在 CSS 中设置自动填充字段的样式（有一些限制）并在 JavaScript 中检测此类字段。
let autofilled = document.querySelectorAll(":-webkit-autofill");目前尚不存在当浏览器自动填充表单字段时触发的标准 autocomplete 或 autofill 事件，但您可以在 Web 表单上 侦听 input 事件，然后检查其任何字段是否与 :-webkit-autofill 选择器匹配。
HTML 标准现已 标准化此功能，方法是将 :autofill（以及 :-webkit-autofill 作为别名）添加到 伪类列表中，这些伪类匹配 HTML 元素。此伪类也将 添加到 CSS 选择器模块中。
:autofill和:-webkit-autofill伪类必须匹配用户代理已自动填充的<input>元素。如果用户编辑了自动填充的字段，则这些伪类必须停止匹配。
标准化之后，这两个伪类都已在 Firefox 中 实现，预计将于本月晚些时候在 Firefox 86 中发布。
您可以使用 CSS Grid 在按钮和链接中定义间距
在文章“让我们把间隔 GIF 带回来！”中，Josh W. Comeau 论证了使用“间隔”<span> 元素而不是简单的 CSS 边距来定义按钮组件的图标和文本之间的间距。
在我们的主页按钮示例中，边距应该放在后退箭头还是文本上？对我来说，感觉这两个元素都不应该“拥有”这个空间。这是一个不同的布局问题。
CSS Grid 是此类间隔元素的替代方案。例如，CSS-Tricks 时事通讯部分中的“链接到问题”链接包含两个不换行空格（ ）以增加表情符号字符和文本之间的间距，但链接可以改为简单的网格布局，以通过 gap 属性更精细地控制间距。
网站一致认为指针光标不只是用于链接
CSS 基本用户界面模块定义了 CSS cursor 属性，它允许网站更改用户将鼠标悬停在特定元素上时显示的光标类型。规范对该属性的 pointer 值有如下说明
光标是一个指示链接的指针。 … 用户代理必须将
cursor: pointer应用于超链接。… 作者应在链接上使用pointer，并且可以在其他交互式元素上使用。
因此，浏览器在链接上显示 pointer 光标（呈现为手形），在按钮上显示 default 光标（呈现为箭头形）。但是，大多数网站（包括维基百科）不同意此默认样式，并将 cursor: pointer 也应用于其他交互式元素，例如按钮和复选框。
另一个适合使用 pointer 光标的交互式元素是 <summary> 元素（用于打开和关闭父 <details> 元素的“切换按钮”）。
浏览器延迟 autoplay 直到视频进入视野
与现代视频格式相比，动画 GIF 图像的“能耗高出两倍”。出于这个原因，浏览器（在一段时间前）放宽了其视频自动播放策略，以鼓励网站从 GIF 切换到静音或静默视频。
<!-- a basic re-implementation of a GIF using <video> -->
<video autoplay loop muted playsinline src="meme.mp4"></video>如果您使用的是 <video muted autoplay>，请不要担心在这些视频不再在视口中可见时暂停它们（例如，使用 Intersection Observer）。所有主要浏览器（除了 Firefox）默认情况下已经执行此 优化
<video autoplay>元素仅在屏幕上可见时才会开始播放，例如当它们滚动到视口中、通过 CSS 变得可见以及插入 DOM 时。
Chrome 引入了三个新的 @font-face 描述符
即使渲染相同的字体，不同的浏览器和操作系统有时也会使用 不同的字体度量。这些差异会影响文本的垂直位置，这在 大型标题上尤其明显。
类似地，网页字体与其后备字体的不同字体度量可能会在页面加载期间交换字体时导致布局偏移。
为了帮助网站避免布局偏移并创建可互操作的文本布局，Chrome 最近 添加了以下三个新的 CSS @font-face 描述符，用于覆盖字体的 默认度量
ascent-override（升部是基线上方的高度）descent-override（降部是基线下方的深度）line-gap-override
@font-face {
font-family: Roboto;
/* Merriweather Sans has 125.875px ascent
* and 35px descent at 128px font size.
*/
ascent-override: calc(125.875 / 128 * 100%);
descent-override: calc(35 / 128 * 100%);
src: local(Roboto-Regular);
}以下视频显示了如何覆盖后备字体（Roboto）的升部和降部度量以匹配网页字体（Merriweather Sans）的相同度量，从而在这些字体之间交换时避免布局偏移。