每周平台新闻：Webkit Autofill，使用光标指针，延迟自动播放视频

本周的Web开发新闻涵盖了各种浏览器功能的重大更新。关键亮点包括Webkit自动填充的标准化，指针光标的扩展用途以及用于自动播放视频的浏览器优化。让我们深入研究细节。

CSS :-webkit-autofill成为标准

多年来，大多数现代浏览器（不包括Firefox）支持:-webkit-autofill css伪级用于造型浏览器形式字段。这使开发人员可以在视觉上自定义自动化输入并通过JavaScript检测它们：

令自动填充= document.queryselectorall（“： -  webkit-autofill”）;

尽管仍然缺乏标准的汽车事件，但开发人员可以利用input事件并进行检查:-webkit-autofill 。

HTML标准现在正式包括:autofill （以:-webkit-autofill为别名），将此功能扩展到所有合规的浏览器。 Firefox 86预计将很快实施。

:autofill和:-webkit-autofill pseudo-classes目标元素由浏览器自动填充，如果用户修改该字段，请停止应用。

CSS网格用于按钮和链接间距

乔什·W·科莫（Josh W.他指出将保证金分配给图标或文本的歧义。

CSS网格提供了出色的解决方案。网格布局不使用非破坏空间（例如在CSS-Tricks的新闻通讯中），通过gap属性提供了更精确的间距控制。

将pointer光标扩展到链接之外

CSS基本用户界面模块定义了cursor属性。虽然规范指出了cursor: pointer （手动光标）表示链接，并且浏览器默认将其应用于链接和箭头光标到按钮，但大多数网站（包括Wikipedia）扩展了cursor: pointer指向其他交互式元素（例如按钮和复选框），例如以获得改进的用户体验。这<summary></summary>元素（用于<details></details>）是另一个适合指针光标的候选人。

自动播放视频优化：延迟直到可见

为了减少与GIF相比，浏览器减轻了自动播放限制，鼓励使用视频。但是，当元素在屏幕外效率低下时，不必要的视频播放效率低下。现在，大多数主要浏览器（Firefox除外）现在会自动暂停<video autoplay="" muted=""></video>元素直到在视口上可见，以消除与Intersection Observer手动处理的需求。

<video autoplay=""></video>元素仅在屏幕上可见一次（例如，滚动到视图中，通过CSS揭示或添加到DOM中）。

（通过Zach Leatherman）

Chrome的新@font-face描述符

跨浏览器和操作系统之间的字体指标不一致可能导致垂直文本未对准，尤其是在大型标题中引人注目，并且在字体交换过程中的布局变化。 Chrome介绍了三个新的@font-face描述符，以解决以下方面：

• ascent-override （高度高于基线）
• descent-override （基线低于基线的深度）
• line-gap-override

 @font-face {
  字体家庭：Roboto;
  /* Merriweather Sans具有125.875px的上升 
   *和35px下降，以128px字体尺寸。
   */
  Ascent-Override：Calc（125.875 / 128 * 100％）;
  降落以上：计算（35 /128 * 100％）;
  SRC：局部（Roboto-regular）;
}

覆盖这些指标可确保在不同字体上保持一致的布局，从而防止布局变化。

以上是每周平台新闻：Webkit Autofill，使用光标指针，延迟自动播放视频的详细内容。更多信息请关注PHP中文网其他相关文章！