使用 CSS 和 JavaScript 適應使用者動作和主題偏好

作者：Oscar Jite-Orimiono✏️

網路充滿了色彩、動畫和圖形效果，這些可以使網站既迷人又過度刺激。作為前端愛好者和專業人士，我們需要在充滿活力的視覺效果與易於使用、以用戶為中心的選項之間取得平衡，以適應那些喜歡更柔和體驗的人。

在本文中，我們將透過查看以下項目來事半功倍：

• 學習使用偏好減少運動和偏好顏色方案等媒體查詢來管理動畫和主題
• 遵循@media規則中的正確語法來應用使用者首選項
• 查看「prefers-reduced-data」等選項，可最大程度地減少連接受限的使用者的資料使用量

運動偏好

對於許多用戶來說，動畫可以增強他們在網站上的體驗，但它們可能會妨礙其他用戶。過多的運動可能會導致不適或分散注意力，也可能導致表現問題。

prefers-reduced-motion 媒體查詢檢查使用者是否在其電腦上啟用了限制網站動畫的設定。您可以為喜歡減少動作的使用者修改或完全停用動畫。

首先，讓我們建立一個帶有一些動畫的網頁。動畫條紋背景怎麼樣？

這是該頁面的 HTML：

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

這是帶有動畫條紋的效果：

無首選項語法適用於沒有首選項設定的用戶，而reduce則適用於有首選項設定的用戶。您可以為喜歡減少運動的使用者完全停用或修改動畫。以下是如何使用prefers-reduced-motion媒體查詢停用行動背景：

@media (prefers-reduced-motion: reduce) {
  .container::before {
    animation: none;
  }
}

附註：在執行Windows 11 的裝置上，您可以透過進入設定、選擇輔助功能、然後視覺效果並關閉來停用動畫動畫效果。對於幾乎所有類型的設備/作業系統，該過程都是類似的。

這是一個 CodePen：

您可以選擇更改動畫類型而不是停用它們。例如，對於喜歡減少運動的用戶，您可以使用淡入動畫，而不是滑入變換動畫。

如果您使用捲動動畫且元素從頁面一側滑入，則可以切換到更簡單的效果，例如淡入。

這是簡單捲動動畫的 CSS：

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

在此範例中，框元素將從網頁右側淡入並向左側移動。此運動由變換屬性控制，因此您可以簡單地為喜歡減少運動的用戶刪除它：

@media (prefers-reduced-motion: reduce) {
  .container::before {
    animation: none;
  }
}

沒有偏好的使用者在滾動時會看到這個：

這是使用reduce的使用者將看到的內容：

透過偏好減少運動媒體查詢，您可以根據使用者的需求調整/減慢複雜的動畫或完全停用它們。

這裡有一個 CodePen 可以與之交互，您可以在設備上禁用動畫以查看差異：

患有暈動病和眩暈等前庭疾病的使用者在觀看動畫時可能會感到迷失方向或頭暈。對於喜歡簡單 UI 的用戶來說，動畫也會分散他們的注意力。

擁有減少運動的選項將使網站對於運動敏感的用戶使用起來更加舒適。

主題偏好

現在，網站和應用程式可以選擇從淺色主題切換到深色主題，這是一種常見的做法。有些網站會根據系統偏好為您提供額外的選項。

prefers-color-scheme 媒體查詢可偵測使用者是否喜歡深色或淺色主題。用戶可以根據自己的裝置設定獲得預設主題。

這是一個淺色網頁：

這是使用者在預設主題為淺色時會看到的內容。然後，您可以使用首選顏色方案來建立深色主題：

