CSS の優先透明度（Reduced-transparency）

不透明な UI を好むユーザーに合わせて最適化と調整を行います。

Adam Argyle

Chrome 118 以降では、CSS メディアクエリ 5 の新しいメディアクエリ機能 prefers-reduced-transparency が利用可能になります。不透明でないインターフェースは、さまざまな種類の視覚障害で頭痛や視覚的な苦痛を引き起こす可能性があります。そのため、Windows、macOS、iOS には、UI の透明度を減らしたり、透明度を完全に消したりできるシステム設定があります。

ブラウザのこの新しいメディアクエリを使用すると、CSS で、透明度の低下を希望するユーザーに合わせてインターフェースを適応させることができます。

.example {
  --opacity: .5;

  background: hsl(200 100% 50% / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}

上のコードサンプルでは、CSS 変数に 50% の不透明度値が保持され、HSL とともに使用されて半透明の青色の背景が作成されます。ネストされたメディアクエリは、透明度の低下に関するユーザー設定を確認し、true の場合、不透明度変数を 95%（ほぼ不透明な不透明度値）に調整します。

このメディアクエリは、他の設定メディアクエリとよく合います。これにより、デザイナーとデベロッパーは、ユーザーに合わせて調整しながら創造性を発揮できます。これらのメディアクエリは、ユーザーに合わせて位置を自動的に調整する自動車のシートのようなものです。ユーザーがウェブサイトにアクセスすると、ユーザーがリクエストしなくても自動的に調整されます。すごい

透明性を低下させるユースケース

以降のセクションでは、有意義な方法で透明性を低下させる機会と機会を示すことに重点を置きます。

画像の半透明の字幕

画像や動画のサムネイルに半透明のキャプションやサマリーをオーバーレイすることは一般的です。次の例は、透明度を下げる設定を処理する 1 つの方法を示しています。オーバーレイは完全に削除され、同じ字幕コンテンツがオーバーレイではなく画像の下に表示されます。

透過的なモーダル、通知、ポップオーバー

UI 要素がコンテンツをオーバーレイするもう 1 つの方法は、モーダル、通知、ポップオーバーを使用する方法です。この場合、多くの場合、不透明度の要素が存在します。このような場合は、不透明度を上げることでユーザーの設定を尊重しながら、オーバーレイの背後から色がわずかに透けて見えるようにすることができます。

.card {
  background: hsl(none none 100% / 20%);

  @media (prefers-reduced-transparency: reduce) {
    background: hsl(none none 0% / 80%);
  }
}

適応型フロストガラス

画像オーバーレイの人気スタイルとして、フロストガラスもあります。次の例では、字幕の背後にある画像は商品画像が鏡面に反射されています。これには 2 つの利点があります。画像が切り抜かれず、明るい色または暗い色の設定が少し多くなります。

.adaptive-glass {
  --glass-lightness: 100%;
  --glass-alpha: 50%;

  background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
  backdrop-filter: blur(40px);

  @media (prefers-color-scheme: dark) {
    --glass-lightness: 0%;
  }

  @media (prefers-reduced-transparency: reduce) {
    --glass-alpha: 85%;
  }
}

ヒーロー ヘッダー

一般的なホームページ要素には、ループする動画やアニメーション画像に重ねて表示される太字のメッセージがあります。次の例では、カラフルな半透明のグラデーション オーバーレイと無限にアニメーション化する背景画像を使用しています。これは多くの人の注目を集める可能性がありますが、透明性と制御できない動きによるコントラストの低さにより、多くの問題も発生します。

この問題は、2 つの CSS メディアクエリ prefers-reduced-motion と preferreds-reduced-transparency で解決できます。モーション低減メディア クエリ内で無限アニメーションを適用できるのは、ユーザーがモーション低減に対して「設定なし」に設定している場合に限られます。この設定は、このユーザーがモーションを使用しても問題ないことをコードに通知します。

さらに、透明度を下げたメディアクエリでは、不透明度を下げてオーバーレイの色を 100% 近くに抑えることができます。動きによる注意散漫やコントラストの問題を回避して、メッセージを簡単に読むことができます。

これらをまとめると、クリエイティブな UI をデプロイしながら、ターゲット オーディエンスが内容を読んでメッセージを理解できるようになります。

.Hero img {
  @media (prefers-reduced-motion: no-preference) {
    animation: zoom 30s ease infinite;
  }
}

.Hero .overlay {
  background: hsl(none none 0% / 95%);

  @media (prefers-reduced-transparency: no-preference) {
    background: linear-gradient(
      to top right in oklab,
      oklch(40% 0.3 340 / 70%),
      oklch(40% 0.4 200 / 70%)
    );
  }
}

ユーザーの好みに対する加法的視点と減算的視点

前の例では、これらのユーザー設定が優先度が低いかどうかを確認せず、優先度が低くないかどうかを確認しています。

@media (prefers-reduced-transparency: no-preference) {
  …
}

デベロッパーとデザイナーは、多くの場合、減算的な考え方で、これらの設定に基づいてユーザー エクスペリエンスを「フォールバック」します。これは、メディアクエリで「縮小」のチェックとして現れ、この時点で UI から何かが削除されます。この例は、ユーザーが許可した場合にモーションと透明性が追加される、追加型の考え方を示しています。

このアプローチは、それ自体が堅牢な健全なベースライン エクスペリエンスについて考えるうえで役立ちます。ユーザーに問題がなければ、エクスペリエンスに追加します。

DevTools

Chrome DevTools の [レンダリング] タブでは、この設定をエミュレートして透明度を下げることができます。次の動画では、Preferreds-color-scheme と preferreds-reduced-transparency メディアクエリを切り替えて、すりガラスのカードのライト、ダーク、透明、低透明度の各バリアントを紹介する方法を紹介します。