偏好減少動作媒體查詢偵測使用者是否提出要求 將使用的動畫或動作量降到最低。
不是每個人都喜歡裝飾性動畫或轉場效果,而且有些使用者覺得動態效果
遇到視差捲動、縮放效果等問題時,仍感到不適。使用者偏好設定媒體
查詢 prefers-reduced-motion
可讓您設計一個動態縮小的網站變化版本,鎖定符合以下條件的使用者顯示:
表示已做出此偏好。
現實生活和網路中的動作過多
另一天我和孩子一起溜冰今天是很可愛的日,陽光閃耀 溜冰場因人而異 ⛸。唯一的問題是,我對人群的合作不太好。如此一來 有許多人正在移動的目標,我卻無法關注任何事情,最終自己失去了這些目標 看起來會超載,差不多是在山頂 🐜?。
![溜冰選手的厚度。](https://web.developers.google.cn/static/articles/prefers-reduced-motion/image/throng-feet-ice-skating-57c271f1a5c82.jpg?authuser=19&hl=zh-tw)
有時候,網路上也會出現類似情況:閃爍的廣告、精美的視差效果、令人驚訝
顯示動畫、自動播放影片等等,因為網路世界有時會令人眼花撩亂...
幸好,有別於在現實生活中,其實有一套解決方案。CSS 媒體查詢
prefers-reduced-motion
可讓開發人員為使用者建立頁面的變化版本
而且動作會減少例如不自動播放影片
停用某些純粹的裝飾效果,針對特定使用者徹底重新設計網頁。
深入介紹這項功能前,我想先回顧一下 在網路上。如有需要,你也可以略過背景資訊並 直接輸入技術細節
網頁版動畫
動畫常用於向使用者提供意見回饋,例如讓讀者知道 以及正在處理動作。舉例來說,在購物網站上 以動畫轉變為「飛」轉換為虛擬購物車,其圖示為 。
另一個用途是運用動態效果 入侵使用者的認知 結合多種畫面、中繼資料和低品質預覽圖片 耗費大量時間,並使整體體驗更快速。概念 以便快速載入物件 並藉此瞭解後續活動
最後,還有「裝飾」效果,例如動畫漸層、視差捲動和背景 還有一些其他影片雖然許多使用者都喜歡這類動畫,但有些使用者並不滿意,因為 讓他們感到分心或放慢自己在最糟的情況下,使用者甚至可能因為動態效果而受到影響 感覺太生病,就像是真實經歷一樣,因此對這些人來說,減少動畫是一件醫療 。
動作觸發的骨骼光譜失調
部分使用者的使用體驗 動畫內容中出現汙染或噁心。 舉例來說,如果主要元素不是主要元素,捲動動畫就可能導致動作失調 與捲動相關聯的元素經常移動。例如視差捲動動畫 可能會導致子元素異常移動,因為背景元素移動的速率與前景不同 元素。脊椎動物 (內側耳內) 失調反應包括暈眩、噁心和偏頭痛 頭痛,有時可能需要休息一段時間才能恢復。
移除作業系統上的動作
許多作業系統都有無障礙設定,可讓您指定降低頻率的偏好設定 長時間使用動態效果以下螢幕截圖顯示 macOS Mojave 的「Reduce action」偏好設定 Android Pie 的「移除動畫」偏好設定。勾選後,這些偏好設定就會造成 系統就不會使用應用程式啟動動畫等裝飾性效果應用程式本身 應同時遵循這項設定,並移除所有不必要的動畫。
![macOS 設定畫面顯示「減少動態效果」核取方塊。](https://web.developers.google.cn/static/articles/prefers-reduced-motion/image/a-screenshot-the-macos-s-02f7529755e96.png?authuser=19&hl=zh-tw)
![Android 設定畫面顯示「移除動畫」核取方塊。](https://web.developers.google.cn/static/articles/prefers-reduced-motion/image/a-screenshot-the-android-94061601243dd.png?authuser=19&hl=zh-tw)
移除網路上的動態
媒體查詢層級 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),因此請務必
並在發現損壞時停用。
相關連結
- 最新編輯的草稿 媒體查詢層級 5 規格。
prefers-reduced-motion
已開啟 Chrome 平台狀態。prefers-reduced-motion
Chromium 錯誤。- 閃爍 打算導入貼文功能。
特別銘謝
致敬 Stephen McGruer 的
Chrome 版 prefers-reduced-motion
和
Rob Dodson 也已檢閱過這份文件。
主頁橫幅:Hannah Cauhepe 在 Unsplash 上提供。