每周平台新聞：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中文網其他相關文章！