CSS - @supports

概要

ルール名@supports
構文@supports [not] ( condition ) { ... }
サポートhttps://caniuse.com/mdn-css_at-rules_supports_selector

説明

ブラウザが CSS の属性や値をサポートしているか、いないかにより、処理を振り分けます。

使用例

下記の例では、ブラウザが display:flex をサポートしている場合、サポートしていない場合の CSS 定義を振り分けています。

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 を使用することができます。

CSS
@supports ((transition-property: color) or
           (animation-name: foo)) and
           (transform: rotate(10deg)) {
  // ...
}

リンク

Copyright (C) 2015 杜甫々
初版：2015年11月8日、最終更新：2015年11月8日
https://www.tohoho-web.com/css/rule/supports.htm