プラットフォームニュース：丸みを帯びたアウトライン、GPU加速SVGアニメーション、CSS変数の解決方法

今週のニュースでは、Firefoxが丸みを帯びたアウトラインを獲得し、SVGアニメーションがChromeでGPUを加速し、CSSには物理的な単位がなく、 New York Timesのクロスワードにアクセスでき、CSS変数が値が継承される前に解決されます。

ニュースに飛びつきましょう！

丸いアウトラインがFirefoxに来ています

2000年代半ばにボーダーラジウスプロパティを介して丸みを帯びた境界線を作成できるようになって以来、アウトラインを境界線曲線に従うというアイデアはずっと存在しています。 10年以上前にMozilla、WebKit、およびChromiumに提案され、2015年以降のCSS UI仕様の一部でさえありました。

アウトラインの部分は長方形である必要はありません。アウトラインが境界線の端をたどる限り、ボーダーラジウス曲線に従う必要があります。

2021年の今日まで早送りすると、すべてのブラウザの概要が例外なく依然として長方形です。

しかし、これはついに変化し始めています。数週間で、Firefoxは、境界線の形を自動的に追跡する丸いアウトラインを備えた最初のブラウザになります。これは、ButtonsのFirefoxのデフォルトフォーカスアウトラインにも適用されます。

このバグの優先順位付けを支援し、丸みを帯びたアウトラインをクロムに遅らせるよりも早くもたらすのを支援するために、Chromium Issue＃81556（必要なサインイン）を主演させてください。

SVGアニメーションは、ChromeでGPUアクセラレーションされています

最近まで、CSSを介してSVG要素をアニメーション化すると、Chromiumベースのブラウザのすべてのフレーム（通常60回）で塗り直しがトリガーされます。このような一定の塗り直しは、アニメーションの滑らかさとページ自体のパフォーマンスにマイナスの影響を与える可能性があります。

Chromeの最新バージョンは、SVGアニメーションのハードウェアアクセラレーションを可能にすることにより、このパフォーマンスの問題を排除しました。これは、SVGアニメーションがGPUにオフロードされ、メインスレッドで実行されなくなったことを意味します。

GPUアクセラレーションへの切り替えにより、SVGアニメーションはChromiumベースのブラウザでよりパフォーマンスを発揮しました（Firefoxもこれを行います）。これは間違いなくWebにとって良いニュースです。

より多くのスクリーンリーダーにアクセスしやすく、徐々に強化されたSVGアニメーションとより少ないキャンバスについて。

CSSには実際の物理ユニットはありません

CSSは、（インチ）およびCM（センチメートル）を含む6つの物理ユニットを定義します。すべての物理ユニットは、標準ユニットであるピクセル単位と固定比率です。たとえば、1インチは常に正確に96pxです。ほとんどの最新の画面では、この長さは1つの実際のインチに対応していません。

CSSワーキンググループのFAQページは、CSSに実際の物理ユニットが存在できない理由の質問に答えます。要するに、ブラウザは常にディスプレイの正確なサイズと解像度を決定するとは限りません（プロジェクターを考えてください）。正確な現実世界ユニットを必要とするWebサイトの場合、ワーキンググループはデバイスごとのキャリブレーションを推奨しています。

キャリブレーションページがあります。ここでは、CSSの距離（10cmなど）の2つの行間の距離を測定し、得る値を入力するようにユーザーに依頼します。これを使用して、その画面に必要なスケーリング係数を見つけます（CSS長さをユーザーが提供する長さで割ったもの）。

このスケーリング係数をカスタムプロパティに設定し、CSSの正確な長さを計算するために使用できます。

 html {
   - ユニットスケール：1.428;
}

。箱 {
  / * 5実世界センチメートル */
  幅：calc（5cm * var（ -  unit-scale、1））;
}

Times CrossWordは、スクリーンリーダーユーザーがアクセスできます

NYTオープンチームは、ニューヨークタイムズのウェブサイトの改善のいくつかについて書きました。このWebサイトでは、セマンティックHTML（、

など）を使用し、重要なコンポーネント（ログインや登録など）のコントラストの増加、およびサイトのペイウォールに適応するスキップ間リンクを使用しています。

さらに、ゲームチームは、キーボードおよびスクリーンリーダーのユーザーが毎日のクロスワードパズルにアクセスできるようにしました。クロスワードは、svg 要素のグリッドとして実装されます。ユーザーがパズルをナビゲートすると、Current SquareのAria-Label属性（アクセス可能な名前）が動的に更新され、追加のコンテキストが提供されます。

アカウントなしでミニクロスワードを再生できます。キーボードでパズルを解決してみてください。

CSS変数は、値が継承される前に解決されます

Yuan Chuanは最近、CSS変数（VAR（）関数）が継承される前または後に解決されるかどうかわからなかったため、私は正しく答えることができなかったという小さなCSSクイズを共有しました。これが次の例でどのように機能するかを説明しようとします。

 html {
  -TEXT-COLOR：var（ - メインカラー、ブラック）;
}

フッター{
   - メインカラー：茶色。
}

p {
  色：var（ - テキストカラー）;
}

質問：フッターの段落の色は黒または茶色ですか？ 2つの可能性があります。 （a）両方のカスタムプロパティの宣言された値が段落に継承され、色プロパティが茶色に解決されるか、（b）テキスト色のプロパティは要素で直接黒に解決し、この値は段落に継承され、色プロパティに割り当てられます。

正解はオプションBです（色は黒です）。 CSS変数は、値が継承される前に解決されます。この場合、-main-colorは要素には存在しないため、テキスト色が黒に戻ります。このルールは、CSS変数モジュールで指定されています。

カスタムプロパティは、値が継承される前に発生する計算値時に値のvar（）関数を解決することに注意することが重要です。

以上がプラットフォームニュース：丸みを帯びたアウトライン、GPU加速SVGアニメーション、CSS変数の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。