共计 3561 个字符，预计需要花费 9 分钟才能阅读完成。
最近几年 CSS 界的小事之一是每年年底的《State Of CSS》，也就是 CSS 现状考察，去年年底公布了《State Of CSS 2021》。其中对于个性这一章，会列出一些比拟新的 CSS 个性在当年的 应用状况概览：
每个图代表一个个性，上图是依照 应用数量 进行辨别，外圈示意 据说过 ，而内圈示意 应用过 ，最初几行的根本能够了解为， 据说过的人很少，用过的人更少。
本文将介绍其中对于 色彩 的几个冷门新个性。
color-gamut 色域
color-gamut 为 2021 最冷门个性，它到底是何方神圣？
color-gamut 直译过去就是色域。它属于媒体查问的其中一个，有 3 个取值：
color-gamut: srgb;
color-gamut: p3;
color-gamut: rec2020;应用形式如下：
@media (color-gamut: srgb) {
p {background: #f4ae8a;}
}如果命中该媒体查问，则后果如下：
OK，那么该媒体查问有什么用呢？色域又是个什么货色呢？
色域为何？
色域形容了人眼可辨认的色谱（可见色谱）内的一系列色彩。古代产品再现色彩的技术因设施而异，数码相机、扫描仪、显示器、打印机、平板电脑、投影仪等都能够再现不同范畴的色彩。为了使这种色差标准化，已应用各种测量色彩范畴的办法来创立可通信的色彩范畴，以便理解每个设施的性能。
理解色域须要理解色彩规范，查找了诸多文献后发现这个玩意切实太过简单，比拟艰涩难懂，这里仅简要论述。
1931 年，CIE（国内照明委员会）建设了一个规范观察者，该委员会倡议应用色坐标 xyz (CIEXYZ)。
这些坐标用于造成以后的规范图表，该图表应用数学实践设置人类眼帘的范畴或色彩。此色度图的设计使 Y 参数是色彩亮度的量度，而色彩的色度由 x 和 y 参数 (Yxy) 标识。
color-gamut 的 3 个可取值 srgb、p3、rec2020 能够了解为 3 种不同的色域。
srgb：sRGB 是数码产品、Windows 环境和显示器中应用最规范的色域。这种色域的长处是基于窄范畴缩小了输出和输入之间的色彩差别。这些限度容许疾速复制色彩，这也是现在它被用作数字产品、显示器和互联网规范的起因。P3：DCI-P3 色调空间是由 SMPTE（电影和电视工程师协会）引入的 RGB 色调空间。色调空间具备比 sRGB 宽 26% 的色域，通常用于数字电影。所有数字电影放映机都可能充沛显示 DCI-P3 色调空间。将 DCI-P3 与 4K 显示器相结合，可为媒体专业人士提供极致的色调精度和准确性。P3 色域大于并蕴含 srgb 色域。rec2020：更为新且大的一个色域，rec2020 色域大于并蕴含 p3 色域。
下图还有更多不同的色域，用这个图能够大抵脑补一下什么是色域：
为什么须要这么多的色域，它们的不同之处在于哪里？
每种色彩规范的创立都是为了满足特定需要并推动技术倒退以笼罩更宽泛的色彩范畴。一方面，色调规范容许专业人士将他们的想法变为事实，另一方面，公众能够享受一流品质的色调和视觉娱乐。
简略来说，规范显示器的色域实用于日常利用，但不足以再现业余品质的图像。
更高的色域意味着更实在的色调渲染和更奥妙的突变体现。这导致色调的再现更加醒目和真切，灰度级别更加平滑。
color-gamut 的实用场景？
好吧，这可能就是它为何如此冷门的起因，其实它的兼容性还能够：
除了对色调要求变态到极致的场景，这个媒体查问性能的确比拟鸡肋，在国内的大环境下我感觉基本没有利用的土壤。大家理解理解即可。
color-contrast() 色彩对比度选取
color-contrast() 尽管排名倒数第三，然而是个十分有用的色彩函数，它之所以如此冷门，是因为它目前还没失去任何浏览器的反对：
当然，不障碍咱们提前理解理解。
color-contrast() 在标准 CSS Color Module Level 5 提出。
它的语法比拟奇怪：
color-contrast(<color> vs <color>#{2,} [to [<number> | AA | AA-large | AAA | AAA-large]]? )其中：
- 第一局部
<color>能够是任何色彩值，必须值 - 第二局部
<color>#{2,}是一个逗号分隔的色彩值列表，用于与第一个值进行比拟，必须值 -
第三局部
[to [<number> | AA | AA-large | AAA | AAA-large]]? )，能够在前面制订一个数值，或者 WCAG 标准强度，可选值- AA 示意数值 4.5
- AA-large 示意数值 3
- AAA 示意数值 7
- AAA-large 示意数值 4.5
理论应用如下：
{color: color-contrast(#ffcc00 vs #bbccdd, #0c0c0c, #d2691e);
// 或者
color: color-contrast(#ffcc00 vs #bbccdd, #0c0c0c, #d2691e to 4.5);
// 或者
color: color-contrast(#ffcc00 vs #bbccdd, #0c0c0c, #d2691e to AA);
}基于可拜访性，了解 color-contrast()
想要理解这个属性的具体作用，得须要一些前置常识。
首先，得晓得什么是色彩对比度。这个在我的这篇文章里，也有提到过 — 前端优良实际不齐全指南
什么是色调对比度
是否曾关怀过页面内容的展现，应用的色彩是否失当？色弱、色盲用户是否失常看清内容？良好的色调应用，在任何时候都是无益的，而且不仅仅局限于对于色弱、色盲用户。在户外用手机、阳光很强看不清，合乎无障碍规范的高清晰度、高对比度文字就更容易浏览。
这里就有一个概念 — 色彩对比度，简略地说，形容就是两种色彩在亮度（Brightness）上的差异。使用到咱们的页面上，大多数的状况就是背景色（background-color）与内容色彩（color）的比照差别。
借用一张图 — 知乎 — 助你轻松做好无障碍的 15 个 UI 设计工具举荐：
很显著，上述最初一个例子，文字曾经十分的不清晰了，失常用户都曾经很难看得清了。
什么是 WCAG 标准
另外一个前置常识，理解 WCAG 标准。
在可拜访性（也叫无障碍设计，Accessbililty，A11y）中，有个最权威的互联网无障碍标准 —— WCAG，制订了互联网无障碍相干的方方面面规矩。
其中 AA 级别标准规定，所有重要内容的色调对比度须要达到 4.5:1 或以上（字号大于 18 号时达到 3:1 或以上），才算领有较好的可读性。
而 AAA 级别规范下，所有重要内容的色调对比度须要达到 7:1 或以上（字号大于 18 号时达到 4.5:1 或以上），才算领有较好的可读性。
这也是上述 AA、AA-large、AAA、AAA-large 关键字的由来。
应用 color-contrast()
理解了上述前置常识之后，就很容易理解 color-contrast() 的作用了。
举个例子：
{
background-color: #fff;
color: color-contrast(#fff vs #000, #666, #ddd);
}这里，背景色是红色 #fff，须要设置文本色彩，通过 color-contrast(#fff vs #000, #666, #ddd)，将 #fff 顺次与 #000、#666、#ddd 比拟，这 3 种颜色与红色的对比度别离是 21、5.74、1.35，21 对比度最大，展现最为清晰，所以，最终 color 的色彩就是 #000。
示意图如下：
如果利用上 to 关键字：
{
background-color: #fff;
color: color-contrast(#fff vs #000, #666, #ddd to 4.5);
}则不须要对比度最大色彩值，只选取对比度超出 4.5 的第一个值即可，这里 color 的最终计算值就是 #666，因为 5.74 大于 4.5。
总结一下
color-contrast() 的呈现，很好的体现了现在 CSS 倒退的一个大方向，更加关注用户体验，关注互联网的无障碍设计，这也是国内目前 FE 比拟容易漠视的。
可拜访性，在咱们的网站中，属于十分重要的一环，然而大部分前端（其实应该是设计、前端、产品）同学都会漠视它。
其实不仅仅是残障人士才会须要无障碍设计，咱们在很多时候，也会遇到无障碍场景：
记住，无障碍设计对所有人都更友善。关注无障碍，开始思考无障碍设计。
最初
本文介绍了 2 个在 2021 CSS 应用现状中最为冷门的个性，前者不好评估，然而后者在将来还是会有肯定的作用，即使用不上，理解理解也不吃亏~
好了，本文到此结束，心愿本文对你有所帮忙 :)
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄
更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。
