@supports ― CSSのFeature Queries

Twitter殺しなタイトルだ。Firefox NightlyにCSS Conditional Rules@supportsが入った。

仕様がまだ初期段階なので、他のベンダーや仕様の動きが思わしくない場合は設定でオフにされる可能性もあるらしいけれど、嬉しいね。

Feature Queries

@supportsCSSのat-ruleで、あるプロパティと値のペアをサポートしている/いない状態にだけ、ブロック内の宣言を適用するというもの。仕様書の例を見るほうが早いか。

@supports ( display: flexbox ) {
  body, #navigation, #content { display: flexbox; }
  #navigation { background: blue; color: white; }
  #article { background: white; color: black; }
}

っていう。メディアクエリーと似ていて、and, or, not が使えるので複雑な条件も指定できる。ただ、メディアクエリーと違って、値のないクエリーは書けない。つまり「〇〇プロパティをサポートしてる」とはできない。あくまでプロパティと値。

あと、セレクタや別のat-ruleをクエリーには入れられない。at-ruleは別にしても、セレクタはちょっと仕組みがほしい気もする。

さて、CSSには不明なプロパティや値を無視する仕組みがあるのに、どうして@supportsが提案されたのか。

ひとつは、CSSが複雑になったから。たとえば、CSS RegionsCSS Grid Layoutみたいな仕様は、そこで使われるプロパティが相互に依存し、時には別のモジュールのプロパティからも影響を受けるので、宣言単位で無視されるだけだとうまくフォールバックがきかない。レイアウトが大幅に崩れる可能性が多分にある。作りようによっては無視されても後方互換になるんだろうけれど、「Regionsサポートしてる」「Grid Layoutサポートしてる」みたく、ルールセットの塊でわけられる方が、たぶんだいぶ楽。

あとは、各ブラウザーの対応状況やプライオリティの付け方が違ったり、ベンダー拡張が増えてきたというのもあるだろう。

Operaも実装、WebKitには前からパッチが

さて、Mozillaが実装したのをうけてOperaのFlorianがTwitterでこう反応している。

@bz_moz @heycam @davidbaron @supports' time has come. Soon available in #opera as well.

Soonとな。Opera 12.50のCoreがPresto 2.12になったばかりだけれど、2.12に入ってきたりするんだろうか。

しかし、これを実装してほしいのは、やっぱりWebKitと、あとTridentだったりする。MozillaOperaが大きめのCSS仕様を提案をすることがあまりないのと、Mozillaのみ、Operaのみサポートしてるプロパティ(拡張含む)はそこまで数も利用例もないので、@supportsを使ってまでっていう状況に出くわさない。

いっぽうWebKitはいろんなベンダーがいろんなものを追加しているし、MicrosoftもIE10から結構アグレッシブになってきている。

ベンダー固有の拡張だからよくない、というわけじゃないんだけど、標準化のスピードや他のブラウザへの実装が不透明になりがちなので、独自実装が入りやすいエンジンにこそ、オプトインでCSSを記述できるような仕組みが入って欲しい。

.foo {
  /* WebKit拡張もしくはMicrosoft拡張のプロパティ */
  bar: baz;
  ...
  /* 全ブラウザで対応してるプロパティだけど、bar: bazを前提にした宣言 */
  qux: quux;
}

@supports not (bar: baz) {
  .foo {
    ...
    qux: foobar; /* 上書き */
  }
}

こんな感じでちまちま上書きするのは不毛なので、これ以上仕様が増えて実装される前に、@supportsが入って欲しいなと。

で、WebKitには実はパッチが上がっている。

レビューがされてないので、すぐ実装されるというわけではなさそうだけど。

Tridentについては、Windows 8がRTMになってしまったし、次を待たないといけない。

その他

機能が機能なので、Mozillaの実装では@-moz-supportsなんて馬鹿げたことはしていなくて、単に@supportsとなっている。

あと、@supportsのOM版も考えられていて、今のところwindow.supportsCSS('property', 'value')なんてのが考案されている。名前がjQueryでもつけなそうな安直さ(かつ紛らわしさ)なのでなんとかなんないかなあ。あと、Windowにぶら下げるのはどうよ的な話が出ているので、それは変わるかもしれない。

CondRulesには@-moz-document由来の@documentもあるので、ユーザースタイルシート書きとしてはそちらもぜひ欲しいところ。