.box {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.5s linear, opacity 0.5s linear;
}
.reveal {
  transform: translateX(0);
  opacity: 1;
}
@keyframes reveal {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

為淺色和深色模式編寫這樣的 CSS 規則可能會耗費太多工作，尤其是當多個屬性共享相同值時。使用變數來繪製配色方案將幫助您避免重複：

@media (prefers-reduced-motion: reduce) {
  .box {
    transform: translateX(0);
  }
}

這是與之前相同的頁面的螢幕截圖，但啟動了黑暗模式：

這是一個您可以與之互動的 CodePen：

prefers-color-scheme 不限於顏色；你可以用它來交換圖片：

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

以下是淺色模式的網頁截圖：

背景照片由 Unsplash 上的 Plufow Le Studio 拍攝。

這是深色模式的頁面：

[標題>
背景照片由 Unsplash 上的 Plufow Le Studio 拍攝。

最佳實踐

使用前請務必測試顏色對比度，以確保更好的可讀性。有多種工具可以幫助您選擇要使用的顏色。

切換主題時考慮所有可能需要更新的元素，而不僅僅是背景和文字。這就是為什麼使用 CSS 變數來儲存主題是一個好主意，您可能需要提供按鈕、陰影、邊框、連結等的替代項。

執行

實現使用者首選項的最直接方法是使用@media規則。您必須指定運動或主題的首選項，否則媒體查詢內的 CSS 規則將覆寫任何其他規則或裝置設定。

這意味著對於運動偏好，您必須指定它是減少還是無偏好，對於主題，它是淺色還是深色：

@media (prefers-reduced-motion: reduce) {
  .container::before {
    animation: none;
  }
}

這在測試程式碼時很有用，但請務必在實作之前指定確切的首選項。

使用 JavaScript 實作使用者首選項

使用者偏好也可以使用 JavaScript 來實現。您可以根據使用者偏好為特定元素新增類別。

使用我們的第一個帶有動畫條紋的範例，以下是如何使用 JavaScript 檢查使用者偏好的方法：

.box {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.5s linear, opacity 0.5s linear;
}
.reveal {
  transform: translateX(0);
  opacity: 1;
}
@keyframes reveal {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

這是 CSS：

@media (prefers-reduced-motion: reduce) {
  .box {
    transform: translateX(0);
  }
}

請注意，偽元素不是 DOM 的一部分，無法在 JavaScript 中直接選擇，因此採用了這種方法。

使用資料屬性實現使用者偏好

自訂 HTML 資料屬性和 JavaScript 可讓您實作使用者首選項。資料屬性可讓您儲存 HTML 元素的資訊而不影響文件的結構。它們使用資料前綴，並且可以使用 JavaScript 輕鬆操作：

@media (prefers-color-scheme: dark) {
    #main {
    background-image: repeating-linear-gradient(
      45deg,
      #553c9a,
    #553c9a 50px,
    #3a1e4f 50px,
    #3a1e4f 100px,
    #301934 100px,
    #301934 150px
    );
  }
  nav{
    background: rgba(0, 0, 0, 0.5);
  }
  .logo a,
  nav ul li a{
    color: #b393d3;
  }
  .content {
    background: rgba(0, 0, 0, 0.5);
  }
  .content h1 {
    color: #b393d3;
  }
  .content p{
    color: #b393d3;
  }
}

這是 CSS：

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

減少數據使用

雖然仍處於實驗階段，prefers-reduced-data 是一種建議的媒體查詢，可讓網站偵測使用者是否喜歡保存資料。

它使用與prefers-reduced-motion媒體查詢相同的語法，對於喜歡輕量級內容的使用者來說是減少的，對於沒有資料偏好的使用者來說是無偏好的。

它的一些潛在應用包括減少高解析度圖像、載入替代字體、停用自動播放影片以及延遲載入非關鍵內容。此媒體查詢可以幫助改善資料計劃有限或昂貴或網路連線不可靠的使用者的載入時間。

最後的話

尊重使用者偏好對於增強每個使用者的體驗至關重要。在本教學中，您學習如何使用prefers-reduced-motion 和prefers-color-scheme 媒體查詢來偵測使用者的動作和主題設定。還有關於對比度和透明度偏好的 @media 規則。

身為 Web 開發人員，您是架構師，有能力讓每個網站對每種類型的使用者來說都舒適、可存取且有效率。

---

您的前端是否佔用了使用者的 CPU？

隨著 Web 前端變得越來越複雜，資源貪婪的功能對瀏覽器的要求越來越高。如果您有興趣監控和追蹤生產中所有使用者的客戶端 CPU 使用情況、記憶體使用情況等，請嘗試 LogRocket。

LogRocket 就像是網路和行動應用程式的 DVR，記錄網路應用程式、行動應用程式或網站中發生的所有情況。您無需猜測問題發生的原因，而是可以匯總並報告關鍵的前端效能指標、重播用戶會話以及應用程式狀態、記錄網路請求並自動顯示所有錯誤。

現代化偵錯 Web 和行動應用程式的方式 - 開始免費監控。