1. 首页
  2. css

CSS变量+calc())+

正如您可能知道的,最近对CSS的更新和添加是非常强大的。从Flexbox到Grid,再到我们所关心的定制属性(又称CSS变量),所有这些都使得健壮的动态布局和界面比以往任何时候都更容易,同时开辟了许多我们以前梦寐以求的可能性。
p>,我在想,一定有一种方法可以使用自定义属性给元素的背景上色,同时保持与前景色的对比度,这种对比度足够高(使用白色或黑色),可以通过WCAG AA可访问性标准。
在JavaScript中用几行代码来实现这一点非常有效代码:
var = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) + (parseInt(rgb[2]) * 114)) / 1000);return (sum > 128) ? \”black\” : \”white\”;}
这将获取元素背景色的红、绿和蓝(RGB)值,将它们乘以一些特殊数字(分别为299、587和144),将它们相加,然后将总数除以1000。当这个和大于128时,它将返回黑色;否则,我们将得到白色。不算太糟。
唯一的问题是,在CSS中重新创建这个语句时,我们没有访问原生if语句来计算和的权限。那么,我们如何在没有CSS的情况下复制它呢?幸运的是,像HTML一样,CSS也非常宽容。如果我们将一个大于255的值传递给RGB函数,它将被限制在255。小于0的数字也是如此。即使是负整数也会被限制在0。所以,我们不是测试我们的和是大于还是小于128,而是从和中减去128,得到一个正整数或负整数。然后,如果我们把它乘以一个大的负值(例如-1000),我们得到的是非常大的正值或负值,然后我们可以把它们传递到RGB函数中。就像我之前说的,这将被限制到浏览器的期望值。
p>这里是一个使用CSS变量的例子:
pre>:root {–red: 28;–green: 150;–blue: 130;–accessible-color: calc(((((var(–red) * 299) +(var(–green) * 587) +(var(–blue) * 114)) / 1000) – 128) * -1000);}.button {color:rgb(var(–accessible-color),var(–accessible-color),var(–accessible-color));background-color:rgb(var(–red),var(–green),var(–blue));}p>如果我的数学是正确的(而且很可能不是),我们得到的总数是16758,远远大于255。将这三个值的总和输入rgb()函数,浏览器会将文本颜色设置为白色。
插入几个范围滑块来调整color值,现在你有了它:一个动态的UI元素,它可以根据它的background-color交换文本颜色,同时保持与WCAG AA的及格分数。将这个概念付诸实践
下面是一支笔,展示了如何使用这种技术来设置用户界面的主题。我复制了–accessible-color变量并将其移动到需要它的特定CSS规则中,为了帮助确保基于其前景的背景保持可访问性,我在几个地方将–accessible-color变量乘以-1。可以使用位于右下角的控件更改颜色。单击cog/gear图标以访问它们。还有其他方法可以做到这一点,不久前,Facundo Corradini在这篇文章中解释了如何做一些非常类似的事情。他结合hsl函数使用了一个稍微不同的计算。他还详细介绍了他提出这个概念时遇到的一些问题:
有些色调确实有问题(特别是黄色和青色),因为尽管亮度值相同,但它们的显示方式比其他颜色(例如红色和蓝色)更亮。因此,有些颜色被视为深色,并赋予白色文本,尽管它们非常明亮。
以CSS的名义发生了什么?
他接着提到Edge没有限制他的大数字,在我的测试中,我注意到有时它是有效的,而有时不是。如果有人能指出原因,请在评论中分享。
此外,Ana Tudor还解释了使用filter+mix-blend-mode如何帮助将文本与更复杂的背景进行对比。当我说复杂的时候,我的意思是复杂的。她甚至还演示了文本颜色是如何随着背景颜色的变化而变化的——真是太棒了!此外,Robin Rendle还解释了如何使用mix-blend-mode和伪元素,根据background-color自动反转文本颜色。
因此,将此作为另一种混合方法。定制属性为我们打开了这些可能性,同时允许我们以各种方式解决同样的问题,这是令人难以置信的令人敬畏的

CSS变量+calc())+ 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%8f%98%e9%87%8fcalc%ef%bc%88%ef%bc%89%ef%bc%89/