CSS - @supports

トップ > CSSリファレンス > @supports

概要

ルール名@supports
構文@supports [not] ( condition ) { ... }
サポートC3 / Fx22 / Ch28 / Op12.1 / Sa9

説明

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

使用例

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

CSS
@supports ( display: flexbox ) {
  body, #navigation, #content { display: flexbox; }
  #navigation { background: blue; color: white; }
  #article { background: white; color: black; }
}
@supports not ( display: flexbox ) {
  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日
http://www.tohoho-web.com/css/rule/supports.htm