作者：Oscar Jite-Orimiono??

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

在本文中，我們將透過(guò)查看以下項(xiàng)目來(lái)事半功倍：

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

運(yùn)動(dòng)偏好

對(duì)於許多用戶(hù)來(lái)說(shuō)，動(dòng)畫(huà)可以增強(qiáng)他們?cè)诰W(wǎng)站上的體驗(yàn)，但它們可能會(huì)妨礙其他用戶(hù)。過(guò)多的運(yùn)動(dòng)可能會(huì)導(dǎo)致不適或分散注意力，也可能導(dǎo)致表現(xiàn)問(wèn)題。

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

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

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

這是帶有動(dòng)畫(huà)條紋的效果：

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

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

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

這是一個(gè) CodePen：

您可以選擇更改動(dòng)畫(huà)類(lèi)型而不是停用它們。例如，對(duì)於喜歡減少運(yùn)動(dòng)的用戶(hù)，您可以使用淡入動(dòng)畫(huà)，而不是滑入變換動(dòng)畫(huà)。

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

這是簡(jiǎn)單捲動(dòng)動(dòng)畫(huà)的 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)頁(yè)右側(cè)淡入並向左側(cè)移動(dòng)。此運(yùn)動(dòng)由變換屬性控制，因此您可以簡(jiǎn)單地為喜歡減少運(yùn)動(dòng)的用戶(hù)刪除它：

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

沒(méi)有偏好的使用者在滾動(dòng)時(shí)會(huì)看到這個(gè)：

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

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

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

患有暈動(dòng)病和眩暈等前庭疾病的使用者在觀(guān)看動(dòng)畫(huà)時(shí)可能會(huì)感到迷失方向或頭暈。對(duì)於喜歡簡(jiǎn)單 UI 的用戶(hù)來(lái)說(shuō)，動(dòng)畫(huà)也會(huì)分散他們的注意力。

擁有減少運(yùn)動(dòng)的選項(xiàng)將使網(wǎng)站對(duì)於運(yùn)動(dòng)敏感的用戶(hù)使用起來(lái)更加舒適。

主題偏好

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

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

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

這是使用者在預(yù)設(shè)主題為淺色時(shí)會(huì)看到的內(nèi)容。然後，您可以使用首選顏色方案來(lá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;
  }
}

為淺色和深色模式編寫(xiě)這樣的 CSS 規(guī)則可能會(huì)耗費(fèi)太多工作，尤其是當(dāng)多個(gè)屬性共享相同值時(shí)。使用變數(shù)來(lái)繪製配色方案將幫助您避免重複：

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

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

這是一個(gè)您可以與之互動(dòng)的 CodePen：

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

<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)頁(yè)截圖：

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

這是深色模式的頁(yè)面：

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

最佳實(shí)踐

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

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

執(zhí)行

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

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

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

這在測(cè)試程式碼時(shí)很有用，但請(qǐng)務(wù)必在實(shí)作之前指定確切的首選項(xiàng)。

使用 JavaScript 實(shí)作使用者首選項(xiàng)

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

使用我們的第一個(gè)帶有動(dòng)畫(huà)條紋的範(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);
  }
}

請(qǐng)注意，偽元素不是 DOM 的一部分，無(wú)法在 JavaScript 中直接選擇，因此採(cǎi)用了這種方法。

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

自訂 HTML 資料屬性和 JavaScript 可讓您實(shí)作使用者首選項(xiàng)。資料屬性可讓您儲(chǔ)存 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ù)使用

雖然仍處?kù)秾?shí)驗(yàn)階段，prefers-reduced-data 是一種建議的媒體查詢(xún)，可讓網(wǎng)站偵測(cè)使用者是否喜歡保存資料。

它使用與prefers-reduced-motion媒體查詢(xún)相同的語(yǔ)法，對(duì)於喜歡輕量級(jí)內(nèi)容的使用者來(lái)說(shuō)是減少的，對(duì)於沒(méi)有資料偏好的使用者來(lái)說(shuō)是無(wú)偏好的。

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

最後的話(huà)

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

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

---

您的前端是否佔(zhàn)用了使用者的 CPU？

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

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

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

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