毎週のプラットフォームニュース：フォーカスリング、ドーナツスコープ、その他のEMユニット、グローバルプライバシーコントロール

今週のWeb Development Newsは、さまざまなプラットフォームでの重要な更新をカバーしています。重要なハイライトには、Chromeのフォーカスリングの取り扱い、CSSの強化された機能:not()セレクター、グローバルプライバシー管理（GPC）の主要な採用、およびEMベースのメディアクエリに対する説得力のある引数が含まれます。また、フォーム検証スタイリングを改善するためのCSSソリューションについても検討します。

Chromeのフォーカスリングの動作は変化します

Chrome、Edge、およびその他のクロムベースのブラウザは、現在、ボタンクリックにフォーカスリングを表示しています。これは、キーボードナビゲーションを使用する場合にのみフォーカスリングを表示するSafariとFirefoxとは異なります。開発者は、 data-whatintentおよび:focus-visibleを使用してこの動作を管理できます。ただし、Chrome 90は、ユーザーエージェントStyleSheetを優先順位付けすることにより、これらの回避策の必要性を排除します:focus-visible 、したがって、キーボードユーザーのために保存しながら、クリックとタップのフォーカスリングを抑制します。

「ドーナツスコープ」選択のために:not() CSSを活用しません

A:not(B *)セレクターパターンを使用すると、 Bから派生していないすべてのAを選択できます。これをAB:not(C *) 「ドーナツスコープ」を作成し、特定のコンテキスト内で要素の正確な選択を可能にします。たとえば、 article p:not(blockquote *)記事内のすべての段落を選択しますが、内部のブロッククォートを除く。

グローバルなプライバシーコントロールは牽引力を獲得します

Global Privacy Control（GPC）、 Sec-GPC: 1ヘッダーを使用した法的強制力のあるプライバシー信号、データ共有または販売に対するユーザーの好みを信号します。 New York Timesは、GPCを完全にサポートした最初の主要出版社であり、 Washington PostやAutomatticはまもなくサポートを誓約しているような他の出版社です。 GPC信号が検出されると、準拠したサイトが適用されるユーザーデータ（サービスプロバイダーを除く）の共有を停止します。

EMベースのメディアクエリの利点

Pixelベースのフォントサイズ（ font-size: 20px ）を使用したWebサイトは、ブラウザレベルのフォントサイズの調整に反応しません。 emおよびremユニットを使用すると、ユーザーの好みに対する応答性が可能になります。一貫した動作のために、メディアクエリはemユニットも使用する必要があります（たとえば、 min-width: 80em ）。これにより、ユーザーがデフォルトのフォントサイズを調整した場合でもレスポンシブレイアウトが正しく適応し、マルチコラムレイアウトの過度に短いラインなどの問題を防ぎます。 PostCSSプラグインは、メディアクエリのpxからemへの変換を簡素化します。

フォーム検証スタイリングの改善:user-invalid

標準CSS :invalid擬似クラスには、フォーム検証に制限があります。すべてのキーストロークでトリガーし、すぐに必要なフィールドのページロードでトリガーし、混乱するユーザーエクスペリエンスを引き起こす可能性があります。 The： :-moz-ui-invalidとしてFirefoxで既にサポートされている:user-invalid擬似クラスは、重要なユーザーインタラクション後にのみ適用することにより、これらの問題に対処します。標準化するための取り組みが進行中です:user-invalid 。

以上が毎週のプラットフォームニュース：フォーカスリング、ドーナツスコープ、その他のEMユニット、グローバルプライバシーコントロールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。