古いブラウザーの対応

すべてのウェブサイトは、対象視聴者という点で異なります。 取るべきアプローチを決める前に、古いブラウザーでサイトにやってくる訪問者の数を調べてください。 あなたが追加したり置き換えたりしている既存のウェブサイトを持っているなら、人々が使用している技術を伝えることができる分析機能 (analytics) を利用できるので、これは簡単です。 分析機能を持っていないか、真新しいサイトであるならば、場所によってフィルターをかけた統計 (statistics) を提供することができる Statcounter のようなサイトがあります。

また、端末の種類やサイトの利用方法についても検討する必要があります。 例えば、モバイル端末の平均数よりも多いと予想される場合があります。 アクセシビリティと支援技術を使用している人々は常に考慮されるべきですが、いくつかのサイトではさらに重要になるかもしれません。 私の経験では、開発者は多くの場合、ユーザーの 1% の体験を非常に心配していますが、はるかに多い数のアクセシビリティが必要な人々は考慮していません。

ユーザーによってはサイトを携帯電話で見たり、他のユーザーは大きなデスクトップ画面を見たりするため、ウェブサイトはすべてのブラウザーで同じように見えるとは限りません。 同様に、一部のユーザーは古いブラウザーのバージョンを持ち、他のユーザーは最新のブラウザーを持ちます。 一部のユーザーは、コンテンツがスクリーンリーダーによって読み上げられているのを聞いているかもしれないし、それを読むことができるようにページにズームインしているかもしれません。 全員に対応するということは、防御的に設計されたバージョンのコンテンツを提供することを意味します。 その結果、最新のブラウザーでは見栄えがよくなりますが、それでも古いブラウザーのユーザーにとっては基本レベルで使用できます。

基本レベルのサポートは、ページの通常フローが意味をなすように、コンテンツを適切に構成することによります。 非常に限られた機能の携帯電話を持っているユーザーは CSS の多くを得ないかもしれません、しかし内容は読みやすくする方法で流れます。 したがって、よく構造化された HTML 文書を常に出発点にする必要があります。 スタイルシートを削除した場合、コンテンツは意味をなしますか？

ウェブサイトを誰もが同じように使えるようにするために時間を費やすことは、商業的に意味がありません。ユーザー環境は様々であり、制御できないからです。プレーンな HTML ページと完全な機能を備えたウェブサイトの間には、取るべきバランスがあります。サイトの代替表示の使い勝手を確実に保持するために、CSSのないプレーンな表示をテストしておくと便利です。この代替表示は、とても古いブラウザーや制限のあるブラウザーを使用しているユーザーには表示されないかもしれませんが、主要な対象となるユーザー、つまり現行のブラウザーを使用しているユーザーには、ブラウザーやインターネット接続が一時的に失敗したときに表示されるかもしれません。 CSS はこのような代替表示の作成を簡素化します。したがって、制御できることに集中する、つまり、あなたのウェブサイトをアクセシビリティにするために時間を費やす方がよく、それによってより多くのユーザーにサービスを提供することができます。

CSS 仕様書には、レイアウトメソッドのような 2 つの類似した機能が同じアイテムに適用された場合に、ブラウザーがどのような処理を行うかを説明する情報が含まれています。例えば、アイテムが浮動要素であり、グリッドアイテムでもあり、CSS グリッドコンテナーの一部でもある場合にどうなるかを定義しています。要素に margin-top と margin-block-start プロパティが設定されている場合の定義もあります。

ブラウザーは新しい機能を認識しない場合、その宣言を不正なものとしてエラーを発生させずに破棄します。ブラウザーが対応していない CSS のプロパティや数値は破棄されるため、古い値と新しい値の両方を同じルールセットで共存させることができます。ただ、新しい値の前に古い値を宣言し、対応している場合は新しい値が古い値を上書きするようにします（代替表示）。

例えば、ほとんどのブラウザーは display プロパティの 2 値構文に対応しています。そうでないブラウザーは、古い 1 つの値の構文を使用します。

.container {
  display: inline-flex;
  display: inline flex;
}

同様に、このエラー処理は、古い CSS コードベースが、古いベンダー接頭辞付き機能が対応できなくなったとしても、動作し続けることを保証します。ベンダー接頭辞はもう一般的には使用されていませんが、ベンダー接頭辞のプロパティや値を記載する必要がある場合は、標準値の前に接頭辞つきの値を宣言し、対応している場合に新しい値が代替値を上書きするようにしてください。

すべてのブラウザーで対応していない新しいセレクターを記載することは、より慎重に処理する必要があります。セレクターのカンマ区切りリスト内のセレクターが不正な場合、スタイルブロック全体が無視されます。

ブラウザーの対応していないベンダー接頭辞付きの擬似要素や新しい擬似クラスを使用する場合は、 :is() や :where() を使用して寛容なセレクターリスト内に接頭辞の値を記載して、セレクターブロック全体が不正で無視されないようにしてください。

:is(:-prefix-mistake, :unsupported-pseudo),
.valid {
  font-family: sans-serif;
}
:-prefix-mistake,
:unsupported-pseudo,
.valid {
  color: red;
}

上記の例では、.valid のコンテンツは sans-serif になりますが、red にはなりません。

機能クエリーを使用すると、ブラウザーが特定の CSS 機能に対応しているかどうかをテストできます。 つまり、特定の機能に対応していないブラウザー用の CSS を作成してから、そのブラウザーが対応しているかどうかを確認し、対応している場合は素敵なレイアウトを追加することができます。

上記の例に機能クエリーを追加すると、グリッドに対応している場合、項目の幅を auto に戻すことができます。

* {
  box-sizing: border-box;
}

.wrapper {
  background-color: palegoldenrod;
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.item {
  border-radius: 5px;
  background-color: rgb(207 232 220);
}

@supports (grid-template-rows: subgrid) {
  .wrapper {
    grid-template-rows: subgrid;
    gap: 10px;
    background-color: lightblue;
    text-align: center;
  }
}

<div class="wrapper">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
  <div class="item">Item Four</div>
  <div class="item">Item Five</div>
  <div class="item">Item Six</div>
</div>

機能クエリーは現行のすべてのブラウザーで対応しています。最初に完全に対応している機能のCSSを、機能クエリー以外で書いてください。サイトが使いやすくなり、すべてのユーザーがアクセシビリティを持てるようになったら、機能クエリーブロック内に新しい機能を追加してください。クエリーされた機能に対応しているブラウザーは、機能クエリーブロック内の新しい CSS をレンダリングすることができます。最初に対応している CSS を使用し、次に対応する機能を強化するという手法を使用してください。

1 つの方法は、ブラウザー横断テストのモジュールに詳述されているように、Sauce Labs のようなオンラインテストツールを使うことです。

これで、古いブラウザーに代替 CSS を提供し、新しい機能を自信を持ってテストするための知識を持ちました。これで、新しいテクニックを自信を持って使用することができます。

これで CSS レイアウトに関する記事を読み終えていると思いますので、このモジュールのアセスメント、基本的なレイアウトの理解度で理解度を試す時になりました。

• @supports at-rule
• CSS アットルール
• 機能クエリーの使用
• CSS 条件付きルールモジュール

• 前のページ
• Overview: CSS レイアウト
• 次のページ