你好,游客 登录 注册 搜索
背景:
阅读新闻

CSS 自定义属性 — 基础篇

[日期:2017-03-14] 来源:  作者: [字体: ]

原文链接: CSS Custom Properties - The Basics

这是 CSS 自定义属性系列文章的第一篇,在这篇文章中我将快速介绍什么是自定义属性以及它们的语法,并在后续文章中详尽地分析 CSS 自定义属性,各位可以持续关注。

你大概已经听说过 CSS 自定义属性 (也被称为 CSS 变量),可能你是从 Google 发表的 这篇文章 中得知这个属性的。你可能尚且不了解这个特性的浏览器支持程度,从没见过相关的最佳实践,也无从将它同 Less 或者 Sass 做比较,总之就是一头雾水。那现在就怀揣着一肚子疑问,接着往下看吧,我将为你一一解答。

兼容性

第一个问题是:CSS 自定义属性能用在哪?目前从 Can I use 上获取的信息显示除了 Edge 外主流浏览器的最新版都已经支持这个特性了,而 Edge 也将支持这个属性。

这说明现在 CSS 自定义属性已经能用在实际项目中了,相信不久以后开发者们将大大依赖这个特性。但还请在使用之前请先检查一下本文附录中 Postcss 对于 CSS 自定义属性的支持情况,以便做好兼容。

设一个值,任何值都可以

那么……什么是自定义属性呢?简单来说就是一种开发者可以自主命名和使用的 CSS 属性。浏览器在处理像 color 、position 这样的属性时,需要接收特定的属性值,而自定义属性,在开发者赋予它属性值之前,它是没有意义的。所以要怎么给 CSS 自定义属性赋值呢?这倒和习惯无异:

.foo {
  color: red;
  --theme-color: gray;
}

自定义元素的定义由 -- 开头,这样浏览器能够区分自定义属性和原生属性,从而将它俩分开处理。假如只是定义了一个自定义元素和它的属性值,浏览器是不会做出反应的。如上面的代码, .foo 的字体颜色由 color 决定,但 --theme-color 对 .foo 没有作用。

你可以用 CSS 自定义元素存储任意 有效的 CSS 属性值 

.foo {
  --theme-color: blue;
  --spacer-width: 8px;
  --favorite-number: 3;
  --greeting: "Hey, what's up?";
  --reusable-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.85);
}

使用

假如自定义属性只能用于设值,那也太没用了点。至少,浏览器得能获取到它们的属性值。

使用 var() 方法就能实现:

.button {
  background-color: var(--theme-color);
}

下面这段代码中,我们将 .button 的 background-color 属性值赋值为 --theme-color 的值。这例子看起来自定义属性也没什么了不起的嘛,但这是一个硬编码的情况。你有没有意识到,--theme-color 的属性值是可以用在任意选择器和属性上的呢?这可就厉害了。

.button {
  background-color: var(--theme-color);
}
 
.title {
  color: var(--theme-color);
}
 
.image-grid > .image {
  border-color: var(--theme-color);
}

缺省值

如果开发者并没有定义过 --theme-color 这个变量呢?var() 可以接收第二个参数作为缺省值:

.button {
  background-color: var(--theme-color, gray);
}

注意:如果你想把另一个自定义属性作为缺省值,语法应该是 background-color: var(--theme-color, var(--fallback-color))

传参数时总是传入一个缺省值是一个好习惯,特别是在构建 web components 的时候。为了让你的页面在不支持自定义属性的浏览器上正常显示,别忘了加上兼容代码:

.button {
  background-color: gray;
  background-color: var(--theme-color, gray);
}

作用域和级联

要在什么时候定义这些属性?在使用之前吗?自定义属性遵从标准的作用域和级联规则,开发者按照平时使用的习惯来就可以了!

你可能希望将 --theme-color 设置为全局变量,处处可用。最简单的方法是使用 :root 伪元素 

:root {
  --theme-color: gray;
}

这样定义以后,无论是按钮、标题还是图片网格乃至整个文档,都可以使用 --theme-color 了。

但当你希望不同的模块使用不同的 --theme-color 值怎么办呢?和初始化自定义属性的步骤相同,只需要在模块的作用域中给属性重新赋值,新的颜色就会分模块生效,而不需要开发者一个个重置使用到 --theme-color 的属性。

section.about {
  --theme-color: darkblue;
}
section.contacts {
  --theme-color: darkred;
}
section.news {
  --theme-color: teal;
}

当然,你也可以定义复杂的选择器规则,应用特定的属性值:

section.news > .sidenote {
  --theme-color: gray;
}

CSS 计算

calc() 函数 常常被用于跨单位的计算:

.child {
  width: calc(100% - 16px);
}

事实上这个计算是在浏览器运行时进行的,浏览器会将 calc() 的计算结果以像素单位呈现在屏幕上。

calc() 与 CSS 自定义属性结合以后会很有趣!这一点也是在制定自定义属性规范时,经过了深思熟虑才加上的,毕竟这两者的结合可谓是强强联手:

:root {
  --base-size: 4px;
}
.title {
  text-size: calc(5 * var(--base-size));
}
.body {
  text-size: calc(3 * var(--base-size));
}

只要最终的结果有意义,开发者无论使用什么样的单位都可以:

:root {
  --base-size: 4px;
  --title-multiplier: 5;
  --body-multiplier: 3;
}
.title {
  text-size: calc(var(--title-multiplier) * var(--base-size));
}
.body {
  text-size: calc(var(--body-multiplier) * var(--base-size));
}

CSS 和 JavaScript 间的桥梁

自定义属性和 Sass、Less 或者 PostCSS 这些处理器语言一个非常重要的不同点在于:浏览器是可以解析自定义属性的。这就意味着开发者可以动态改变自定义属性的值。这是 CSS 迈出的一大步。

就和平时用 JS 操作元素任意的属性 一般,自定义属性也可以通过 getPropertyValue 和 setProperty 方法操作 :

const styles = getComputedStyle(document.querySelector('.foo'));

// Read value. Be sure to trim to remove whitespace. 
const oldColor = styles.getPropertyValue('--color').trim();

// Write value. 
foo.style.setProperty('--color', 'green');

属性值一旦被改变,所有与这个自定义属性相关的 CSS 属性也都会发生改变,仿佛是开发者直接操作了那些 CSS 属性值似的。这样就能轻松实现批量修改元素的属性值。

关于 JS 和 CSS 自定义属性之间的合作和最佳实践,大家可以详细阅读 这篇文章 

附录:使用预处理器编写 CSS 自定义属性

相信你已经迫不及待地想用上这个新技术,但又要考虑兼容尚未实现此特性的浏览器,那目前最好的选择就是使用 PostCSS 

PostCSS 现在可以支持 CSS 自定义属性的基本功能,也可以 防止开发者不断重复编写 自己的 CSS,但是像和 JS 结合动态改变自定义属性值,这相对高级的用法暂时还没有实现方案。

让我们来看看 PostCSS 能支持的特性和具体表现情况吧:

(译者注:编辑器不能插入表格,差评)

上表中对比的两个 Postcss plugin 为

  1. postcss custom properties
  2. postcss css variables

PostCSS CSS Varibales 中会出现编译问题的链接从上到下分别是

  1. Caveats
  2. Issue 30
  3. Caveats

若需要用 calc() 则都要和 Postcss Calc 配合使用。

收藏 推荐 打印 | 录入:admin | 阅读:
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款