关于前端:使用-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 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。