偏好減少動態：有時候，動作越少

偏好減少動作媒體查詢偵測使用者是否提出要求 將使用的動畫或動作量降到最低。

Thomas Steiner

不是每個人都喜歡裝飾性動畫或轉場效果，而且有些使用者覺得動態效果 遇到視差捲動、縮放效果等問題時，仍感到不適。使用者偏好設定媒體 查詢 prefers-reduced-motion 可讓您設計一個動態縮小的網站變化版本，鎖定符合以下條件的使用者顯示： 表示已做出此偏好。

瀏覽器支援

  • Chrome：74.
  • Edge：79，
  • Firefox：63。
  • Safari：10.1.

資料來源

現實生活和網路中的動作過多

另一天我和孩子一起溜冰今天是很可愛的日，陽光閃耀 溜冰場因人而異 ⛸。唯一的問題是，我對人群的合作不太好。如此一來 有許多人正在移動的目標，我卻無法關注任何事情，最終自己失去了這些目標 看起來會超載，差不多是在山頂 🐜?。

溜冰選手的厚度。
現實生活中視覺效果超載

有時候，網路上也會出現類似情況：閃爍的廣告、精美的視差效果、令人驚訝 顯示動畫、自動播放影片等等，因為網路世界有時會令人眼花撩亂... 幸好，有別於在現實生活中，其實有一套解決方案。CSS 媒體查詢 prefers-reduced-motion 可讓開發人員為使用者建立頁面的變化版本 而且動作會減少例如不自動播放影片 停用某些純粹的裝飾效果，針對特定使用者徹底重新設計網頁。

深入介紹這項功能前，我想先回顧一下 在網路上。如有需要，你也可以略過背景資訊並 直接輸入技術細節

網頁版動畫

動畫常用於向使用者提供意見回饋，例如讓讀者知道 以及正在處理動作。舉例來說，在購物網站上 以動畫轉變為「飛」轉換為虛擬購物車，其圖示為 。

另一個用途是運用動態效果 入侵使用者的認知 結合多種畫面、中繼資料和低品質預覽圖片 耗費大量時間，並使整體體驗更快速。概念 以便快速載入物件 並藉此瞭解後續活動

最後，還有「裝飾」效果，例如動畫漸層、視差捲動和背景 還有一些其他影片雖然許多使用者都喜歡這類動畫，但有些使用者並不滿意，因為 讓他們感到分心或放慢自己在最糟的情況下，使用者甚至可能因為動態效果而受到影響 感覺太生病，就像是真實經歷一樣，因此對這些人來說，減少動畫是一件醫療 。

動作觸發的骨骼光譜失調

部分使用者的使用體驗 動畫內容中出現汙染或噁心。 舉例來說，如果主要元素不是主要元素，捲動動畫就可能導致動作失調 與捲動相關聯的元素經常移動。例如視差捲動動畫 可能會導致子元素異常移動，因為背景元素移動的速率與前景不同 元素。脊椎動物 (內側耳內) 失調反應包括暈眩、噁心和偏頭痛 頭痛，有時可能需要休息一段時間才能恢復。

移除作業系統上的動作

許多作業系統都有無障礙設定，可讓您指定降低頻率的偏好設定 長時間使用動態效果以下螢幕截圖顯示 macOS Mojave 的「Reduce action」偏好設定 Android Pie 的「移除動畫」偏好設定。勾選後，這些偏好設定就會造成 系統就不會使用應用程式啟動動畫等裝飾性效果應用程式本身 應同時遵循這項設定，並移除所有不必要的動畫。

macOS 設定畫面顯示「減少動態效果」核取方塊。
Android 設定畫面顯示「移除動畫」核取方塊。

移除網路上的動態

媒體查詢層級 5 會帶來更流暢的動態效果 使用者對網路的偏好媒體查詢可讓作者測試及查詢值或特徵 或顯示裝置，與顯示的文件無關。媒體查詢 已使用 prefers-reduced-motion 偵測使用者是否已設定作業系統偏好設定，可將動畫長度降到最低，或是 所用的動態效果可能的值有兩種：

  • no-preference：表示使用者在基礎作業中未偏好設定 有些人會將 Cloud Storage 視為檔案系統 但實際上不是這個關鍵字值在布林結構定義中評估為 false。
  • reduce：表示使用者已將作業系統偏好設定設為 介面應盡量減少移動或動畫，並著重於所有非必要的標記 移動就會移除

