使用 CSS perfer-* 規範，提高網站的可訪問性與健壯性

文本將介紹 CSS 媒體查詢中新增的幾個特性功能：

• prefers-reduced-motion
• prefers-color-scheme
• prefers-contrast
• prefers-reduced-transparency
• prefers-reduced-data

利用好它們，可以很好的提高咱們網站的健壯性與可訪問性！

互聯網發展到今天，對於咱們的前端而言，咱們的關注點不該該僅僅是咱們產出的頁面能不能用，也須要更多的去關注咱們的頁面好很差用，有沒有照顧到更多的用戶羣體？

要知道，截至 2020 年 12 月，中國網民規模達 9.89 億（數據來源 - 第47次《中國互聯網絡發展情況統計報告》 ），並非每一個用戶都在使用 iPhone12 Pro Max 這種高端旗艦，更多的人羣可能使用的仍是百元機、千元機，十幾年前的 PC。也並不是每一個用戶都是身體或者生理上徹底健全的，會存在各類視覺障礙、聽覺障礙、行動障礙等用戶。

咱們的頁面須要漸進加強，使用各類新的、花裏胡哨的特性，添加各類酷炫的效果。

同時，也要考慮一些使用低端機型的用戶體驗，考慮部分殘障人士的使用，或者是尊重用戶的個性化配置。基於此，CSS 規範提出了一系列有益的屬性，用於適配用戶的一些個性化配置，提高頁面的可訪問性及健壯性。

也就是上面提到的 5 個 prefers-* 的內容，下面咱們逐一介紹。

CSS @media 規範

prefers-reduced-motion、prefers-color-scheme、prefers-contrast、prefers-reduced-transparency、prefers-reduced-data 都屬於 CSS @media 規範中的內容，最新的 CSS @media 規範出到了第五版 - Media Queries Level 5。

它們的用法基本一致，像是這樣，與咱們常寫的視口媒體查詢相似，以 prefers-reduced-motion 爲例子：

.ele {
    animation: aniName 5s infinite linear;
}

@media (perfers-reduced-motion: reduce) {
    .ele {
        animation: none;
    }
}

那麼，它們都有什麼用呢？

prefers-reduced-motion 減弱動畫效果

prefers-reduced-motion 規則查詢用於減弱動畫效果，除了默認規則，只有一種語法取值 perfers-reduced-motion: reduce，開啓了該規則後，至關於告訴用戶代理，但願他看到的頁面，能夠刪除或替換掉一些會讓部分視覺運動障礙者不適的動畫類型。

規範原文：Indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders.

vestibular motion disorders 是一種視覺運動障礙患者，中文我只能谷歌翻譯，翻譯出來是前庭運動障礙，我感受不太對，谷歌了一下是一種會致使眩暈的一類病症，譬如一個動畫一秒閃爍屢次，就會致使患者的不適。

使用方法，仍是上面那段代碼：

.ele {
    animation: aniName 5s infinite linear;
}

@media (perfers-reduced-motion: reduce) {
    .ele {
        animation: none;
    }
}

若是咱們有一些相似這樣的動畫：

在用戶開啓了 perfers-reduced-motion: reduce 時，就應該把它去掉。那麼該如何開啓這個選項呢？MDN -- prefers-reduced-motion 給出的是：

• 在 GTK/Gnome 中，能夠經過 GNOME Tweaks （在「通用」或「外觀」菜單中，取決於具體版本） 的配置，設置 gtk-enable-animations 的值爲 false
• 能夠在 GTK 3 的配置文件中的 [Settings] 模塊下設置 gtk-enable-animations = false
• 在 Windows 10 中：設置 > 輕鬆獲取 > 顯示 > 在 Windows 中顯示動畫
• 在 Windows 7 中：控制面板 > 輕鬆獲取 > ?是計算機更易於查看 > 關閉沒必要要動畫
• 在 MacOS 中：系統偏好 > 輔助使用 > 顯示 > 減小運動
• 在 iOS 上：設置 > 通用 > 輔助性 > 減小運動
• 在 Android 9+ 上：設置 > 輔助性 > 移除動畫

prefers-color-scheme 適配明暗主題

prefers-color-scheme 仍是很是好理解的，它用於匹配用戶經過操做系統設置的明亮或夜間（暗）模式。它有兩個不一樣的取值：

• prefers-color-scheme: light： 明亮模式
• prefers-color-scheme: dark： 夜間（暗）模式

語法以下，若是咱們默認的是明亮模式，只須要適配夜間模式便可：

body {
    backgroun: white;
    color: black;
}

@media (perfers-color-scheme: dark) {
    body {
        backgroun: black;
        color: white;
    }
}

固然，上述只是 CSS 代碼示意，要作到兩套主題的切換確定不是這麼簡單，方法也不少，本文不贅述，讀者能夠自行了解各類實現主題切換，或者是明暗切換的方案。

prefers-contrast 調整內容色彩對比度

prefers-contrast 該 CSS 媒體功能是用來檢測用戶是否要求將網頁內容以更高或者更低的對比度進行呈現。其中：

