CSS界近年来的一件大事就是每年年末的《State Of CSS》，也就是CSS状态调查，而《State Of CSS 2021》[1]是去年年底发布的。在关于特性的章节中，会列出当年一些比较新的CSS特性的使用概况：每个图代表一个特性，上图是根据使用次数来区分的。外圈是听说过，内圈是我用过，最后几行基本可以理解为没几个人听说过，用过的人就更少了。本文将介绍一些关于颜色的冷门新特性。color-gamut色域色域是2021年最冷门的特性，它到底神圣在哪里？color-gamut直译就是色域。它属于媒体查询之一，有3个值：color-gamut:srgb;色域：p3；色域：rec2020；用法如下：@media(color-gamut:srgb){p{background:#f4ae8a;}}如果命中了媒体查询，结果如下：OK，那么这个媒体查询有什么用呢？什么是色域？什么是色域？色域描述了人眼可以识别的色谱（可见色谱内的一系列颜色）。现代产品用于再现颜色的技术因设备而异，数码相机、扫描仪、显示器、打印机、平板电脑、投影仪等都可以再现不同范围的颜色。为了标准化这种色差，已使用各种测量颜色范围的方法来创建可传达的颜色范围，以便了解每个设备的功能。要了解色域，您需要了解颜色标准。查了很多文献，发现这个东西太复杂，太难理解了。这里我只简单说明一下。1931年，CIE（国际照明委员会）建立了标准观察者，推荐使用颜色坐标xyz（CIEXYZ）。这些坐标被用来构成现在的标准图表，它用数学理论来设定人类视觉的范围或颜色。此色度图的设计使得Y参数是颜色亮度的度量，而颜色的色度由x和y参数(Yxy)标识。color-gamutsrgb、p3、rec2020这三个可能的取值可以理解为三种不同的色域。srgb：sRGB是数字产品、Windows环境和显示器中使用的最标准的色域。这种色域的好处是在窄范围的基础上减少了输入输出的色差。这些限制使颜色能够快速再现，这就是为什么它今天被用作数字产品、显示器和互联网的标准。P3：DCI-P3色彩空间是SMPTE（美国电影电视工程师协会）推出的RGB色彩空间。色彩空间的色域比sRGB宽26%，常用于数字电影。所有数字电影放映机都能够完全显示DCI-P3色彩空间。将DCI-P3与4K显示器相结合，可为媒体专业人士提供极致的色彩精度和准确度。P3色域大于并包括srgb色域。rec2020：更新更大的色域，rec2020色域大于并包含p3色域。下图中还有更多不同的色域。用这张图大致补一下什么是色域：为什么要那么多色域，它们的区别在哪里？每个颜色标准都是为满足特定需求而创建的，并推动该技术涵盖更广泛的颜色范围。一方面，色彩标准让专业人士将他们的想法变为现实，另一方面，公众也可以享受一流品质的色彩和视觉娱乐。简单来说，标准显示器的色域适合日常使用，但不足以重现专业品质的图像。更高的色域意味着更逼真的演色性和更微妙的渐变。这导致更加醒??目和逼真的色调再现和更平滑的灰度级。色域的实际场景？好吧，这可能就是它如此不受欢迎的原因。其实它的兼容性还不错：除了对颜色要求变态到极致的场景，这个媒体查询功能实在是鸡肋。我感觉的环境完全没有施土。每个人都可以理解和理解。color-contrast()颜色对比选择虽然color-contrast()排在倒数第三位，但却是一个非常好用的颜色函数。之所以如此不受欢迎，是因为它还没有得到任何浏览器的支持：当然，这并不妨碍我们提前知道。color-contrast()是在CSSColorModuleLevel5[2]规范中引入的。它的语法很奇怪：color-contrast(vs#{2,}[to[|AA|AA-large|AAA|AAA-large]]?)其中：第一部分可以be任何颜色值，必须是第二部分#{2,}是以逗号分隔的颜色值列表，用来与第一个值进行比较，必须是第三部分[to[|AA|AA-大|AAAA级|AAA-大]]？),后面可以指定一个值，或者WCAG规范的强度，可选值AA表示值4.5AA-large表示值3AAA表示值7AAA-large表示值4.5实际使用如下：{颜色：颜色对比（#ffcc00vs#bbccdd，#0c0c0c，#d2691e）；//或颜色：颜色对比（#ffcc00vs#bbccdd,#0c0c0c,#d2691eto4.5）;//orcolor:color-contrast(#ffcc00vs#bbccdd,#0c0c0c,#d2691etoAA);}基于可访问性，理解color-contrast()需要一些前置知识来理解这个属性的具体作用。首先，你需要知道什么是颜色对比。这个在我的文章——前端良好实践不完全指南[3]什么是颜色对比中也有提到，你有没有关心过页面内容的展示，使用的颜色是否合适？色弱色盲用户能否正常工作？看清内容？善用颜色在任何时候都是有益的，而不仅仅是对色弱、色盲的用户。在户外使用手机时，在强烈的阳光下很难看清，但符合无障碍标准的高清、高对比度的文字更易阅读。这里有一个概念——色彩对比。简单的说，描述的是两种颜色之间的亮度差异。当应用到我们的页面中时，大多数情况是背景颜色（background-color）和内容颜色（color）之间的对比。借用一张图——知乎——推荐的15款UI设计工具，助你轻松无障碍[4]：很明显，上面最后一个例子，文字已经很不清晰了，普通用户已经很难看懂了.还有什么是WCAG规范的前置知识，了解WCAG规范。在可访问性（accessibility，也叫accessibilitydesign，Accessbility，A11y）中，有最权威的互联网无障碍规范——WCAG[5]，它制定了互联网无障碍的各个方面。其中，AA级规范规定，所有重要内容的色彩对比度需要达到4.5:1或以上（字号大于18时为3:1或以上），才能具有良好的可读性。在AAA级标准下，所有重要内容的色彩对比度需要达到7:1或以上（大于18字号时为4.5:1或以上），才能具有良好的可读性。这就是上面提到的AA、AA-large、AAA、AAA-large关键字的用武之地。使用color-contrast()了解了上面的前置知识后，就很容易理解color-contrast()的作用了。例如：{背景颜色：#fff;color:color-contrast(#fffvs#000,#666,#ddd);}这里背景色为白色#fff，需要通过color-contrast(#fffvs#000,#666,#ddd),依次比较#fff和#000,#666,#ddd,这3种颜色和白色的对比度分别为21,5.74,1.35,21的对比度最大,显示最清晰,所以最终颜色是#000。示意图如下：如果应用to关键字：{background-color:#fff;color:color-contrast(#fffvs#000,#666,#dddto4.5);}，那么contrast的最大颜色值就不用了，直接选择contrast超过4.5的第一个值就够了，这里的颜色的最终计算值为#666，因为5.74大于4.5。综上所述，color-contrast()的出现很好地反映了当今CSS发展的一个大方向，更注重用户体验和互联网的无障碍设计，这也是目前国内FE容易忽视的。Accessibility是我们网站非常重要的一个部分，但是大部分前端（其实应该是design,front-end,product）的同学都会忽略它。事实上，需要无障碍设计的不仅仅是残疾人。我们经常会遇到无障碍场景：记住，无障碍设计对大家更友好。关注可访问性并开始考虑可访问性设计。最后，本文介绍了2021年CSS使用现状中最冷门的两个特性，前者不好评价，但后者在未来还是有一定作用的。到此结束，希望这篇文章对你有所帮助：）参考文献[1]《State Of CSS 2021》：https://2021.stateofcss.com/zh-Hans/[2]CSSColorModuleLevel5：https://草稿。csswg.org/css-color-5/#colorcontrast[3]前端优秀实践不完全指南：https://github.com/chokcoco/cnblogsArticle/issues/26[4]知乎--帮你轻松做干得好无障碍的15款UI设计工具推荐：https://zhuanlan.zhihu.com/p/349761993[5]WCAG：https://www.w3.org/Translations/WCAG21-zh/[6]Github--iCSS:https://github.com/chokcoco/iCSS
