使用CSS切换不同背景的字体颜色

有没有人会说，\"我可以用CSS来做！\"看别人伸展肌肉的瞬间？这正是我在CSSconf EU 2018上观看Dag Inge Aas&Ida Aalen演讲时的感受。他们总部设在挪威，在那里，WCAG无障碍性不仅是一种良好的做法，而且实际上是法律所要求的（挪威政府！）。当他们正在开发一种允许用户为其主要产品选择颜色主题的功能时，他们面临着一个挑战：根据容器的选定背景颜色自动调整字体颜色。如果背景是暗的，那么最好是有一个白色的文本，以保持其WCAG对比度兼容。但是如果选择了浅背景色，会发生什么呢？文本既难以辨认，又无法访问。他们使用了一种优雅的方法，并使用\"颜色\"npm包解决了这个问题，添加了条件边框，并在使用时自动生成二次颜色。但这是一个JavaScript解决方案。这是我的纯CSS替代品。挑战是我要达到的标准： - 根据背景颜色将字体color更改为黑色或白色 - 对边框应用相同的逻辑，使用背景底色的较暗变化来提高按钮的可见性，仅当背景非常轻，自动生成一个二次的，60度的色调旋转颜色，这意味着运行HSL颜色。将后台声明设置为HSL，其中每个参数都是一个CSS自定义属性，这样就可以用一种非常简单的方法来确定亮度并将其用作条件语句的基础。:root {--hue: 220;--sat: 100;--light: 81;}.btn {background: hsl(var(--hue), calc(var(--sat) * 1%), calc(var(--light) * 1%));}这应该允许我们在运行时通过更改变量和运行if/else语句来更改前景色，从而将背景切换为我们想要的任何颜色。除了…我们在CSS上没有if/else语句…还是？自从引入了CSS变量之后，我们也得到了条件语句。或者差不多。这个技巧是基于这样一个事实：一些CSS参数被限制为一个最小值和最大值。例如，想想不透明。有效范围是0到1，所以我们通常保持在那里。但我们也可以声明不透明度为2、3或1000，它将被限制为1并被解释为这样。以类似的方式，我们甚至可以声明一个负的不透明度值，并将其上限设置为0。.something {opacity: -2; /* resolves to 0, transparent */opacity: -1; /* resolves to 0, transparent */opacity: 2; /*resolves to 1, fully opaque */opacity: 100; /* resolves to 1, fully opaque */}将技巧应用于字体颜色声明HSL颜色声明的亮度参数的行为类似，将任何负值限制为0（这将导致黑色，不管色调和饱和度是什么），任何高于100%的颜色都会被限制为100%（始终是白色）。因此，我们可以将颜色声明为HSL，从亮度参数中减去所需的阈值，然后乘以100%，强制其超过某个限制（亚零或高于100%）。因为我们需要负的结果以白色表示，而正的结果以黑色表示，所以我们还必须将结果乘以-1进行反转。让我们回顾一下这段代码：从80的亮度开始，考虑到60的阈值，减法的结果是20，乘以-100%，结果是-2000%，上限为0%。我们的背景比阈值要轻，所以我们认为它很轻，并使用黑色文本。如果我们将--light变量设置为20，那么减法的结果将是-40，乘以-100%将变成4000%，上限为100%。我们的光变量低于阈值，因此我们将其视为\"暗\"背景，并应用白色文本以保持高对比度。生成条件边框当元素的背景变得太浅时，它很容易在白色背景下丢失。我们可能有一个按钮，甚至没有注意到它。为了在真正浅色上提供更好的用户界面，我们可以基于非常相同的背景色设置一个边框，只需较深的颜色即可。基于该背景色的带深色边框的浅色背景。要实现这一点，我们可以使用相同的技术，但将其应用于HSLA声明的alpha通道。这样，我们可以根据需要调整颜色，然后得到完全透明或完全不透明。:root {/* (...) */--light: 85;--border-threshold: 80;}.btn {/* sets the border-color as a 30% darker shade of the same color*/--border-light: calc(var(--light) * 0.7%);--border-alpha: calc((var(--light) - var(--border-threshold)) * 10);border: .1em solid hsla(var(--hue), calc(var(--sat) * 1%), var(--border-light), var(--border-alpha));}假设色调为0，饱和度为100%，如果背景亮度高于80，则上述代码将提供一个完全不透明的纯红色边框，亮度为原始亮度的70%；如果背景亮度较暗，则提供一个完全透明的边框（因此，完全没有边框）。设置辅助，60°色调旋转

使用CSS切换不同背景的字体颜色

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么