应用 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 是一种视觉效果肌张力障碍病人，汉语我只有谷歌在线翻译，汉语翻译出去是前庭功能肌张力障碍，我感觉不太对，Google了一下是一种会造成 晕眩的一类症状，例如一个动漫一秒闪动数次，便会造成 病人的不适感。

操作方法，或是上边那一段编码：

.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 编写网页页面的2个按键：

查看源代码，各自能够 见到2个按键的颜色饱和度：

能够 见到，绿底黄字按键的颜色饱和度是沒有做到规范的，也被用淡黄色的感叹号标志了出去。

此外，在查看源代码的 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;
    }
}

但是，它是仍处在试验室的作用，暂时没有一切电脑浏览器适用该媒体查询~