毎週のプラットフォームニュース：カーソルポインターを使用し、自動再生ビデオの遅延、WebKitオートフィル

今週のWeb Development Newsは、さまざまなブラウザ機能にわたる重要な更新をカバーしています。重要なハイライトには、WebKitのオートフィルの標準化、ポインターカーソルの拡張使用、および自動再生ビデオのブラウザの最適化が含まれます。詳細を掘り下げましょう。

CSS :-webkit-autofill標準になります

何年もの間、ほとんどの最新のブラウザ（Firefoxを除く）は、ブラウザー - オートフィルドフォームフィールドのために:-webkit-autofill css擬似クラスをサポートしていました。これにより、開発者は自動化された入力を視覚的にカスタマイズし、JavaScriptを介してそれらを検出することができました。

 let autofilled = document.queryselectorall（ "： -  webkit-autofill"）;

標準的なオートフィルイベントはまだ不足していますが、開発者はinputイベントを活用して、 :-webkit-autofillに対してチェックすることができます。

HTML標準には、公式には次のものが含まれています:autofill （with :-webkit-autofill as airas）、この機能をすべての準拠したブラウザーに拡張します。 Firefox 86は、これをまもなく実装する予定です。

:autofill and :-webkit-autofill pseudoクラスは、ブラウザによってオートフォール化されたターゲット要素であり、ユーザーがフィールドを変更した場合に適用を停止します。

ボタンとリンク間隔のCSSグリッド

Josh W. Comeauの記事「Spacer Gifsを持ち帰りましょう！」、CSSマージンのみに依存することに反対するボタンコンポーネントの間隔に専用のスペーサー要素を使用することを支持しています。彼は、アイコンまたはテキストのいずれかにマージンを割り当てることのあいまいさを指摘しています。

CSSグリッドは優れたソリューションを提供します。 （CSS-Tricksのニュースレターなど）非壊れたスペースを使用する代わりに、グリッドレイアウトは、 gapプロパティを介してより正確な間隔制御を提供します。

リンクを超えてpointerカーソルを拡張します

CSS Basicユーザーインターフェイスモジュールは、 cursorプロパティを定義します。仕様では、 cursor: pointer （ハンドカーソル）はリンクを示し、ブラウザはリンクにデフォルトで適用し、矢印カーソルをボタンに適用することを指定していますが、ほとんどのWebサイト（ウィキペディアを含む）がcursor: pointerを拡張します。<summary></summary>要素（for<details></details> ）ポインターカーソルに適した候補です。

Autoplay Video Optimization：表示されるまで遅延します

GIFと比較してエネルギー消費を削減するために、ブラウザは自動展開の制限を緩和し、ビデオの使用を促進しました。ただし、要素が画面外であるときの不必要なビデオ再生は非効率的です。ほとんどの主要なブラウザ（Firefoxを除く）は、自動的に一時停止します<video autoplay="" muted=""></video>ビューポートに表示されるまで要素があり、 Intersection Observerとの手動処理の必要性を排除します。

<video autoplay=""></video>要素は、画面上で一度見える一度にのみ再生されます（例えば、ビューにスクロールしたり、CSSを介して明らかになったり、DOMに追加されたりします）。

（ザック・レザーマン経由）

Chromeの新しい@font-face記述子

ブラウザとオペレーティングシステム全体の一貫性のないフォントメトリックは、特に大きな見出しで顕著な垂直テキストの不整合につながり、フォントスワッピング中のレイアウトシフトにつながる可能性があります。 Chromeは、これに対処するために3つの新しい@font-face記述子を導入しました。

• ascent-override （ベースラインの上の高さ）
• descent-override （ベースラインの下の深さ）
• line-gap-override

 @font-face {
  フォントファミリー：ロボット;
  /* Merriweather Sansには125.875pxのAscentがあります 
   *および128pxフォントサイズの35px降下。
   */
  ascent-override：calc（125.875 / 128 * 100％）;
  Descent-override：calc（35 /128 * 100％）;
  SRC：Local（Roboto-Regular）;
}

これらのメトリックをオーバーライドすると、さまざまなフォント間で一貫したレイアウトが保証され、レイアウトシフトが防止されます。

以上が毎週のプラットフォームニュース：カーソルポインターを使用し、自動再生ビデオの遅延、WebKitオートフィルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。