我在Safari技术预览的发行说明中看到了它对CSS中的颜色对比度（）函数的支持。野生动物园首先在这里出门。据我所知，还没有其他浏览器支持这一点，我不知道稳定的野生动物园何时会发货，或者是否有其他浏览器会发货。但！这是一个很好的主意！我的任何本机工具都可以使我们运送更容易访问的界面（其中哪个颜色对比为一部分）很酷。因此，让我们尝试使它工作。
任何人都可以下载Safari技术预览，所以我做到了。
我不得不询问有关此问题的问题，但仅仅因为这是一个预发行的浏览器，这并不意味着默认情况下所有这些功能都处于活动状态。就像Chrome Canary具有您必须打开的功能标志一样，Safari技术预览也是如此。因此，我不得不这样对其进行翻转：
该发行说明没有有关如何实际使用color-Contrast（）的任何信息，但是幸运的是，Web搜索出现了一个规格（它是颜色模块5的一部分），而MDN具有一个页面，其中包含非常基本的语法信息。
这就是我的理解：
上面的示例有点愚蠢，因为它总是会返回白色 - 与黑色形成最大的对比。当这些颜色值中的一个或多个动态时，此功能实际上会变得有用，这意味着它很可能是CSS自定义属性。
该功能返回颜色，因此我猜想的顶级用例将根据动态背景设置颜色。所以…
部分 {
背景：var（-bg）;
颜色：颜色对比度（var（-bg）与白色，黑色）；
}现在，我们可以将任何颜色倒入-bg，我们要么获得白色或黑色文字，具体取决于最大的对比：
这是非常酷的，即使在最基本的用例中也是如此。
这是戴夫（Dave）的演示，他不仅在父母中设置文本颜色，而且还设置了链接的颜色，链接也有不同的颜色可供选择。当然，使用HSL滑块（在Safari Technology Preview中）播放它可以看到它的起作用。
仅选择两种具有足够对比度的颜色就足够容易了（尽管您会惊讶地被我们当中有良好意图的我们中的那些人搞砸了多久）。但是哦，哇，在不同的情况下，它会变得很快变得复杂，更不用说有很多颜色变化了，或者上帝禁止，任意组合。
这是我与Dave的测试仪一起玩的视频，以便您可以看到颜色如何在不同的地方更新。
以上是首次探索颜色对比度（）的详细内容。更多信息请关注PHP中文网其他相关文章！
