CSS 偏好採用較低的透明度

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

Adam Argyle
Adam Argyle
X GitHub

從 Chrome 118 開始，您可以使用 CSS Media Queries 5 中的新媒體查詢功能 prefers-reduced-transparency。不透明介面可能會導致頭痛，或對各種視力障礙者造成視覺困難。因此，Windows、macOS 和 iOS 都有系統偏好設定，可減少或移除 UI 的透明度。

瀏覽器支援

  • Chrome：118。
  • Edge：118。
  • Firefox：在標記後方。
  • Safari：不支援。

資料來源

有了瀏覽器中的新媒體查詢，CSS 就能為希望減少透明度的使用者調整介面：

.example {
  --opacity: .5;

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

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

在上述程式碼範例中，CSS 變數會在 50% 中保留不透明度值，然後與 HSL 搭配使用，建立半透明的藍色背景。巢狀媒體查詢會檢查使用者偏好設定是否要降低透明度，如果為真，則會將不透明度變數調整為 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 和 prefers-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) {
  …
}

開發人員和設計人員通常會以減法思維，根據這些偏好「回退」使用者體驗。這會在媒體查詢中被列為檢查「縮減」，也就是從 UI 中移除內容。這個範例呈現了附加的思想，如果使用者允許，就會加入動態效果和透明度。

這種做法有助於您思考健全的基準體驗，並確保其穩定性。然後，如果使用者同意，請加入相關體驗。

開發人員工具

Chrome 開發人員工具可在「算繪」分頁中模擬這項偏好設定，以減少透明度 (以及其他設定)。在以下影片中，我們將說明如何切換 opts-color-scheme 和偏好縮減透明度媒體查詢，以呈現冰霜玻璃資訊卡的淺色、深色、透明及低透明度變化版本。

https://codepen.io/web-dot-dev/pen/dyaojxr