您好,登錄后才能下訂單哦!
這篇文章主要介紹了CSS媒體查詢中新增的特性有哪些的相關(guān)知識,內(nèi)容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇CSS媒體查詢中新增的特性有哪些文章都會有所收獲,下面我們一起來看看吧。
prefers-reduced-motion、prefers-color-scheme、prefers-contrast、prefers-reduced-transparency、prefers-reduced-data 都屬于 CSS @media 規(guī)范中的內(nèi)容,最新的 CSS @media 規(guī)范出到了第五版 - Media Queries Level 5。
它們的用法基本一致,像是這樣,與我們常寫的視口媒體查詢類似,以 prefers-reduced-motion 為例子:
.ele { animation: aniName 5s infinite linear; } @media (prefers-reduced-motion: reduce) { .ele { animation: none; }
那么,它們都有什么用呢?
prefers-reduced-motion 規(guī)則查詢用于減弱動畫效果,除了默認規(guī)則,只有一種語法取值 prefers-reduced-motion: reduce,開啟了該規(guī)則后,相當于告訴用戶代理,希望他看到的頁面,可以刪除或替換掉一些會讓部分視覺運動障礙者不適的動畫類型。
規(guī)范原文: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 (prefers-reduced-motion: reduce) { .ele { animation: none; } }
如果我們有一些類似這樣的動畫:
在用戶開啟了 prefers-reduced-motion: reduce 時,就應(yīng)該把它去掉。那么該如何開啟這個選項呢?MDN -- prefers-reduced-motion 給出的是:
在 GTK/Gnome 中,可以通過 GNOME Tweaks (在“通用”或“外觀”菜單中,取決于具體版本) 的配置,設(shè)置 gtk-enable-animations 的值為 false
可以在 GTK 3 的配置文件中的 [Settings] 模塊下設(shè)置 gtk-enable-animations = false
在 Windows 10 中:設(shè)置 > 輕松獲取 > 顯示 > 在 Windows 中顯示動畫
在 Windows 7 中:控制面板 > 輕松獲取 > 計算機更易于查看 > 關(guān)閉不必要動畫
在 MacOS 中:系統(tǒng)偏好 > 輔助使用 > 顯示 > 減少運動
在 iOS 上:設(shè)置 > 通用 > 輔助性 > 減少運動
在 Android 9+ 上:設(shè)置 > 輔助性 > 移除動畫
prefers-color-scheme 還是非常好理解的,它用于匹配用戶通過操作系統(tǒng)設(shè)置的明亮或夜間(暗)模式。它有兩個不同的取值:
prefers-color-scheme: light:
明亮模式
prefers-color-scheme: dark:
夜間(暗)模式
語法如下,如果我們默認的是明亮模式,只需要適配夜間模式即可:
body { background: white; color: black; } @media (prefers-color-scheme: dark) { body { background: black; color: white; } }
當然,上述只是 CSS 代碼示意,要做到兩套主題的切換肯定不是這么簡單,方法也很多,本文不贅述,讀者可以自行了解各種實現(xiàn)主題切換,或者是明暗切換的方案。
prefers-contrast 該 CSS 媒體功能是用來檢測用戶是否要求將網(wǎng)頁內(nèi)容以更高或者更低的對比度進行呈現(xiàn)。其中:
prefers-contrast: no-preference:默認值,不作任何變化
prefers-contrast: less:希望使用對比度更低的界面
prefers-contrast: more:希望使用對比度更高的界面
以 prefers-contrast: less 為例子,語法如下:
body { background: #fff; // 文字與背景對比度為 5.74 color: #666; } // 提升對比度 @media (prefers-contrast: more) { body { background: #fff; // 文字與背景對比度為 21 color: #000; } }
上面只是偽 CSS 代碼,具體可能需要對具體的一些元素進行處理,或者使用 filter: contrast() 全局統(tǒng)一處理,當開啟配置時,用于實現(xiàn)類似這樣的功能:
那為什么需要調(diào)整頁面的對比度呢?此舉是為了讓一些視覺障礙的用戶有更好的體驗,這里補充一些對比度可訪問性相關(guān)的知識。內(nèi)容取自我的這篇文章 -- 前端優(yōu)秀實踐不完全指南
顏色,也是我們天天需要打交道的屬性。對于大部分視覺正常的用戶,可能對頁面的顏色敏感度還沒那么高。但是對于一小部分色弱、色盲用戶,他們對于網(wǎng)站的顏色會更加敏感,不好的設(shè)計會給他們訪問網(wǎng)站帶來極大的不便。
是否曾關(guān)心過頁面內(nèi)容的展示,使用的顏色是否恰當?色弱、色盲用戶能否正??辞鍍?nèi)容?良好的色彩使用,在任何時候都是有益的,而且不僅僅局限于對于色弱、色盲用戶。在戶外用手機、陽光很強看不清,符合無障礙標準的高清晰度、高對比度文字就更容易閱讀。
這里就有一個概念 -- 顏色對比度,簡單地說,描述就是兩種顏色在亮度(Brightness)上的差別。運用到我們的頁面上,大多數(shù)的情況就是背景色(background-color)與內(nèi)容顏色(color)的對比差異。
最權(quán)威的互聯(lián)網(wǎng)無障礙規(guī)范 —— WCAG AA規(guī)范規(guī)定,所有重要內(nèi)容的色彩對比度需要達到 4.5:1 或以上(字號大于18號時達到 3:1 或以上),才算擁有較好的可讀性。
Chrome 瀏覽器從很早開始,就已經(jīng)支持檢查元素的色彩對比度了。
prefers-reduced-transparency 該 CSS 媒體功能是用來檢測用戶是否要求減少網(wǎng)頁中的透明元素:
prefers-contrast: no-preference:默認值,不作任何變化
prefers-contrast: reduce:希望界面元素存在盡可能少的透明元素
以 prefers-contrast: reduce 為例子,語法如下:
.ele { opacity: 0.5; } // 減少透明元素 @media (prefers-contrast: reduce) { .ele { opacity: 1; } }
對于部分網(wǎng)速較差的地區(qū),或者流量很貴的情況,用戶會希望減少頁面中的流量請求,基于此有了 prefers-reduced-data。
prefers-reduced-data 該 CSS 媒體查詢功能是用于告知用戶代理,希望減少頁面的流量請求。
prefers-reduced-data: no-preference:默認值,不作任何變化
prefers-reduced-data: reduce:希望界面元素消耗更少的互聯(lián)網(wǎng)流量
以 prefers-reduced-data: reduce 為例子,語法如下:
.ele { background-image: url(image-1800w.jpg); } // 降低圖片質(zhì)量 @media (prefers-reduced-data: reduce) { .ele { background-image: url(image-600w.jpg); } }
當檢測到用戶開啟了 prefers-reduced-data: reduce,我們將提供壓縮度更高,尺寸更小,消耗流量更少的圖片。
當然,上述代碼只是個示意,我們可以做的其實有更多。
不過,這是仍處于實驗室的功能,暫時沒有任何瀏覽器支持該媒體查詢~ ?
當然,從 Chrome 85+ 開始,可以通過開啟 #enable-experimental-web-platform-features實驗室選項開啟該功能!
關(guān)于“CSS媒體查詢中新增的特性有哪些”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“CSS媒體查詢中新增的特性有哪些”知識都有一定的了解,大家如果還想學習更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。