每周平台新聞：聚焦戒指，甜甜圈範圍，更多EM單位和全球隱私控制

本週的Web開發新聞涵蓋了各個平台之間的重大更新。關鍵重點包括Chrome對焦點戒指的處理，CSS的增強功能:not()選擇器，主要採用全球隱私控制（GPC）以及對基於EM的媒體查詢的令人信服的論點。我們還探索了CSS解決方案，以改善形式驗證樣式。

Chrome的重點環行為改變

Chrome，Edge和其他基於鉻的瀏覽器當前在按鈕點擊上顯示聚焦環。這與Safari和Firefox不同，這僅在使用鍵盤導航時顯示聚焦環。開發人員已使用data-whatintent和:focus-visible來管理此行為。但是，Chrome 90將通過更改其用戶代理樣式表的優先級來消除對這些解決方法的需求:focus-visible ，從而在為鍵盤用戶保存時抑制了對點擊和TAPS的焦點。

利用CSS :not()用於“甜甜圈範圍”選擇

A:not(B *)選擇器模式允許選擇所有A未從B下降。將其擴展到AB:not(C *)創建一個“甜甜圈範圍”，可以在特定上下文中精確選擇元素，不包括嵌套元素中的元素。例如， article p:not(blockquote *)選擇文章中的所有段落，不包括塊內部的段落。

全球隱私控制獲得牽引力

Global隱私控制（GPC）是使用Sec-GPC: 1標頭的合法可執行隱私信號，用戶偏好與數據共享或銷售有關。 《紐約時報》是第一個完全支持GPC的主要發行商，其他人很快就會與《華盛頓郵報》和《汽車競爭》提供支持。當檢測到GPC信號時，在適用相關隱私法的情況下，合規站點將停止共享用戶數據（不包括服務提供商）。

基於EM的媒體查詢的優勢

使用基於像素的字體尺寸（ font-size: 20px ）的網站對瀏覽器級字體尺寸調整無反應。使用em和rem單元可以響應用戶偏好。對於一致的行為，媒體查詢還應使用em單元（例如， min-width: 80em ）。即使用戶調整了默認字體尺寸，也可以確保響應式佈局正確適應，從而防止了多列佈局中的短路等問題。 PostCSS插件簡化了媒體查詢中從px到em的轉換。

改進形式驗證樣式:user-invalid

標準CSS :invalid偽級具有形式驗證的局限性。它會在每次擊鍵上觸發所需字段的每次擊鍵，並立即在頁面加載上觸發，這可能會引起令人困惑的用戶體驗。 :user-invalid節偽級，已經在Firefox中支持的AS :-moz-ui-invalid在大量用戶互動後僅申請來解決這些問題。正在努力進行標準化:user-invalid 。

以上是每周平台新聞：聚焦戒指，甜甜圈範圍，更多EM單位和全球隱私控制的詳細內容。更多資訊請關注PHP中文網其他相關文章！