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

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

Adam Argyle

新しいメディアクエリ機能（Chrome 118 以降） prefers-reduced-transparency CSS Media Queries 5 から できます。インターフェースが不透明でないと、ユーザーが頭痛の種になったり、 さまざまな視覚障がいがあります。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% に調整します。 ほとんど不透明度になります。

このメディアクエリは、他の優先メディアクエリ、 デザイナーやデベロッパーが創造力を発揮し、ユーザーに合わせて調整することもできます。 これらのメディアクエリは、車内の椅子のようなもので、 ユーザーに合わせて位置を調整します。ユーザーがウェブサイトを訪問すると ユーザーが尋ねなくても自動的に調整されます。驚きの機能ですね。

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

以降のセクションでは、 有意な方法で透明性を低下させます

画像上の半透明のキャプション

画像や動画のサムネイルに 半透明のキャプションやサマリーが出力されます。次の例は 設定することもできます。このオーバーレイは 削除され、同じキャプション コンテンツが画像の下に 表示されます。

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

UI 要素がコンテンツをオーバーレイするもう 1 つの方法は、 モーダル、通知、ポップオーバーがあります。このような場合 不透明度を上げると、ユーザーの好みを尊重しながら、 背景から少し色を薄くして透けて見えるようにできます。

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

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

アダプティブ フロストガラス

よく使われるイメージ オーバーレイ スタイルには、フロストガラスもあります。以下の例では、 キャプションの後ろの画像は商品画像をミラーリングしている。この これには 2 つの利点があります。1 つは切り抜かれず、明るい / 暗い 好みがもう少し深く伝わることが あります

.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 メディアクエリで解決できます。 Preferreds-Reduced motion 「pends-reduced-transparency」と削減されたモーションのメディアクエリでは、次のことができます。 ユーザーに「no-preference」がある場合のみ、無限アニメーションを適用する削減 このユーザーが動きを行っても問題ないことをコードに通知します。

さらに、透明度の低いメディアクエリを使用すると、 オーバーレイの色はほぼ 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) {
  …
}

デベロッパーやデザイナーはしばしば「フォールバック」するユーザーエクスペリエンスの向上に 減算的思考で締めくくります。これは、メディアクエリでは次のように現れます。 「reduce」のチェック、UI から何かが削除されます。「 例は加法的思考を示しています。動きや透明度が加わり、 ユーザーに問題はありません。

このアプローチにより、 頑丈です。ユーザーに問題がなければ、エクスペリエンスに追加します。

DevTools

Chrome DevTools でこの設定をエミュレートすると、透明性を低下させることができます（ [Rendering] タブを使用します。次の動画では、 Preferreds-color-scheme と preferreds-reduced-transparency を切り替える方法 メディアクエリを使用して、ライト、ダーク、透明、低透明度を表示できます。 フロストガラスカードのバリエーションです。