【46：プログレッシブエンハンスメント】ブラウザに適したスタイルで表示する

f:id:seintoseiya:20160110200238p:plain
プロジェクトNo.46：プログレッシブエンハンスメント - DEMO

従来のクロスブラウザという考え方から、最近ではプログレッシブエンハンスメントという考え方が流行っている様です。
プログレッシブエンハンスメントとは「新しいスタイルの書き方に対応しているブラウザーにはそれを、対応していないブラウザーには従来の書き方で、かつ見栄えの崩れないようにコンテンツを提供できる様にする事」ということで、
今回はCSSでそれを実現できる@supportsを使ってみたいと思います。

対応ブラウザの確認

Can I use…によると、基本的にIE以外のモダンブラウザーに対応している様です。

@supportsの使い方

@supports(プロパティー:値)

指定した (プロパティー:値) の条件に対応しているブラウザーには {} 内に書かれたスタイルを適用するよ、というもの。

@supports (-webkit-background-clip: text) {
  .gradient-text {
    background: linear-gradient(90deg, #E55D87 10%, #5FC3E4 30%);
    color: transparent;
    -webkit-background-clip: text;
  }
}

@supports not (プロパティー:値)

notはプロパティーが対応していないブラウザーに向けてスタイルを指定できます。

@supports not (-webkit-background-clip: text) {
  .gradient-text {
    color: #E55D87;
  }
}

@supports and (プロパティー:値)

and は「指定した複数のスタイルの、どちらにも対応している場合のみ」を条件に指定できます。

@supports (-webkit-background-clip: text) and (background-clip: text) {
  .gradient-text {
    background: linear-gradient(90deg, #E55D87 10%, #5FC3E4 30%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

@supports or (プロパティー:値)

or は「指定した複数のスタイルの、どちらかに対応している場合」を条件に指定できます。

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .gradient-text {
    background: linear-gradient(90deg, #E55D87 10%, #5FC3E4 30%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

注意点

andやorの前後にスペースを入れないといけない様です。

良い例

@supports (-webkit-background-clip: text) or (background-clip: text) {

}

悪い例

@supports (-webkit-background-clip: text)or(background-clip: text) {

}

参考サイト

CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法 | Webクリエイターボックス

全ソースはこちら

github.com

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。