@supports は代替手段を提供する
@supports
で何ができるか。
@supports
を使うと、CSS プロパティまたは値が未実装のブラウザには代替手段を用意することができるので、すべての主要ブラウザに実装されるのを待つ必要なく、使いたい CSS プロパティまたは値を使うことができる。
@supports
は提供する情報を環境によって変化させないための手段であり、これはプログレスエンハンスメントの思想を実現させるのに役立つ。Webクリエイターボックスさんの記事で 2つデモが紹介されているが、どちらも見栄えが変わっているだけで見える情報は同じだ。
また、昔 CSS ハックというものがあったが、これは各ブラウザでの表示をできるだけ同じようにするため手段で、各ブラウザの実装状況に合わせて提供するもの自体を変える @supports
とは違う。
@supports
がどんなものかはわかったが、利用シーンを考えてみても @supports
で書くコード量を増やしてまで実現したいデザインというのが思いつかない。
「見栄えが変わっているだけで見える情報は同じ」ではあるものの、見栄えが変わることで得られる体験が変わりそうな点が気にかかっている。