初めてカラーコントラスト（）を探索します

Safari Technical Preview 122のリリースノートで、CSSのカラーコントラスト（）関数がサポートされていることがわかりました。 Safariはここで最初にゲートから外れています。私の知る限り、他のブラウザはまだこれをサポートしておらず、Stable Safariがいつ発送されるか、または他のブラウザがいつ発送するかわかりません。しかし！とても良い考えです！よりアクセスしやすいインターフェイス（色のコントラストが一部）を出荷できるようにするためのネイティブツールは、私がクールです。それでは、それを機能させようとしましょう。

誰でもSafari Technical Previewをダウンロードできるので、私はそれをしました。

これについて尋ねなければなりませんでしたが、これがプレリリースブラウザであるからといって、これらすべての機能がデフォルトでアクティブになっているという意味ではありません。 Chrome Canaryに機能フラグがあるように、Safari Technical Previewもオンにする必要があります。だから、私はこのようにそれをひっくり返さなければなりませんでした：

リリースノートには、実際にカラーコントラスト（）を使用する方法に関する情報はありませんが、幸いなことにWeb検索が仕様（カラーモジュール5の一部）が表示され、MDNには非常に基本的な構文情報が付いたページがあります。

これが私がそれを理解する方法です：

上記の例は少しばかげています。なぜなら、それは常に白に戻るからです。それは黒と最も対照的です。この関数は、これらの色の値の1つ以上が動的である場合に実際に役立ちます。つまり、CSSカスタムプロパティである可能性が非常に高くなります。

関数は色を返しているので、上部のユースケースは、動的な背景に基づいて色を設定することになると思います。それで…

セクション {
  背景：var（ -  bg）;
  色：カラーコントラスト（var（ -  bg）vs white、black）;
}

これで、-BGであらゆる色を投げることができます。最も対照的なものに応じて、白または黒のテキストを取得できます。

最も基本的なユースケースであっても、それは非常にクールです。

デイブのデモは、彼が親にテキストの色を設定するだけでなく、リンクの色も設定しており、リンクには別の色のセットがあります。 HSLスライダー（もちろんSafari Technology Preview）で遊んで、機能するのを確認します。

十分なコントラストを持つ2つの色を選ぶだけで十分に簡単です（ただし、私たちの人々でさえ、良い意図を持っていかにめちゃくちゃになる頻度に驚くでしょう）。しかし、ああ、それはさまざまな状況で複雑になります。多くの色のバリエーション、または神が禁じているarbitrary意的な組み合わせを持っていることは言うまでもありません。

これが私がデイブのテスターで遊んでいるビデオを紹介しますので、色がさまざまな場所でどのように更新されるかを見ることができます。

以上が初めてカラーコントラスト（）を探索しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。