偏好減少動作媒體查詢偵測使用者是否已要求作業系統將使用的動畫或動作量降到最低。
不是每個人都喜歡裝飾性動畫或轉場效果；有些使用者面對視差捲動、縮放效果等效果，會對動態感到暈眩。使用者偏好設定媒體查詢 prefers-reduced-motion 可讓您針對已提供此偏好的使用者，為網站設計動態縮小的變化版本。
現實生活和網路中的動作過多
另一天我和孩子一起溜冰今天真是個很開心的日子，太陽發出著光芒，溜冰場還跟了人 ⛸ 困惑。唯一的問題是，我對群眾不太好理解。隨著目標很多，我也不會專注在任何事情上，最後就會失去一分完全的視覺效果，就像在山頂 🐜?。
有時候，網路上也會出現相同的狀況，例如閃爍的廣告、精美的視差效果、令人驚訝的動畫、自動播放影片等，網路有時可能會讓人感到困擾...雖然與現實不同，但其實有辦法解決。CSS 媒體查詢 prefers-reduced-motion 可讓開發人員為偏好減少動態效果的使用者建立頁面變化版本。這可能包括不自動播放影片、停用特定純裝飾效果，或是針對特定使用者徹底重新設計頁面。
在深入介紹這項功能前，讓我們先退一步，思考一下網站上使用了哪些動畫。您也可以略過背景資訊，並直接查看下方的技術詳細資料。
網頁版動畫
動畫常用於向使用者提供意見回饋，例如讓訊息瞭解系統已收到並處理動作。舉例來說，在購物網站上，產品可以動畫成「飛」成虛擬購物車，呈現網站右上角的圖示。
另一個使用案例是運用動態效果駭入使用者看法，做法是結合架構畫面、內容中繼資料和低畫質圖片預覽來佔用大量使用者時間，進而加快完整體驗。旨在為使用者提供後續情況的相關背景資訊，同時盡快載入項目。
最後，還有多種「裝飾」效果，例如動畫漸層、視差捲動、背景影片和其他多種效果。雖然許多使用者都喜歡這類動畫，但有些使用者可能會覺得受到干擾或減慢，而感到不悅。在最糟糕的情況下，使用者甚至可能因為實際經歷而遭遇動暈症狀，因此對於降低動畫的使用者來說，減少動畫是「必需品」。
動作觸發的骨骼光譜失調
有些使用者會遇到動畫內容模糊或噁心的情形。舉例來說，如果與捲動相關聯的主要元素以外的元素在許多位置移動，捲動動畫就可能導致動作失調。舉例來說，視差捲動動畫產生的效果可能令人感到不安，因為背景元素移動的速率與前景元素不同。獸醫 (內耳) 失調反應包括暈眩、噁心和偏頭痛，有時需要睡覺時才能恢復。
移除作業系統上的動作
許多作業系統都具有無障礙設定，可讓您指定長時間減少動作的偏好設定。下方螢幕截圖顯示 macOS Mojave 的「Reduce action」偏好設定和 Android Pie 的「RemoveAnimation」偏好設定。如果勾選，這些偏好設定會導致作業系統不使用應用程式啟動動畫等裝飾效果。應用程式本身也可以採用這項設定，並移除所有不必要的動畫。
移除網路上的動態
「媒體查詢層級 5」也為網路使用者提供較低的動態使用者偏好。媒體查詢可讓作者測試及查詢使用者代理程式或顯示裝置的值或功能，不受轉譯的文件影響。媒體查詢 prefers-reduced-motion 可偵測使用者是否已設定作業系統偏好，以便將使用的動畫或動作量降到最低。可能的值有兩種：
no-preference：表示使用者在基礎作業系統中未偏好任何設定。這個關鍵字值在布林結構定義中評估為false。reduce：表示使用者已設定作業系統偏好設定，表示介面應盡量減少移動或動畫，特別是移除所有非必要移動的點。
使用 CSS 和 JavaScript 環境中的媒體查詢
和所有媒體查詢一樣，您可以從 CSS 環境和 JavaScript 內容檢查 prefers-reduced-motion。
為了說明這兩項資訊，假設我有一個重要的註冊按鈕，希望使用者點選。我可以定義引人注目的「震動」動畫，但身為一位優良網路公民，我只會為明確同意動畫的使用者播放動畫。其他任何人 (例如選擇停用動畫或瀏覽器不瞭解媒體查詢的使用者) 才會播放動畫。
/*
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> 結構定義的媒體查詢
其中一個有趣的用途是播放依附於 media 屬性的 AVIF、WebP 或 GIF 動畫。如果 (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 狀態貓，建立了簡單的示範。首先，花點時間欣賞這個笑話
感覺很有趣，我會等著你您回來了，讓我來介紹示範。當您向下捲動時，每個 HTTP 狀態貓都會從右側或左側顯示。這是一片片地流暢的 60 FPS 動畫，但如上所述，有些使用者可能不喜歡這種動畫，或甚至因為動態而感到不適，因此示範的設計是遵循 prefers-reduced-motion。這種方式甚至能以動態方式運作，因此使用者能夠即時變更偏好設定，不必重新載入。如果使用者偏好減少動態效果，不必要的顯示動畫就會消失，將一般捲動動作向左滑動。以下螢幕側錄是實際操作的示範：
prefers-reduced-motion 示範應用程式的影片
結論
尊重使用者偏好是新型網站的關鍵，而瀏覽器也提供了更多功能，讓網頁開發人員可以達成這個目標。另一個啟動的範例是 prefers-color-scheme，可偵測使用者偏好淺色或深色色彩配置。您可以在我的「Hello Darkness, My OldFriends」一文中閱讀 prefers-color-scheme 的所有相關資訊 🌒?。
CSS 工作群組目前正標準化更多使用者偏好媒體查詢，例如 prefers-reduced-transparency (偵測使用者偏好降低透明度)、prefers-contrast (偵測使用者是否要求系統增加或減少相鄰顏色的對比度)，以及 inverted-colors (偵測使用者是否偏好反轉顏色)。
(額外獎勵) 強制 對所有網站降低動作
並非所有網站都會使用 prefers-reduced-motion，或者可能不足以帶來美味。
如果您出於任何原因，想要在所有網站上停止動作，其實也可以。做法是在造訪的每個網頁中插入包含以下 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 啟動的動作)，因此在您發現故障時，請務必停用方法。
相關連結
- 媒體查詢層級 5 規格的最新編輯器草稿。
- Chrome Platform Status 上的
prefers-reduced-motion。 prefers-reduced-motionChromium 錯誤。- 設計用於實作貼文的意圖。
特別銘謝
向 Stephen McGruer 公開感謝，在 Chrome 中實作 prefers-reduced-motion，以及與 Rob Dodson 一起檢閱這篇文章。主頁橫幅：Hannah Cauhepe 在 Unsplash 上提供。