| ルール名 | @supports |
|---|---|
| 構文 | @supports [not] ( condition ) { ... } |
| サポート | https://caniuse.com/mdn-css_at-rules_supports_selector |
ブラウザが CSS の属性や値をサポートしているか、いないかにより、処理を振り分けます。
下記の例では、ブラウザが display:flex をサポートしている場合、サポートしていない場合の CSS 定義を振り分けています。
@supports ( display: flex ) {
body, #navigation, #content { display: flex; }
#navigation { background: blue; color: white; }
#article { background: white; color: black; }
}
@supports not ( display: flex ) {
body { width: 100%; height: 100%; background: white; color: black; }
#navigation { width: 25%; }
#article { width: 75%; }
}
条件には and, or を使用することができます。
@supports ((transition-property: color) or
(animation-name: foo)) and
(transform: rotate(10deg)) {
// ...
}