使用 CSS 自定义属性获得更好的用户体验
已发表: 2019-11-29
最后更新 - 2021 年 7 月 8 日
CSS3 带来了 CSS 规范长期以来的最大补充之一。 它引起了很多轰动，因为它解决了多年来困扰开发人员的一个关键问题，也是人们更喜欢使用像 SASS 这样的预处理器的主要原因：使用变量的能力。
随着 CSS 变量的添加，许多必须编写以支持主题等基本功能的代码不再需要。 这是一项有用的功能，可用于避免重复并启用更多用例，例如动态字体大小和在 Web 应用程序中添加响应性的简单性。
摆脱 CSS 变量的混乱
大多数应用程序的一个共同特点是品牌颜色需要在整个应用程序中保持相同和一致。 没有人会在脑海中存储十个不同的十六进制值以供将来参考，并且在文件之间来回复制值不仅麻烦，而且对生产力也是不利的。 现在，想象一下如果这些颜色需要改变，必须完成的工作量。
在 WordPress 中使用 CSS 预处理器是处理该问题的最常用方法。 这些提供了对诸如 mixins、嵌套声明，当然还有变量等一系列特性的支持，这些特性极大地提高了生产力。
您需要做的就是编写一次代码，然后将其编译为 CSS，如果您愿意，您可以自由访问和更改。 但是，无法在运行时找到和更改这些值，例如向您的 Web 应用程序添加深色主题是它们最大的缺点。 这是一个主要问题，不仅因为 SASS 不支持它，而且它可能永远不会支持。
在 CSS opens 中添加自定义内置变量对我们编写应用程序的方式产生了重大影响，尤其是在主题和响应式设计方面。
浏览器对 CSS 变量的支持是什么？
这是在讨论 CSS 变量时最常见的问题。 根据Caniuse的说法，浏览器对 CSS 变量的支持率为 93.16%。 所有现代浏览器（Chrome 49+、Firefox 31+、Safari 9.3+、Opera 36+ 和 Edge 16+）都支持它。 与往常一样，IE 没有出现在展会上，并且拥有惊人的6.47%的市场份额。 对于必须支持旧浏览器的可怜的开发人员，不要担心。 Polyfills ，或者更准确地说是 ponyfills，是为了拯救这一天。
CSS变量的正式介绍
如果您熟悉 CSS 变量，那么使用 CSS 变量应该不会有任何问题。
SASS 变量声明如下：
<上一页>
$facebook-蓝色：#4267B2；
</pre>
虽然 CSS 变量的声明略有不同：
<上一页>
：根 {
--品牌颜色：#4267B2；
}
.品牌导航栏{
背景：var（--品牌颜色）；
}
</pre>
请注意两种语法之间的一些差异：
- CSS 变量前面需要有两个破折号
- CSS 变量通常在 ':root' 中声明，但可以随时重新声明。
- CSS 属性是使用 'var()' 函数检索的。
CSS 变量还提供对几个附加功能的访问。
级联值
CSS 属性按照正常的级联规则进行级联。 换句话说，下面的重新声明不会影响上面的那些。
<上一页>
:root { –color: 黄色; }
div {–颜色：蓝色； }
#great { –颜色：绿色； }
* { 颜色: var(–color); }
<p>我会变黄，从根继承！</p>
<div>我是蓝色的！</div>
<div id=”太棒了”>
有效！ 我是绿色的！
<p>我也是绿色的！ 从上面继承！</p>
</div>
</pre>
后备值
'var()' 函数接受几个参数。 在未定义自定义 CSS 属性的情况下，第二个可以用作后备值。 对于需要通过 JavaScript 访问 CSS 变量的任何人来说，这都是一个有用的功能。
它的签名看起来像 'var(<custom-property-name> [, <declaration-value> ]?)' 并且可以通过以下方式使用
<上一页>
.品牌导航栏{
背景：var（–品牌颜色，“#4267B2”）；
}
</pre>
如果 '-brand-color' 未定义，将使用“#4267B2”，
通过 JavaScript 访问
在预处理器上使用 CSS 变量的最佳理由之一是能够通过 JavaScript 访问自定义变量。 预处理器变量不在浏览器中。 它们在编译代码时进行评估。 这样，无法在浏览器中访问预处理器变量。 使用 CSS 变量，该属性存在于浏览器中，允许即时编辑值。
考虑一个仪表板，它允许用户通过弹出窗口或类似的方式选择自定义颜色。
<上一页>
.品牌导航栏{
背景：var（–品牌颜色，“#4267B2”）；
}
//获取当前值
getComputedStyle(document.documentElement).getPropertyValue('–brand-color');
//设置值
document.documentElement.style.setProperty('–brand-color', 'red');
//你甚至可以将一个 CSS 属性分配给另一个
document.documentElement.style.setProperty('--brand-color','var(--secondary-color)');
</pre>
全局和局部范围
如果您熟悉 JavaScript（或任何编程语言，真的），那么您可能了解作用域的概念。 变量通常可以定义为只能被代码的某些部分访问，称为本地范围，或者可以在整个应用程序中使用，称为全局范围。
CSS 变量的工作方式类似。 一些变量应该在全局范围内以便于参考，例如品牌颜色和垂直间距。 这些通常在整个应用程序中保持不变，并且在发生更改时，应该在任何地方反映出来。 相反，可能需要局部作用域的变量包括具有不同大小变体的按钮。 如果您想更改特定按钮上的填充，您不希望更改遍历整个 DOM。 只需在应用程序中的一个点进行更改。
默认情况下，CSS 属性是本地范围的。 如果您使用过 JavaScript 或任何其他编程语言，则范围界定有其自身的一系列问题。 由于它们可以被继承，它们也像局部变量一样，如果你不注意它们的使用方式，可能会产生一些有趣的影响。 由于值是级联的，因此您需要注意如何更改它们，尤其是在涉及 JavaScript 时。
将自定义属性与媒体查询一起使用
就像预处理器一样，使用 CSS 属性的一个主要缺点是它们不能在媒体查询中使用。 例如，这将不起作用。
<上一页>
@media（最小宽度：var（–断点））{
填充：1rem；
}
</pre>
您可以做的是在媒体查询中重新定义自定义属性。 如果您需要在浏览器缩小时更改字体大小，那么您很幸运。 使用 CSS 变量，您可以使用 JavaScript 监听浏览器的更改，并只需一次更改需要缩小的任何大小。
自定义 CSS 属性有哪些实际应用？
“今天，除了使用 CDN 服务来提高网站性能外，使用 CSS 自定义属性是提高生产力的最快方法之一，”自定义论文写作服务网页设计师 Colby Stuart 建议道。
除了突出的好处之外，它还提高了生产力，是否有任何实际示例可以说明如何在 Web 应用程序中使用它们？
添加暗模式
占领消费市场的一个新趋势是所有现代软件（包括网络应用程序）对暗模式的需求。 它可能比添加深色背景颜色要复杂一些。 其他需要考虑的事情包括文本颜色将如何变化以及白色背景的图像将如何受到影响。
所有这一切都是通过首先在整个应用程序中声明变量来实现的。 当用户触发开关使网站主题变暗时，触发一个改变 CSS 变量的 JavaScript 函数。 如果您的网络应用程序更复杂，这还可能包括用暗模式友好的图像替换当前图像。
在 WordPress 上添加暗模式
CSS 变量的影响力如此之大，以至于它们已经进入了 WordPress 的世界。 今天，为 WordPress 应用程序创建一个黑暗模式（或更一般地说，主题化）是相当简单的。
大多数 WordPress 开发人员依靠定制器来更改其网站的外观和功能。 它通过访问您网站的 CSS 提供对颜色、字体、背景图像等内容的访问。 这样做的主要问题是，通过这种方式更改 CSS 会强制 PHP 重新呈现您的 HTML，并且这样做会导致服务器将整个文件重新发送到浏览器。 您的应用发出了不必要的请求，消耗的数据超出了它的需要。
“如果这样的应用程序是面向消费者的，你可能会收到很多投诉。 如果你没有专门的 CSS 文件来存储你想要更改的任何变量，事情会变得更糟。” Paperowl 评论和简历写作服务出版商的高级开发人员 Helena Newman认为它是 CSS 规范的必要补充。
使用 CSS 变量，在浏览器中使用 JavaScript 更改所有颜色。 如果有必要，唯一的请求是将当前主题持久化到服务器。 即便如此，这样的变量也可以保存在浏览器中。
将响应式设计添加到网站
随着互联网上的手机数量比以往任何时候都多，对响应式网站的需求从未如此明显。 响应式设计让开发人员措手不及的最关键方面是改变字体大小。 对于使用多种字体或动态字体的应用程序，跟踪它们并为不同的浏览器更改它们是一件苦差事。
相反，自定义 CSS 属性允许您定义可以在整个网站中使用和重用的通用字体大小。 如果需要更改，您只需调用一个 JavaScript 函数即可。
如果您不需要支持古老的浏览器，自定义 CSS 变量可以与（相对）新的网格 CSS 系统一起使用，以完全消除对媒体查询的需要。
再说一次，如果你需要监听 CSS 本身的宽度变化，媒体查询可能仍然是必要的。 这是支持不允许运行 JavaScript 的浏览器的唯一方法。
结论
很长一段时间以来，自定义 CSS 变量是规范中最重要的补充。 它们可以通过从您的 CSS 文件中去除杂乱无章并消除提出任何不必要的额外请求的需要来简化您的设计过程。