平台新聞：圓形輪廓，GPU加速SVG動畫，如何解決CSS變量

在本週的新聞中，Firefox的概述被繞線，SVG動畫現在已在Chrome中加速了，CSS中沒有物理單位，紐約時報填字遊戲可訪問，並且在該值繼承之前解決了CSS變量。

讓我們跳入新聞！

圓形輪廓即將到達Firefox

自從2000年代中期通過Border-Radius物業創建圓形邊界以來，要遵循邊界曲線的大綱的想法就一直存在。十年前，它建議向Mozilla，Webkit和Chromium提出，甚至是自2015年以來CSS UI規範的一部分：

大綱的部分不需要矩形。在大綱遵循邊界邊緣的範圍內，它應該遵循邊界拉迪烏斯曲線。

在2021年的今天，在每個瀏覽器中仍然是矩形，毫無例外：

但這終於開始改變了。幾週後，Firefox將成為第一個自動遵循邊框形狀的圓形輪廓的瀏覽器。這也適用於Firefox對按鈕的默認焦點概述。

請星級鉻發行＃81556（登錄要求），以幫助優先考慮此錯誤，並儘快將圓形輪廓帶到Chrome。

SVG動畫現在已在Chrome中加速了

直到最近，通過CSS對SVG元素進行動畫元素將在基於鉻的瀏覽器中的每一幀（通常每秒60次）觸發重新粉刷。這種持續的重新粉刷會對動畫的平穩性和頁面本身的性能產生負面影響。

Chrome的最新版本通過為SVG動畫啟用硬件加速而消除了此性能問題。這意味著SVG動畫被卸載到GPU，並且不再在主線程上運行。

切換到GPU加速器會自動使SVG動畫在基於鉻的瀏覽器中更具性能（Firefox也可以做到這一點），這對於Web來說絕對是個好消息：

Hooray，可提供更多屏幕閱讀器訪問，逐漸增強的SVG動畫和更少的畫布。

CSS中不能有真實的物理單位

CSS定義了六個物理單元，包括（英寸）和CM（厘米）。每個物理單元都與像素單元的固定比例，即規範單元。例如，1英寸始終是96px。在大多數現代屏幕上，此長度不對應於1個現實世界英寸。

CSS工作組的FAQ頁面現在回答了一個問題，為什麼CSS中不能有實際的物理單位。簡而言之，瀏覽器不能總是確定顯示器的確切大小和分辨率（想想投影儀）。對於需要準確現實世界單元的網站，工作組建議人均校準：

有一個校準頁面，您要求用戶測量兩行相距距離（例如10厘米）的兩條線之間的距離，並輸入其獲得的值。使用它來找到該屏幕所需的縮放係數（CSS長度除以用戶提供的長度）。

然後可以將此縮放係數設置為自定義屬性，並用於計算CSS中的準確長度：

 html {
   - 單位規模：1.428;
}

。盒子 {
  / * 5實際厘米 */
  寬度：計算（5cm * var（ - 單位尺度，1））;
}

屏幕閱讀器用戶可以訪問時代填字遊戲

NYT Open團隊寫了有關《紐約時報》網站的一些改進，這些改進使其近年來更容易訪問。該網站使用語義HTML（，等），對重要組件（例如，登錄和註冊）的對比度增加，以及適合該網站付費工作室的跳動到容器鏈接。

此外，遊戲團隊使鍵盤和屏幕閱讀器用戶可以訪問每日填字遊戲。該填字遊戲被實現為SVG 元素的網格。當用戶瀏覽拼圖時，當前廣場的ARIA-LABEL屬性（可訪問名稱）會動態更新以提供其他上下文。

您可以在沒有帳戶的情況下播放迷你填字遊戲。嘗試用鍵盤解決難題。

在繼承該值之前，請解決CSS變量

Yuan Chuan最近分享了我沒有正確回答的小CSS測驗，因為我不確定CSS變量（var（）函數）是否在繼承該值之前或之後解決。我將嘗試解釋以下示例的工作方式：

 html {
  -Text-Color：var（ - 主彩色，黑色）;
}

頁尾 {
   - 淺色：棕色；
}

p {
  顏色：var（ - 文本色）;
}

問題：頁腳黑色還是棕色的段落的顏色？有兩種可能性。要么（a）兩個自定義屬性的聲明值均繼承為段落，然後顏色屬性解析為棕色，或（b） - text-color屬性在元素上直接解決到黑色，然後將此值繼承為段落並分配給顏色屬性。

正確答案是選項B（顏色為黑色）。在繼承該值之前，請解決CSS變量。在這種情況下，-Text-Color落後於黑色，因為 - 元素上不存在 - 顏色。該規則在CSS變量模塊中指定：

重要的是要注意，自定義屬性在計算值時間內解決其值中的任何var（）函數，該函數在該值繼承之前發生。

以上是平台新聞：圓形輪廓，GPU加速SVG動畫，如何解決CSS變量的詳細內容。更多資訊請關注PHP中文網其他相關文章！