首页 前端知识 CSS中 自定义属性(变量)详解

CSS中 自定义属性(变量)详解

2024-05-11 23:05:56 前端知识 前端哥 322 393 我要收藏

前言

自定义属性(有时也被称作CSS变量或者级联变量)是由CSS作者定义的,它包含的值可以在整个文档中重复使用。
由自定义属性标记设定值(比如: --main-color: black;),由 var() 函数来获取值(比如: color: var(–main-color);)
复杂的网站都会有大量的CSS代码,通常也会有许多重复的值。
举例:同样一个颜色值可能在成千上百个地方被使用到,如果这个值发生了变化,需要全局搜索并且一个一个替换。
自定义属性在某个地方存储一个值,然后在其他许多地方引用它。另一个好处是语义化的标识。
如:–main-text-color 会比 #00ff00 更易理解,尤其是这个颜色值在其他上下文中也被使用到。
自定义属性受级联的约束,并从其父级继承其值。

浏览器兼容情况:

在这里插入图片描述

1. 变量的声明

声明一个自定义属性,属性名需要以两个减号(–)开始,属性值则可以是任何有效的CSS值。
和其他属性一样,自定义属性也是写在规则集之内的,如下:

element {
  --main-bg-color: brown;
}

注意:规则集所指定的选择器定义了自定义属性的可见作用域。
通常的最佳实践是定义在根伪类 :root 下,这样就可以在HTML文档的任何地方访问到它了:

:root {
  --main-color: red;
  --bg-color: pink;
  --main-font-size: 15px;
}

然而这条规则不是绝对的,如果有理由去限制你的自定义属性,那么就应该限制。

注意:自定义属性名是大小写敏感的。 --my-color 和 --My-color 会被认为是两个不同的自定义属性。

2. var() 函数

读取变量

.wrap{
  color: var(--main-color);
}

使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。
第二个参数不处理内部的逗号或空格,都视作参数的一部分。

.wrap{
  height: var(--el-height,400px);
  font-family: var(--font-stack, "Roboto", "Helvetica");
  padding:var(--pad, 10px 20px);
}

变量的声明

:root {
  --length: 400px;
  --mian-width:var(--length);
}

注意:变量值只能用作属性值,不能用作属性名。

.foo {
  --side: margin-top;
  var(--side): 20px;  /* 无效 */
}

在这里插入图片描述

3. 变量值的类型

如果变量值是一个字符串,可以与其他字符串拼接。

:root {
  --content: 'CSS';
}
.wrap::after{
  content:'hello' var(--content);
}

如果变量值是数值,不能与数值单位直接连用。必须使用calc()函数,将它们连接

.wrap{
  --gap: 20;
  margin-top: var(--gap)px;  /* 无效 */
  margin-bottom: calc(var(--gap) * 1px);
}

如果变量值带有单位,就不能写成字符串。

/* 无效 */
.wrap {
  --foo: '20px';
  font-size: var(--foo);
}

/* 有效 */
.wrap {
  --foo: 20px;
  font-size: var(--foo);
}

4. 作用域

同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的"层叠"(cascade)规则是一致的。

<style>
  :root { --color: blue; }
  span { --color: green; }
  #title { --color: red; }
</style>
<p>蓝色</p>
<span>绿色</span>
<div id="title">红色</div>

p {
  color: var(--color);
}
span{
  color: var(--color);
}
#title{
  color: var(--color) ;
}

上面代码中,三个选择器都声明了–color变量。不同元素读取这个变量的时候,会采用优先级最高的规则,因此三段文字的颜色是不一样的。

在这里插入图片描述

这就是说,变量的作用域就是它所在的选择器的有效范围。
由于这个原因,全局的变量通常放在根元素 :root 里面,确保任何选择器都可以读取它们。

:root {
  --main-color: #06c;
}

5. 响应式布局

CSS 是动态的,页面的任何变化,都会导致采用的规则变化。
利用这个特点,可以在响应式布局的 media 命令里面声明变量,使得不同的屏幕宽度有不同的变量值。

body {
  --primary: #7F583F;
  --secondary: #F7EFD2;
}

a {
  color: var(--primary);
  text-decoration-color: var(--secondary);
}

@media screen and (min-width: 768px) {
  body {
    --primary:  #F7EFD2;
    --secondary: #7F583F;
  }
}

6. JavaScript 操作

JavaScript 也可以检测浏览器是否支持 CSS 变量。

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

if (isSupported) {
  console.log('support')
} else {
  console.log('not support')
}

JavaScript 操作 CSS 变量的写法如下:

// 设置 Dom 节点上的 CSS 变量
el.style.setProperty("--bg-color", 'yellow');
// 读取变量(好像只能读取元素通过setProperty设置的,不能读取根元素 :root 里的)
document.body.style.getPropertyValue('--primary').trim(); 
// 获取任意 Dom 节点上的 CSS 变量(能读取元素通过setProperty设置的和根元素 :root 里的)
getComputedStyle(el).getPropertyValue("--bg-color").trim(); 
// 删除变量(好像只能删除元素通过ssetProperty设置的,不能删除根元素 :root 里的)
el.style.removeProperty('--bg-color');

7. 兼容性处理

对于不支持 CSS 变量的浏览器,可以采用下面的写法。

a {
  color: #7F583F;
  color: var(--primary);
}

也可以使用 @support 命令进行检测。

@supports ( (--a: 0)) {
  /* support */
}

@supports ( not (--a: 0)) {
  /* not support */
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/8185.html
标签
评论
发布的文章

JSON三种数据解析方法

2024-05-22 09:05:13

使用nvm管理(切换)node版本

2024-05-22 09:05:48

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!