Internet Explorer 11以下では@supportsがサポートされていない。そのおかげで実装ベースで(CSSハックなどというものなしに)安全にCSSの新機能を試せるようになった。しかしそうなるとIE11などというもののために大量の@supportsが出てくることになり、精神衛生上良くない。実装がある方を優先させCSS全体を適当な@supportsで括ってしまえば良さそうだ。
View Demo: Ban <=IE11 with @supports
デモの段落は@supportsをサポートしている安定ブラウザーでは緑になり、IE11ではちゃんと赤になる。不明なAt規則とその子は無視されるようになっていることが確認できる。CSS仕様でもそうだが、IE11以下を含めおおよそすべてのブラウザーでこういう実装になっているはずだ。
CSS全体を括るのは雑過ぎるので、実際にはFlexboxやGridを使うレイアウトをうまくまとめて@supportsで括ることになるだろう。安定ブラウザーで実装の揃ったものを逃がす場として@supportsをざっくりと使うわけだ。実装が揃っておらず、切り分けないと致命的なもの(例えばtext-decoration-styleプロパティー)は引き続き@supportsをそれぞれで書くべきだろう。
プログレッシブ・エンハンスメントのベースラインを上げ、それに応じてIE11以下を必要最小限にする時にうまく使おうという話だ。それ以上でもそれ以下でもない。
@supportsをサポートしているかどうか調べるためのクエリーは、多分top: 0が最も短い。より短いものを知っている・見つけた人はコッソリ教えて欲しい。