@supportsCSS のサポート状況に応じてスタイルを指定する
@supports
規則は指定した CSS の機能に対して、ブラウザが対応(サポート)しているか、あるいは対応していないか、という条件を設定した上で、スタイルを適用することができます。
CSS Conditional Rules Module Level 4 では、selector()
関数が追加されました。これにより、セレクタの対応状況に応じてスタイルを指定することも可能になりました。
@supportsのサンプルソース
/* 段組み(マルチカラム)レイアウトに対応した環境にのみスタイルを指定したい場合の例 column-count: auto の指定が有効な場合に @supports 規則内のスタイルが適用されます。 */ @supports (column-count: auto) { div { column-count: 3; column-width: 36em; column-gap: 2em; } }
/* @media 規則と入れ子にして記述することもできます。 */ @supports (column-count: auto) { @media (min-width: 1600px) { div { column-count: 3; column-width: 36em; column-gap: 2em; } } }
/* not, and, or を使用してより複雑な指定も可能です。 */ @supports not (display: flex) { ...略... } @supports (display: flex) and (not (display: inline-grid)) { ...略... } @supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) { ...略... }
/* カスタムプロパティを、対応するブラウザ環境でのみ有効にするといった使い方もできます。 */ @supports (--main-color: red) { :root { --main-color: red; } .sample { background-color: var(--main-color); } }
/* selector() 関数を使用することでセレクタの対応状況に応じた指定も可能です。 */ @supports selector(:not(:defined)) { ...略... }
主要ブラウザの対応
IE11 | × |
---|---|
Edge(EdgeHTML) | ○ |
Edge(Chromium) | ○ |
Chrome | ○ |
Firefox | ○ |
Safari | ○+15.4 |
iOS Safari | ○+15.4 |
Android Chrome | ○ |