文将介绍CSS媒体查询的几个新特性：prefers-reduced-motionprefers-color-schemeprefers-contrastprefers-reduced-transparencyprefers-reduced-data善用它们可以提高我们网站的健壮性和可访问性！互联网发展到今天，对于我们的前端来说，我们的关注点不应该只是我们输出的页面能不能用，更需要关注的是我们的页面好不好，有没有用心更多的用户群？要知道，截至2020年12月，中国网民规模达到9.89亿（数据来源——第47期《中国互联网络发展状况统计报告》），并不是每个用户都在使用iPhone12ProMax这样的高端旗舰，而且更多的人可能还在用十几年前的百元机、千元机、PC。并非每个用户都身体健康或身体健康，会有各种视觉障碍、听力障碍和行动障碍的用户。我们的页面需要渐进式增强，使用各种新的、花里胡哨的东西，添加各种炫酷的效果。同时还要考虑低端机型的用户体验，考虑一些残障人士的使用，或者尊重用户的个性化配置。基于此，CSS规范提出了一系列有益的属性来适应用户的一些个性化配置，提高页面的可访问性和健壮性。也就是上面提到的5个prefers-*的内容，下面我们一一介绍。CSS@media规范prefers-reduced-motion，prefers-color-scheme，prefers-contrast，prefers-reduced-transparency，prefers-reduced-data都属于CSS@media规范的内容。最新的CSS@media规范已经到了第五版——MediaQueriesLevel5。它们的用法基本相同，像这样，类似于我们经常写的视口媒体查询，以prefers-reduced-motion为例：.ele{animation:aniName5sinfinitelinear;}@media(prefers-reduced-motion:reduce){.ele{animation:none;}那么，它们的用途是什么？prefers-reduced-motion削弱动画效果prefers-reduced-motion规则查询用于降低动画效果，除默认规则外，只有一个语法值prefers-reduced-motion:reduce，开启该规则后，相当于告诉用户代理，他希望看到的页面可以删除或替换一些可能会让一些视觉和运动障碍者不舒服的动画类型。规范的原始文本：表示用户已通知系统他们更喜欢一个界面，该界面可以删除或替换基于运动的动画类型，这些动画会引发前庭运动障碍患者的不适。我可以谷歌翻译一下，翻译过来就是前庭运动障碍。我认为这是不对的。谷歌一下，是一种会引起头晕的病。例如，一个动画每秒闪烁多次，这会给患者带来不适。使用方法还是上面的代码：.ele{animation:aniName5sinfinitelinear;}@media(prefers-reduced-motion:reduce){.ele{animation:none;}}如果我们有这样一些动画：当用户打开当prefers-reduced-motion:reduce被指定时，它应该被删除。那么如何启用此选项呢？MDN--prefers-reduced-motion给出：在GTK/Gnome中，可以通过GNOMETweaks配置（在“常规”或“外观”菜单中，取决于版本），将gtk-enable-animations的值设置为false您可以在GTK3配置文件中的[Settings]模块下设置gtk-enable-animations=false在Windows10中：设置>轻松访问>显示>在Windows中显示动画在Windows7中：控制面板>轻松访问>ComputerEasiertoSee>关闭不必要的动画在MacOS中：系统偏好设置>辅助功能>显示>减少运动在iOS上：设置>通用>辅助功能>减少运动在Android9及更高版本中：设置>辅助功能>删除动画prefers-color-schemeAdapttolightanddarkthemeprefers-color-scheme还是很容易理解的，它用来匹配用户通过操作系统设置的亮或夜（暗）模式。它有两个不同的值：prefers-color-scheme:light:brightmodeprefers-color-scheme:dark:night(深色)模式语法如下，如果我们默认为bright模式，我们只需要适应night模式可以：body{background:white;color:black;}@media(prefers-color-scheme:dark){body{background:black;color:white;}}当然，以上只是CSS代码的提示，要做两套主题的切换肯定不是那么简单的，方法有很多。本文不再赘述。读者可以了解实现主题切换，或者明暗切换的各种方案。prefers-contrast调整内容颜色对比度prefers-contrast这个CSS媒体函数用于检测用户是否要求网页内容以更高或更低的对比度呈现。其中：prefers-contrast:no-preference:默认值，不要做任何改变prefers-contrast:less:想使用对比度较低的界面prefers-contrast:more:想使用对比度较高的界面取prefers-contrast:less以less为例，语法如下：body{background:#fff;//文字与背景的对比度为5.74color:#666;}//增强对比度@media(prefers-contrast:more){body{background:#fff;//文字和背景背景对比为21color:#000;}}以上只是一段伪CSS代码，可能需要对一些特定的元素进行处理，或者使用filter:contrast()进行全局统一处理。开启配置后，用来实现这样的功能：那为什么要调整页面的对比度呢？这是为了让一些视障用户有更好的体验。这里有一些关于对比度可访问性的知识。内容摘自我的这篇文章——IncompleteGuidetoFront-EndGoodPracticeAccessibility——ColorContrast颜色也是我们每天需要打交道的属性。对于大多数视力正常的用户来说，他们可能对页面的颜色没有那么敏感。但对于一小部分色弱色盲用户来说，他们对网站的颜色会比较敏感，设计不当会给他们访问网站带来极大的不便。什么是色彩对比你有没有关心过页面内容的展示，使用的颜色是否合适？色盲和色盲用户能否正常看到内容？善用色彩在任何时候都是有益的，而且不局限于色盲、色盲用户。在户外使用手机时，在强烈的阳光下很难看清，但符合无障碍标准的高清、高对比度的文字更易阅读。这里有一个概念——色彩对比。简单的说，描述的是两种颜色之间的亮度差异。当应用到我们的页面中时，大多数情况是背景颜色（background-color）和内容颜色（color）之间的对比。最权威的互联网无障碍规范——WCAGAA规范规定，所有重要内容的颜色对比度需要达到4.5:1或以上（字体大于18时为3:1或以上），才能具有良好的可读性.借用一张图——知乎——推荐的15款UI设计工具，助你轻松无障碍：图片很明显，上面最后一个例子，文字已经很不清晰了，普通用户很难看清上去。颜色对比检查工具Chrome浏览器很早以前就支持检查元素的颜色对比。以我目前正在写的页面为例，GithubIssues编辑页面上的两个按钮：imagereview元素，可以看到两个按钮的颜色对比：image可以看到绿色上白色按钮的颜色对比底色不达标，还标有黄色感叹号。另外，在被检元素的Style界面上，通过在拾色器中改变颜色，可以直观的看到当前的颜色对比：imageprefers-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;}}然而，这是还是实验室的一个功能，暂时没有浏览服务端支持这个媒体查询~😢imageprefers-reduced-data减少数据传输。对于一些网速不佳或流量昂贵的地区，用户会希望减少页面中的流量请求。基于此，有preferences-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，我们将提供压缩率更高、尺寸更小、流量消耗更少的图片。当然，上面的代码只是一个提示，其实我们能做的还有更多。不过这还是实验室的特性，暂时没有浏览器支持这个媒体查询~😢当然，从Chrome85+开始，可以通过启用#enable-experimental-web-platform-features实验室选项来开启这个功能！最后，要提高网站的可访问性和用户体验并不容易。在规范不断优化完善的同时，我们也需要同步提升自己的相关知识和技能。随着用户基数的扩大，必然会出现各种需求的用户，这些用户现在不太重视。可访问性在未来肯定会变得越来越重要。好了，本文到此结束，希望对你有所帮助！
