CSSの@supportsはpropertyと値の対応可否でstyleを切り替える

@supportsは、指定したCSSのpropertyと値に対応する場合だけ、group内のstyleを適用する規則です。未対応環境でも必要な情報を読める基本表示を先に書き、追加のlayoutや装飾だけを@supportsの中へ置きます。

先に新しいstyleを書いてから未対応環境を直すのではなく、基本表示を正本にします。@supportsはbrowser名を判定する仕組みではなく、使いたい宣言そのものを条件にする仕組みです。

propertyと値を一組で条件にする

W3CのCSS Conditional Rules Module Level 3では、@supportsをCSSのpropertyと値への対応を調べるconditional group ruleとして定めています。条件がtrueならgroup内のruleを適用し、falseなら適用しません。

条件には、確認したい宣言を丸括弧へ入れます。

@supports (display: flex) {
  .service-list {
    display: flex;
  }
}

この条件が調べるのは、displayというproperty名だけではありません。flexという値を含む宣言をCSS processorがsupportするかを調べます。property名だけを見て対応済みと判断しない点が重要です。

基本表示を条件の外へ置く

次は、service一覧を縦に並べる基本表示を残し、対応環境だけ横並びへ変える説明用の仮例です。

.service-list {
  display: block;
}

.service-item {
  margin-bottom: 1rem;
}

@supports (display: flex) {
  .service-list {
    display: flex;
  }

  .service-item {
    margin-right: 1rem;
    margin-bottom: 0;
  }
}

@supportsへ対応しない環境や、条件がfalseになる環境には、外側の基本表示が残ります。文章、link、操作などの必要な機能を条件内だけへ置かないでください。

追加styleを消した状態でも読めることを確認してから、条件内のlayoutを試します。fallbackを「古いbrowser向けの別site」と考えると、管理する実装が増えます。同じHTMLと基本CSSを保ち、追加部分だけを条件化するほうが確認範囲を限定できます。

and、or、notは必要な条件だけに使う

複数の宣言がそろう場合だけ適用するならand、どちらか一方へ対応すればよいならor、対応しない場合を示すならnotを使えます。

@supports (display: flex) and (flex-wrap: wrap) {
  .service-list {
    display: flex;
    flex-wrap: wrap;
  }
}

各宣言は丸括弧へ入れ、andやorの前後には空白を置きます。andとorを同じ階層で混ぜる場合は、評価したいまとまりをさらに丸括弧で囲みます。

条件を増やす前に、本当に一組で必要かを確かめてください。一つのpropertyだけで成立するstyleへ三つの条件を付けると、どの条件で適用されなかったのか調べにくくなります。

trueでも画面全体の正しさまでは証明しない

@supportsがtrueになることは、指定したpropertyと値をCSS processorがsupportするという判定です。複雑なlayoutが設計どおりに見えること、すべての操作方法で使えること、処理が速いことまで証明するものではありません。

実際の画面では、文字量、画像寸法、親要素の幅、ほかのCSSとのcascadeが影響します。条件へ対応する環境と基本表示になる環境の両方で、内容の順序、link、form、keyboard操作を確認します。

制作を委託する場合は、「未対応browserでも同じ見た目にする」とだけ依頼せず、基本表示で残す機能と、対応時に追加する見た目を分けて渡します。CSSを書く作業を委託しても、どの環境を確認対象にするか、基本表示で何を保証するかはsite側が決めます。

最初の一手は、新しいpropertyを使う箇所を一つ選び、その宣言を削除しても内容と操作が残る基本表示を作ることです。その後、確認したいpropertyと値を一組だけ@supportsへ入れてください。