State of CSS 2022 を眺めていて知らなかったことについて調べた
@supports
@supportsはブラウザーが特定のCSS機能をサポートしている場合に定義することができるクエリ
以下の記事にあるように、確かにCSSはブラウザが理解できない機能はそれらを無視して、何かがあればそれより前に宣言されたものでフォールバックするので、冗長的な機能なのではと思ったが、有効な場面があるみたい
How @supports Works | CSS-Tricks - CSS-Tricks
例えば、サイトがgridをまだ使えないブラウザバージョンをサポートしている場合、これまでは諦めて古いやり方を用いるしかなかったが、@supportsを使えば今後のためにgridで作っておくことができる
これを聞くとすごい便利そうなので、どんどん使っていきたい coliss.com
will-change
CSSアニメーションをGPUを使って処理させるハードウェア・アクセラレーションをどの要素に適用するかを前もってブラウザに伝えるプロパティ
これにより、その要素の変更が行われる前に、適切な最適化をセットアップすることができるためアニメーションのちらつきがなくなる
CSS Comparison Functions
min()・max()・clamp()関数のこと
min()は以下のように定義して、どちらか小さい方の値を値を表示
width: min(50vw, 600px);
max()は逆にどちらか大きい方の値を値を表示する
width: max(50vw, 400px);
clamp()は以下のように３つ（最小値、推奨値、最大値）の値を指定し、その中の値から条件に合う値を表示する
width: clamp(400px, 50vw, 600px);
paddingやfont-sizeにも使えるみたいなので試してみたい
