CSS自定义属性的示例分析

这篇文章主要为大家展示了“CSS自定义属性的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS自定义属性的示例分析”这篇文章吧。

兼容性

第一个问题是: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自定义属性的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！