HD CSS カラーに移行

このドキュメントは高解像度 CSS カラーガイドの一部です。

Adam Argyle
Adam Argyle
X GitHub

ウェブ プロジェクトの色を更新して、 広色域ディスプレイ:

  1. グレースフル デグラデーション: 新しい色空間を使用して、ブラウザと オペレーティング システムが、ディスプレイの機能に基づいて、表示する色を決定します。

  2. プログレッシブ エンハンスメント: @supports と @media を使用して、 ユーザーのブラウザの機能が制限され、条件が満たされると 対応しています。

ブラウザが display-p3 の色を認識できない場合:

color: red;
color: color(display-p3 1 0 0);

ブラウザが display-p3 の色を認識できる場合:

color: red;
color: color(display-p3 1 0 0);

それぞれに長所と短所があります。こちらのスライドは、 デメリット:

グレースフル デグラデーション

  • 長所 <ph type="x-smartling-placeholder">
      </ph>
    • 最もシンプルなルートです。
    • 広色域ディスプレイでない場合、ブラウザの色域は sRGB にマッピングまたはクランプされます。 ブラウザが管理します。
  • 短所 <ph type="x-smartling-placeholder">
      </ph>
    • ブラウザで、好みでない色に色域制限や色域マップが作成されることがあります。
    • ブラウザが色のリクエストを認識できず、完全に失敗する場合があります。ただし、 この問題は、色を 2 回指定することで軽減できます。カスケード 以前の色にフォールバックします

プログレッシブ エンハンスメント

  • 長所 <ph type="x-smartling-placeholder">
      </ph>
    • 色の忠実度を管理してより詳細に制御。
    • 現在の色に影響を与えない加算的戦略。
  • 短所 <ph type="x-smartling-placeholder">
      </ph>
    • 2 つの異なる色の構文を管理する必要があります。
    • 2 つの色域を管理する必要があります。

色域と色空間のサポートを確認する

ブラウザで広色域機能と色のサポートを確認できる 構文をサポートしています。ユーザーが使用する正確な色域 情報が提供されない場合は、一般的な回答が提供されるため、ユーザーのプライバシーは保護されます 維持します。ただし、正確な色空間のサポートは、 色域などユーザーのハードウェアに固有の 要件があります

色域サポートのクエリ

次のコード例は、 表示されます。

CSS から確認

サポートへの問い合わせに最低限必要なのは、 dynamic-range メディアクエリ:

対応ブラウザ

  • Chrome: 98。 <ph type="x-smartling-placeholder">
  • エッジ: 98。 <ph type="x-smartling-placeholder">
  • Firefox: 100。 <ph type="x-smartling-placeholder">
  • Safari: 13.1。 <ph type="x-smartling-placeholder">

ソース

@media (dynamic-range: high) {
  /* safe to use HD colors */
}

おおよそ、またはそれ以上のサポートが必要な場合は、 color-gamut メディアクエリ:

対応ブラウザ

  • Chrome: 58。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 110。 <ph type="x-smartling-placeholder">
  • Safari: 10。 <ph type="x-smartling-placeholder">

ソース

@media (color-gamut: srgb) {
  /* safe to use srgb colors */
}

@media (color-gamut: p3) {
  /* safe to use p3 colors */
}

@media (color-gamut: rec2020) {
  /* safe to use rec2020 colors */
}

サポートを確認するために、さらに 2 つのメディアクエリがあります。

  1. @media (color)
  2. @media (color-index)

JavaScript から確認する

JavaScript の場合、 window.matchMedia() 関数を呼び出して、評価のためにメディアクエリを渡すことができます。

対応ブラウザ

  • Chrome: 9. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 6. <ph type="x-smartling-placeholder">
  • Safari: 5.1. <ph type="x-smartling-placeholder">

ソース

const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;

console.log(hasHighDynamicRange); // true || false

const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;

console.log(hasP3Color); // true || false

上記のパターンは、他のメディアクエリにコピーできます。

色空間サポート クエリ

次のコードサンプルは、アクセスしているユーザーのブラウザとそのブラウザの選択を確認します。 さまざまな色空間を利用できます

CSS から確認

個別の色空間サポートについては、 @supports クエリ:

対応ブラウザ

  • Chrome: 28。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 22。 <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

ソース

@supports (background: rgb(0 0 0)) {
  /* rgb color space supported */
}


@supports (background: color(display-p3 0 0 0)) {
  /* display-p3 color space supported */
}


@supports (background: oklch(0 0 0)) {
  /* oklch color space supported */
}

JavaScript から確認する

JavaScript の場合、 CSS.supports() 関数を呼び出してプロパティと値のペアを渡して、 認識されます。

CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')

ハードウェアと解析チェックを組み合わせる

各ブラウザにこれらの新しいカラー機能が実装されるのを待つ間、 ハードウェア機能と色解析機能の両方を確認することをおすすめします。 色を徐々に高解像度に補正するときは、この方法をよく使います。

:root {
  --neon-red: rgb(100% 0 0);
  --neon-blue: rgb(0 0 100%);
}

/* is the display HD? */
@media (dynamic-range: high) {

  /* does this browser understand display-p3? */
  @supports (color: color(display-p3 0 0 0)) {

    /* safe to use display-p3 colors */
    --neon-red: color(display-p3 1 0 0);
    --neon-blue: color(display-p3 0 0 1);
  }
}

Chrome DevTools で色をデバッグする

Chrome DevTools が更新され、デベロッパー向けの新しいツールが追加されました HD カラーの作成、変換、デバッグを行えます。

カラー選択ツールを更新しました

カラー選択ツールで、すべての新しい色空間がサポートされるようになりました。作成者に以下の操作を許可する チャネルの値と相互作用します。

display-p3 カラーのサポートを示す DevTools。

色域境界

色域境界線も追加され、srgb と srgb の間に線を引きます。 display-p3 色域に対応しています選択した色がどの色域にあるかを明確にする。

カラー選択ツールに色域線が表示されている DevTools。

これにより、HD 色と非 HD 色を視覚的に区別できます。 これは、color() 関数と新しい関数を操作する場合に特に便利です。 HD と HD の非 HD 色の両方を制作できるため、色空間が少なくなります。条件 色域を確認するには、カラー選択ツールをポップアップします。

色の変換

DevTools では、サポートされている形式間で色を変換できます。たとえば、hsl、 hwb、rgb、hex を長年使用していました正方形の色見本上のshift + click この変換を実行する [Styles] ペイン。新しいカラーツールは クリックするとダイアログが表示され、作成者は 選択できます

コンバージョンの際には、目標に合わせてコンバージョンがクリップされているかどうかを 選択します。DevTools には、変換後の色に対する警告アイコンが表示されるようになりました。 追加できます。

DevTools 色域クリップのスクリーンショット。色の横に警告アイコンが表示されています。

DevTools の CSS デバッグ機能の詳細を確認する。

次のステップ

より活発で一貫した操作と補間により、 よりカラフルにすることができます

詳しくは、カラーリソースをご覧ください。 をご覧ください。