CSS 偏好採用較低的透明度

針對偏好不透明 UI 的使用者進行最佳化及調整。

Adam Argyle

自 Chrome 第 118 版推出，全新的媒體查詢功能 prefers-reduced-transparency敬上 來自 CSS 媒體查詢 5 為 廣告。非不透明的介面可能會導致頭痛，或造成視覺上的困難 不同類型的視覺障礙因此，Windows、macOS 和 iOS 有系統偏好設定 即可減少或移除使用者介面的透明度

有了這項新的媒體查詢功能，CSS 就可以根據使用者的介面調整介面 指定降低透明度的意願：

.example {
  --opacity: .5;

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

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

在上述程式碼範例中，CSS 變數的不透明度值為 50% 並與 HSL 搭配使用，藉此建立半透明的藍色背景。 巢狀媒體查詢會檢查使用者偏好設定 可降低透明度，若為 true，則會將不透明度變數調整為 95%， 幾乎不透明的不透明度值

這項媒體查詢適合 其他偏好的媒體查詢 讓設計人員和開發人員發揮創意，同時為使用者進行調整。 你可以把這些媒體查詢內容想像成車上的椅子 調整使用者的位置；使用者造訪你的網站時 這類模型會自動進行調整太棒了！

減少資訊公開的用途

接下來的幾個章節將會展示 以有意義的方式降低資訊透明度

圖片上的半透明說明文字

一般而言，在圖片或影片縮圖上 或摘要以下範例說明一種方式 處理低透明度的偏好。疊加層的完全是 相同的字幕內容則改為在圖片下方顯示 疊加畫面。

透明的強制回應、通知和彈出式視窗

另一種讓 UI 元素疊加內容的方法，這通常是指 不透明度，設有強制回應、通知和彈出式視窗。在這些情況下 放大不透明度有助於尊重使用者的偏好 疊加色彩呈現一些細微的顏色，以便預覽。

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

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

自適應結霜玻璃

另一個熱門的圖片疊加層樣式是冰霜玻璃。在以下範例中 標題後方的圖片是產品圖片的鏡像。這個 有幾個優點：不裁剪圖片，以及淺色或深色 通常結果會有更多偏好

.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%;
  }
}

主標題

常見的首頁元素會以粗體訊息與循環播放的影片重疊，或 動畫圖片。以下範例採用彩色半透明漸層 疊加和無限動畫背景圖片。雖然這種做法能吸引 很多人都會發現，因為對比度偏低 以及無法控制的透明度和動作

這個問題可以透過以下兩項 CSS 媒體查詢來修正： 偏好減少的情緒 偏好減少透明度在減少動作的媒體查詢中 只在使用者俱有「no-preference」時套用無限動畫折扣金額 動作，向程式碼發出動作，表示此使用者可進行動作。

此外，透過降低透明度的媒體查詢，您可以將 透明度，因此疊加層顏色接近 100%。現在訊息很容易讀取 去除動態幹擾元素或相片對比度不佳的問題

將所有內容彙整在一起，您就能部署廣告素材使用者介面，同時確保 目標對象可以閱讀訊息並接收訊息

.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 上的某些內容 相關例子呈現了相輔相成的

這有助於您思考的是健康基準體驗， 越來越仰賴如果使用者可以接受，請將其加入體驗中。

開發人員工具

Chrome 開發人員工具可以模擬這項偏好設定，以降低透明度 (且 )。在以下影片中 瞭解如何切換 opts-color-scheme 和 refers-reduced-transparency 媒體查詢，包含低、深、透明和減少透明度 冰霜玻璃卡的變體。