こんにちは！AIコミュニケーションのコーダーのたけうちです。
最近、解析ツールやAdobeソフト、カメラなど勉強したいことがたくさんありますが、上手く時間がとれず勉強がなかなかできていません・・・。
時間の使い方が上手くなりたいものです。

さて、今回はcssのみでスタイルを条件分岐する@supportsについてメモします。
条件分岐というと、phpやjavaが思い浮かぶ方が多いかと思いますが、実はcssでも条件分岐ができるんです！

cssのみでスタイルを条件分岐する@supports

@supportsとは

@supportsは、プロパティと値をブラウザがサポートしている場合のみ、{}内のCSSが適用されるというもの。
@supportsを使用できないブラウザでは{}内は無視されるので、見栄えの崩れないようにコンテンツを表示できる、ということになります。

@supportsの書き方

例として、下記のようなコードを記述してみました！
「flexが対応しているブラウザーにはflexを適用させる」ので、普通のcssではflexを使用しないcssを記述して上手く表示されるよう組めばよいということになります。

@supports (display: flex) {
  .flex {
    display: flex;
  }
}

ちなみに@supportsでは、andやor、notも使用することができますが、

• ・前後にスペースを入れる
• ・プロパティと値は必ず括弧でくくる

などに注意して記述する必要があります。

@supports (transition-property: color) or
          (box-shadow: 5px 5px 5px black) and
          (transform: rotate(20deg)) {
  /* cssの記述スペース */
}

まとめ

@supportsを使うことによって制作の幅が少しでも広がるかもしれないので、わたし自身も@supportsを活用していきたいと思います！