作者：Oscar Jite-Orimiono??

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

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

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

運(yùn)動偏好

對於許多用戶來說，動畫可以增強(qiáng)他們在網(wǎng)站上的體驗，但它們可能會妨礙其他用戶。過多的運(yùn)動可能會導(dǎo)致不適或分散注意力，也可能導(dǎo)致表現(xiàn)問題。

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

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

這是該頁面的 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);
  }
}

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

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

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

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

這是一個 CodePen：

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

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

這是簡單捲動動畫的 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);
  }
}

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

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

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

這是使用reduce的使用者將看到的內(nèi)容：

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

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

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

擁有減少運(yùn)動的選項將使網(wǎng)站對於運(yùn)動敏感的用戶使用起來更加舒適。

主題偏好

現(xiàn)在，網(wǎng)站和應(yīng)用程式可以選擇從淺色主題切換到深色主題，這是一種常見的做法。有些網(wǎng)站會根據(jù)系統(tǒng)偏好為您提供額外的選項。

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

這是一個淺色網(wǎng)頁：

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

.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 規(guī)則可能會耗費(fèi)太多工作，尤其是當(dāng)多個屬性共享相同值時。使用變數(shù)來繪製配色方案將幫助您避免重複：

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

這是與之前相同的頁面的螢?zāi)唤貓D，但啟動了黑暗模式：

這是一個您可以與之互動的 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);
  }
}

以下是淺色模式的網(wǎng)頁截圖：

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

這是深色模式的頁面：

[標(biāo)題>
背景照片由 Unsplash 上的 Plufow Le Studio 拍攝。

最佳實踐

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

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

執(zhí)行

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

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

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

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

使用 JavaScript 實作使用者首選項

使用者偏好也可以使用 JavaScript 來實現(xiàn)。您可以根據(jù)使用者偏好為特定元素新增類別。

使用我們的第一個帶有動畫條紋的範(fàn)例，以下是如何使用 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 中直接選擇，因此採用了這種方法。

使用資料屬性實現(xiàn)使用者偏好

自訂 HTML 資料屬性和 JavaScript 可讓您實作使用者首選項。資料屬性可讓您儲存 HTML 元素的資訊而不影響文件的結(jié)構(gòu)。它們使用資料前綴，並且可以使用 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);
  }
}

減少數(shù)據(jù)使用

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

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

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

最後的話

尊重使用者偏好對於增強(qiáng)每個使用者的體驗至關(guān)重要。在本教學(xué)中，您學(xué)習(xí)如何使用prefers-reduced-motion 和prefers-color-scheme 媒體查詢來偵測使用者的動作和主題設(shè)定。還有關(guān)於對比度和透明度偏好的 @media 規(guī)則。

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

---

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

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

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

現(xiàn)代化偵錯 Web 和行動應(yīng)用程式的方式 - 開始免費(fèi)監(jiān)控。

以上是使用 CSS 和 JavaScript 適應(yīng)使用者動作和主題偏好的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！