CSS自定义属性切换技巧

早在2020年7月，JAMES0X57的一封电子邮件显示了CSS规范中的一个隐藏宝石：一种利用Whitespace的技术来创建功能强大的条件逻辑并为自定义CSS属性提供功能切换。这取决于看似微不足道的细节：CSS自定义属性可以有效分配一个空格字符。

CSS规范中的关键段落是：“注意：<declaration-value></declaration-value> --foo: ;至少表示一个令牌，一个令牌可能是空格。

最初，这似乎并不引人注目。但是，正如James0x57所表明的那样，它解锁了令人惊讶的功能。核心思想涉及使用占位符变量来控制多个CSS属性。

考虑一个900px断点的方案。一个变量--mq-sm在initial （以高于900px的宽度）和一个空间（低于900px的宽度）之间开关。另一个变量--padding-when-small结合了initial和2rem 。

当浏览器宽度超过900px（ --mq-sm: initial ）时， --padding-when-small变为无效（包含initial和2rem ）。然后， var()函数的后备机制选择第二个值（ 2rem ）。相反，当宽度小于900px（ --mq-sm: （space））时， --padding-when-small变为有效时（“ 2REM”），并且使用了第一个值。

这允许基于单个占位符变量切换填充（或其他属性）。虽然似乎是一种管理填充的复杂方法，但真正的力量在于能够通过操纵占位符的单个媒体查询来控制许多其他值。这为在CSS中散射媒体查询提供了更清洁的替代方法。它有效地引入了CSS逻辑。

JAMES0X57进一步探索了这个概念，将其扩展到涵盖，或者XOR和其他逻辑操作。但是，复杂性显着增加。

CSS自定义属性的行为，尤其是关于后备和逗号分隔的值的行为，可能非常复杂。帕特里克·布罗塞特（Patrick Brosset）的作品（可能是2015年）强调了深深嵌套后卫的潜力：

颜色：var（-foo，var（ -  bar，var（-baz，var，var）（ -  wes，var（ -  you，var（crazy））））））;

自定义属性中的逗号分隔值：

内容：var（-foo，一，两个，三个）；

这就提出了有关逗号分隔值是否代表单个后备值的疑问。

Lea Verou还探索了这种空间技术，展示了其在创建按钮变化中的用途并在单个规则中控制多个属性。虽然功能强大，但LEA突出显示缺点：复杂的条件逻辑（例如“如果设置了 - foo，则是红色，否则是白色”），而语法（ --foo:; ）可能会对那些不熟悉该技术的人来说是错误的。

这种基于空格的方法代表了CSS自定义属性使用情况的重大进步。我们已经从简单的预处理器样变量，级联和后备，增加了JavaScript集成，现在是这种功能强大的条件逻辑。关于保留CSS预处理器变量的持续讨论强调了其独特的功能，尤其是在操纵颜色值方面。

以上是CSS自定义属性切换技巧的详细内容。更多信息请关注PHP中文网其他相关文章！