フィーチャー・クエリの書き方
フィーチャー・クエリの最小単位は“サポーツ・フィーチャー(Supports Feature)”です。1個以上のサポーツ・フィーチャーを演算子を組み合わせたものを“サポーツ・コンディション(Supports Condition)”と言います。
これはメディア・クエリの“メディア・フィーチャー”と“メディア・コンディション”とよく似ています。
サポーツ・フィーチャー
サポーツ・フィーチャーはメディア・クエリの“メディア・フィーチャー”に似ていますが、括弧(“(”と“)”)の中身はフィーチャー・クエリで検証する宣言を記述します。括弧の中にはCSSのプロパティ名とその値を一組だけ記述することができます。
@supports (〚プロパティ名〛:〚値〛) {
...
}
サポーツ・フィーチャーを指定したフィーチャー・クエリの例
@supports (text-overflow: fade) {
/* あふれるテキストをフェードアウトできる場合に適用されるスタイル。 */
}
@supports (color: hwb(0,0%,0%)) {
/* “hwb()”関数が使用できる場合に適用されるスタイル。 */
}
サポーツ・コンディション
サポーツ・フィーチャー、もしくは“selector()”関数を演算子で組み合わせることで、サポーツ・コンディションとすることができ、より細かく条件を指定できます。
演算子の使用方法はメディア・クエリの“メディア・フィーチャー”を組み合わせて“メディア・コンディション”にする場合と同様です。
| 演算子 |
説明 |
| and |
いずれのサポーツ・フィーチャーも“真”であれば“真” |
| or |
いずれかのサポーツ・フィーチャーが“真”であれば“真” |
| not |
サポーツ・フィーチャーを否定 |
@supports 〚サポーツ・フィーチャー〛 and 〚サポーツ・フィーチャー〛 {
...
}
@supports 〚サポーツ・フィーチャー〛 or 〚サポーツ・フィーチャー〛 {
...
}
@supports not 〚サポーツ・フィーチャー〛 {
...
}
演算子は複数使用することができ、3個以上のサポーツ・フィーチャーを組み合わせてサポーツ・コンディションにすることもできますが、異なる演算子をサポーツ・コンディションの同じ階層(同じ括弧の中)に混在させることはできず、括弧でグループ化して関係性を明確にして記述しなければなりません。
サポーツ・コンディションを指定したフィーチャー・クエリの例
@supports not (display: flex) {
/* フレックス・レイアウトが使用できない場合に適用されるスタイル。 */
}
@supports (display: flex) and (display: grid) {
/*
・フレックス・レイアウト
・グリッド・レイアウト
のどちらにも対応している場合に適用されるスタイル。
*/
}
@supports (not (display: flex)) and (display: grid) {
/* フレックス・レイアウトには対応しておらず、グリッド・レイアウトには対応している場合に適用されるスタイル。
*/
}
Jul. 30th,2021
