CSS 偏好採用較低的透明度

針對偏好不透明 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%，也就是接近不透明的不透明度值。

這項媒體查詢十分適合其他偏好的媒體查詢，可讓設計人員和開發人員發揮創意，同時為使用者進行調整。這些媒體查詢就像汽車的椅子，會自動根據使用者調整位置。使用者造訪您的網站時，這類查詢會自動根據使用者的需求自動調整。好酷。

降低透明度的用途

在接下來幾節中，我們將專門展示一些關鍵時刻和機會，幫助大家以有意義的方式降低資訊透明度。

圖片上的半透明說明文字

在圖片或影片縮圖上與半透明說明文字或摘要重疊是相當常見的情況。下例說明降低透明度偏好設定的一種方式。重疊會完全移除，且與圖片下方顯示相同的說明文字內容，而非重疊的說明文字。

透明視窗、通知和彈出式視窗

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 媒體查詢修正：prefers-reduced-motion 和 preferreds-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) {
  …
}

開發人員和設計人員通常會根據這些偏好「遞補」使用者體驗，達到削減的思維。這個資訊清單會用媒體查詢中的資訊清單做為「縮減」，從使用者介面移除內容。該示例呈現了外加的精神，在使用者可以接受時加入動態效果和透明度。

這個做法有助於您思考一個自行可靠的健康基準體驗。接著，如果使用者同意的話，請再添加內容。

開發人員工具

Chrome 開發人員工具可以模擬這項偏好設定，降低「轉譯」分頁的透明度及降低透明度。在下列影片中，瞭解如何切換偏好設定 -color-scheme 和 refers-reduced-transparency 媒體查詢，以展示毛毛玻璃卡的淺色、深色、透明和減少的透明度變化。