• prefers-contrast: no-preference：默認值，不做任何變化
• prefers-contrast: less：但願使用對比度更低的界面
• prefers-contrast: more：但願使用對比度更高的界面

以 prefers-contrast: less 爲例子，語法以下：

body {
    backgroun: #fff; // 文字與背景對比度爲 5.74
    color: #666;
}

// 提高對比度
@media (perfers-contrast: more) {
    body {
        backgroun: #fff; // 文字與背景對比度爲 21
        color: #000;
    }
}

上面只是僞 CSS 代碼，具體可能須要對具體的一些元素進行處理，或者使用 filter: contrast() 全局統一處理，當開啓配置時，用於實現相似這樣的功能：

那爲何須要調整頁面的對比度呢？此舉是爲了讓一些視覺障礙的用戶有更好的體驗，這裏補充一些對比度可訪問性相關的知識。內容取自個人這篇文章 -- 前端優秀實踐不徹底指南

可訪問性 -- 色彩對比度

顏色，也是咱們每天須要打交道的屬性。對於大部分視覺正常的用戶，可能對頁面的顏色敏感度還沒那麼高。可是對於一小部分色弱、色盲用戶，他們對於網站的顏色會更加敏感，很差的設計會給他們訪問網站帶來極大的不便。

什麼是色彩對比度

是否曾關心過頁面內容的展現，使用的顏色是否恰當？色弱、色盲用戶可否正常看清內容？良好的色彩使用，在任什麼時候候都是有益的，並且不只僅侷限於對於色弱、色盲用戶。在戶外用手機、陽光很強看不清，符合無障礙標準的高清晰度、高對比度文字就更容易閱讀。

這裏就有一個概念 -- 顏色對比度，簡單地說，描述就是兩種顏色在亮度（Brightness）上的差異。運用到咱們的頁面上，大多數的狀況就是背景色（background-color）與內容顏色（color）的對比差別。

最權威的互聯網無障礙規範 —— WCAG AA規範規定，全部重要內容的色彩對比度須要達到 4.5:1 或以上（字號大於18號時達到 3:1 或以上），纔算擁有較好的可讀性。

借用一張圖 -- 知乎 -- 助你輕鬆作好無障礙的15個UI設計工具推薦：

很明顯，上述最後一個例子，文字已經很是的不清晰了，正經常使用戶都已經很難看得清了。

檢查色彩對比度的工具

Chrome 瀏覽器從很早開始，就已經支持檢查元素的色彩對比度了。以我當前正在寫做的頁面爲例子，Github Issues 編輯頁面的兩個按鈕：

審查元素，分別能夠看到兩個按鈕的色彩對比度：

能夠看到，綠底白字按鈕的色彩對比度是沒有達到標準的，也被用黃色的歎號標識了出來。

除此以外，在審查元素的 Style 界面的取色器，改變顏色，也能直觀的看到當前的色彩對比度：

prefers-reduced-transparency 減小透明元素

prefers-reduced-transparency 該 CSS 媒體功能是用來檢測用戶是否要求減小網頁中的透明元素：

• prefers-contrast: no-preference：默認值，不做任何變化
• prefers-contrast: reduce：但願界面元素存在儘量少的透明元素

以 prefers-contrast: reduce 爲例子，語法以下：

.ele {
    opacity: 0.5;
}

// 減小透明元素
@media (prefers-contrast: reduce) {
    .ele {
        opacity: 1;
    }
}

不過，這是仍處於實驗室的功能，暫時沒有任何瀏覽器支持該媒體查詢~ 😢

prefers-reduced-data 減小數據傳輸

對於部分網速較差的地區，或者流量很貴的狀況，用戶會但願減小頁面中的流量請求，基於此有了 prefers-reduced-data。

prefers-reduced-data 該 CSS 媒體查詢功能是用於告知用戶代理，但願減小頁面的流量請求。

• prefers-reduced-data: no-preference：默認值，不做任何變化
• prefers-reduced-data: reduce：但願界面元素消耗更少的互聯網流量

以 prefers-reduced-data: reduce 爲例子，語法以下：

.ele {
    background-image: url(image-1800w.jpg);
}

// 下降圖片質量
@media (prefers-reduced-data: reduce) {
    .ele {
        background-image: url(image-600w.jpg);
    }
}

當檢測到用戶開啓了 prefers-reduced-data: reduce，咱們將提供壓縮度更高，尺寸更小，消耗流量更少的圖片。

固然，上述代碼只是個示意，咱們能夠作的其實有更多。

不過，這是仍處於實驗室的功能，暫時沒有任何瀏覽器支持該媒體查詢~ 😢

固然，從 Chrome 85+ 開始，能夠經過開啓 #enable-experimental-web-platform-features 實驗室選項開啓該功能！

最後

提高網站的可訪問性與用戶體驗並不是易事，規範在持續優化進步的同時咱們也須要同步提高本身的相關知識技能。用戶羣體的擴大必然會存在各類需求的用戶，如今不太受重視可訪問性將來必定會愈來愈重要。

好了，本文到此結束，但願對你有幫助 :)

想 Get 到最有意思的 CSS 資訊，千萬不要錯過個人公衆號 -- iCSS前端趣聞 😄

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。