nlog

とめどなく流れるよだれ

@supports は代替手段を提供する

f:id:namikuguri:20180113133634p:plain

@supports で何ができるか。

@supports を使うと、CSS プロパティまたは値が未実装のブラウザには代替手段を用意することができるので、すべての主要ブラウザに実装されるのを待つ必要なく、使いたい CSS プロパティまたは値を使うことができる。

@supports は提供する情報を環境によって変化させないための手段であり、これはプログレスエンハンスメントの思想を実現させるのに役立つ。Webクリエイターボックスさんの記事で 2つデモが紹介されているが、どちらも見栄えが変わっているだけで見える情報は同じだ。

また、昔 CSS ハックというものがあったが、これは各ブラウザでの表示をできるだけ同じようにするため手段で、各ブラウザの実装状況に合わせて提供するもの自体を変える @supports とは違う。


@supports がどんなものかはわかったが、利用シーンを考えてみても @supports で書くコード量を増やしてまで実現したいデザインというのが思いつかない。

「見栄えが変わっているだけで見える情報は同じ」ではあるものの、見栄えが変わることで得られる体験が変わりそうな点が気にかかっている。