作者：Oscar Jite-Orimiono??

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

在本文中，我們將通過查看以下項(xiàng)目來事半功倍：

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

運(yùn)動偏好

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

prefers-reduced-motion 媒體查詢檢查用戶是否在其計(jì)算機(jī)上啟用了限制網(wǎng)站動畫的設(shè)置。您可以為喜歡減少動作的用戶修改或完全禁用動畫。

首先，讓我們創(chuàng)建一個帶有一些動畫的網(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);
  }
}

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

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

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

旁注：在運(yùn)行 Windows 11 的設(shè)備上，您可以通過進(jìn)入設(shè)置、選擇輔助功能、然后視覺效果并關(guān)閉來禁用動畫動畫效果。對于幾乎所有類型的設(shè)備/操作系統(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);
  }
}

在此示例中，框元素將從網(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)整/減慢復(fù)雜的動畫或完全禁用它們。

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

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

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

主題偏好

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

prefers-color-scheme 媒體查詢檢測用戶是否喜歡深色或淺色主題。用戶可以根據(jù)自己的設(shè)備設(shè)置獲得默認(rèn)主題。

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

這是用戶在默認(rèn)主題為淺色時將看到的內(nèi)容。然后，您可以使用首選顏色方案來創(chuàng)建深色主題：

.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)多個屬性共享相同值時。使用變量來繪制配色方案將幫助您避免重復(fù)：

@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);
  }
}

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

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

這是深色模式下的頁面：

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

最佳實(shí)踐

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

切換主題時考慮所有可能需要更新的元素，而不僅僅是背景和文本。這就是為什么使用 CSS 變量存儲主題是一個好主意，您可能需要提供按鈕、陰影、邊框、鏈接等的替代項(xiàng)。

執(zhí)行

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

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

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

這在測試代碼時很有用，但請務(wù)必在實(shí)現(xiàn)之前指定確切的首選項(xiàng)。

使用 JavaScript 實(shí)現(xiàn)用戶首選項(xiàng)

用戶偏好也可以使用 JavaScript 來實(shí)現(xiàn)。您可以根據(jù)用戶偏好向特定元素添加新類。

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

使用數(shù)據(jù)屬性實(shí)現(xiàn)用戶偏好

自定義 HTML 數(shù)據(jù)屬性和 JavaScript 允許您實(shí)現(xiàn)用戶首選項(xiàng)。數(shù)據(jù)屬性允許您存儲 HTML 元素的信息而不影響文檔的結(jié)構(gòu)。它們使用數(shù)據(jù)前綴，并且可以使用 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ù)使用

雖然仍處于實(shí)驗(yàn)階段，prefers-reduced-data 是一種建議的媒體查詢，允許網(wǎng)站檢測用戶是否喜歡保存數(shù)據(jù)。

它使用與prefers-reduced-motion媒體查詢相同的語法，對于喜歡輕量級內(nèi)容的用戶來說是減少的，對于沒有數(shù)據(jù)偏好的用戶來說是無偏好的。

它的一些潛在應(yīng)用包括減少高分辨率圖像、加載替代字體、禁用自動播放視頻以及延遲加載非關(guān)鍵內(nèi)容。此媒體查詢可以幫助改善數(shù)據(jù)計(jì)劃有限或昂貴或互聯(lián)網(wǎng)連接不可靠的用戶的加載時間。

最后的話

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

作為一名 Web 開發(fā)人員，您是架構(gòu)師，有能力讓每個網(wǎng)站對每種類型的用戶來說都舒適、可訪問且高效。

---

您的前端是否占用了用戶的 CPU？

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

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

現(xiàn)代化調(diào)試 Web 和移動應(yīng)用程序的方式 - 開始免費(fèi)監(jiān)控。

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