使用 CSS 和 JavaScript 環境中的媒體查詢

和所有媒體查詢一樣，prefers-reduced-motion 可以透過 CSS 環境和 JavaScript 內容。

為說明這兩項資訊，假設我有一個重要的註冊按鈕，希望使用者點選。I 可以定義引人注目的「震動」但身為一位好網路公民 特別適合使用動畫的使用者 而對其他影響不大的使用者 停用動畫，或使用者不熟悉媒體查詢的瀏覽器使用者。

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}
敬上

為了說明搭配使用 prefers-reduced-motion 和 JavaScript 的方式，我們 定義了使用範本生成的複雜動畫 Web Animations API。CSS 規則 瀏覽器就會動態地觸發 JavaScript。 我得自己聽變更動畫，然後在刊登時手動停止可能會播放的動畫 動畫 (若使用者允許，也可重新播放)：

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

請注意，實際媒體查詢的括弧需為「必填」：

錯誤做法
window.matchMedia('prefers-reduced-motion: reduce');
正確做法
window.matchMedia('(prefers-reduced-motion: reduce)');

處理來自 <picture> 結構定義的媒體查詢

其中一個有趣的用途是播放動畫 AVIF、WebP 或 GIF 等 media 屬性。如果 (prefers-reduced-motion: no-preference) 的評估結果為 true，您可以放心 顯示動畫版本，否則是靜態版本：

<picture>
  <!-- Animated versions. -->
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <source
    srcset="nyancat.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <!-- Static versions. -->
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

請參閱以下範例。請嘗試切換裝置的動作偏好設定，瞭解有何差異。

著名的彩虹貓。

在要求時找出使用者的偏好設定

Sec-CH-Prefers-Reduced-Motion 用戶端提示標題 可讓網站在收到請求時，視需要取得使用者的動作偏好設定。 讓伺服器基於效能考量，內嵌正確的 CSS。

示範

我根據 Rogério Vicente 的精彩作品製作了一部示範影片 🐈? HTTP 狀態貓。首先，花點時間看看這個笑話 我等您分享。你們回來了，我先介紹一下 demo」。捲動頁面時，每個 HTTP 狀態貓 圖片會交替由右側或左側顯示。這是 60 FPS 的飛鏢黃流暢度 但如前所述，有些使用者可能會不喜歡它 示範方式是遵循prefers-reduced-motion。這項功能甚至可以動態方式 即時變更偏好設定，不需重新載入。如果使用者偏好減少動作， 不必要的揭露動畫會消失，一般的捲動動作則會向左移。 下列螢幕側錄會示範實際操作的情形：

prefers-reduced-motion 示範 應用程式

結論

尊重使用者的偏好是新式網站的關鍵，而瀏覽器的體驗則越來越多 網頁程式開發人員就能完成這些操作。另一個已啟動的範例 prefers-color-scheme， 偵測使用者偏好淺色或深色色彩配置。你可以閱讀 prefers-color-scheme文章中的「哈囉，我的老友 🌒?。

CSS 工作團隊正在標準化 使用者偏好媒體查詢，例如 prefers-reduced-transparency敬上 (偵測使用者偏好降低透明度)、 prefers-contrast (偵測使用者是否 要求系統增加或降低相鄰顏色間的對比度)； 和 inverted-colors (偵測使用者是否 偏好色彩反轉的顏色)。

(額外獎勵) 強制 對所有網站降低動作

不是每個網站都會使用「prefers-reduced-motion」，或者可能不足以滿足您的品味。 如果您出於任何原因，想要在所有網站上停止動作，其實也可以。讓 Kubernetes 叢集 就是在您造訪的每個網頁中，插入包含以下 CSS 的樣式表。有 分為多個 瀏覽器擴充功能 您必須自行承擔相關風險！

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
  }
}

運作方式是，先前的 CSS 會覆寫所有動畫和轉場效果的持續時間 反而難以察覺因為某些網站顯示動畫 才能正確運作 (可能是因為特定步驟， animationend 事件)， animation: none !important;做法較為精簡即便先前的駭客入侵 並保證在所有網站上都能成功 (例如，若使用 Web Animations API)，因此請務必 並在發現損壞時停用。

特別銘謝

致敬 Stephen McGruer 的 Chrome 版 prefers-reduced-motion 和 Rob Dodson 也已檢閱過這份文件。 主頁橫幅：Hannah Cauhepe 在 Unsplash 上提供。