CSS: フィーチャークエリを理解する（翻訳）
フィーチャークエリとは何か
フィーチャークエリ（Feature Queries）がCSSに追加されたのは比較的最近のことです。開発者はフィーチャークエリを用いることで、ブラウザのバージョンを指定する代わりに、特定のブラウザ機能を指定してスタイルを追加できるようになります。この機能は、一部のブラウザでまだサポートされていないCSS機能を使いたい場合や、ブラウザごとの実装のばらつきが大きい場合に特に便利です。
フィーチャークエリのしくみ
フィーチャークエリはCSS Conditional Rules（条件付き規則）1モジュールの一部である@supportsルールを用いて記述します。@supportsルールは引数として条件を受け取り、条件が満たされる場合にのみ、その内側のルールを適用します。
例を見てみましょう。
以下の@supportsルールは、ブラウザがCSS transformプロパティ2をサポートしている場合にのみボーダーとテキストの色を緑にします。
.container {
border: 4px solid red;
color: red;
padding: 10px;
}
@supports (transform: rotate(1.5deg)) {
.container {
border: 4px solid green;
color: green;
transform: rotate(1.5deg);
}
}
<div class="container">
ブラウザがCSS transformをサポートする場合は
ボーダーとテキストが緑になる
</div>
条件には任意の有効なCSS式を書けますが、必ず丸かっこ()で囲まなければなりません。
フィーチャークエリとプレフィックス
フィーチャークエリでは、標準プロパティの他に任意のベンダープレフィックスもテストできます。
ベンダープレフィックスは、ブラウザ固有の実装が必要とするブラウザ固有のCSSプロパティを示すプレフィックスです（特定のWebKit向けのCSSプロパティで使う-webkit-prefixなど）。
例を見てみましょう。
transformプロパティを標準プロパティとしてサポートするブラウザもあれば、ベンダープレフィックスのプロパティとしてサポートするブラウザもあります。CSSフィーチャークエリは、プロパティがブラウザ標準またはベンダープレフィックスのどちらかでサポートされている場合にスタイルを適用するのに有用です。
以下の@supportsルールでは、ブラウザがCSS transformプロパティを（標準またはベンダープレフィックスで）サポートしている場合のみ、ボーダーとテキストの色を緑にします。
.container {
border: 4px solid red;
color: red;
padding: 10px;
}
@supports ((transform: rotate(1.5deg)) or (-webkit-transform: rotate(1.5deg))){
.container {
border: 4px solid rgb(57, 57, 190); /*青*/
color: rgb(57, 57, 190); /*青*/
transform: rotate(1.5deg);
}
}
<div class="container">
ブラウザがCSS transformを標準プロパティまたは
ベンダープレフィックスプロパティとしてサポートしている場合
ボーダーとテキストが青になる
</div>
CSSフィーチャークエリは、CSSにベンダープレフィックスを自動的に追加できるAutoprefixerと併用すると便利です。
CSSフィーチャークエリは多くのブラウザでサポートされています。
画像クレジット: Supported browser
まとめ
- CSSフィーチャークエリは、さまざまなブラウザとWebサイトの互換性を向上させる方法として優れています。
- CSSフィーチャークエリによって、ブラウザがサポートする機能をチェックした結果に応じて異なるCSSルールを使えるようになります。
- CSSフィーチャークエリによって、機能のサポート状況がブラウザによって異なる場合に発生する可能性のあるCSSの問題を回避できるようになります。
フィーチャークエリについて詳しくはこちらのリンクをどうぞ。
概要
元サイトの許諾を得て翻訳・公開いたします。
本記事ではFeature Queriesの仮訳として「フィーチャークエリ」を採用しています。
参考: 機能クエリーの使用 - CSS: カスケーディングスタイルシート | MDN