CSS Variables

CSS原生变量(CSS自定义属性)

示例地址:https://github.com/ccyinghua/Css-Variables

一、css原生变量的基础用法

变量声明使用两根连词线"--"表示变量,"$color"是属于Sass的语法,"@color"是属于Less的语法,为避免冲突css原生变量使用

"--"

// 声明变量
--color:#000;// 读取变量
var(--color)

注:
1、变量声明不能包含$,[,^,(,%等字符,普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合,但是可以是中文,日文或者韩文 
2、变量的值可以是颜色、字符串、多个值的组合等

示例:

<h3>css variables基础使用</h3>
<div class="btn_box"><button type="button" class="login_btn">登录</button>
</div>
/* css variables基础使用 */
:root{--content1:"abc";--content2:"efg";--width:calc(100px   200px);--btn-bg:#279cff;--字体:18px;
}
.btn_box:before{content:var(--content1)' with add';display:block;line-height: 50px;
}
.btn_box:after{content:var(--content1)','var(--content2);display:block;line-height: 50px;
}
.login_btn{width:var(--width);height:50px;border-radius:30px;border:0;background: var(--btn-bg);box-shadow: 0 5px 5px rgba(39,156,255,.42);text-align: center;font-size:var(--字体);line-height: 50px;color:#fff;cursor:pointer;outline:none;
}

 

二、作用域

1、变量是遵循CSS语法的优先级高低的 

Id > class > 标签 > *

2、注意并无!important这种用法;
3、如果变量所在的选择器和使用变量的元素没有交集,是没有效果的。

<div>蓝色</div>
<div class="divbox">绿色</div>
<div class="divbox" id="alert">红色</div>
:root { --color: blue; }
.divbox { --color: green; }
#alert { --color: red; }
div{color: var(--color);width:300px;line-height: 50px;text-align: center;
}

三、响应式

div {--color: #7F583F;--bg: #F7EFD2;
}.mediabox {color: var(--color);background: var(--bg);
}@media screen and (min-width: 768px) {body {--color:  #F7EFD2;--bg: #7F583F;}
}

四、注意事项

1、属性名(例:width/height/margin....等)不可以走变量

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

2、var()的完整的写法是"var(<自定义属性名> [, <默认值 ]?)",在变量的名字后面可以有一个默认值,如果引用的变量没有定义(注意,仅限于没有定义),则使用后面的值作为元素的属性值

body {background:var(--bg,skyblue);
}

3、如果变量值是不合法的,例如下面设置背景色background只能是色值而不能是像素,则使用背景色属性的默认值代替。

body {--bg: 20px;background-color: #369;background-color: var(--bg, #cd0000);
}

等同于

body {--bg: 20px;background-color: #369;background-color: transparent;
}

4、CSS变量设置数值

(1)

h3 {--size: 30;   font-size: var(--size)px;
}

结果h3元素的字体大小就是本身的默认大小 

(2)

h3 {--size: 30px;   font-size: var(--size);
}等于
h3 {font-size:30px;
}

(3)使用CSS3 calc()计算:

h3 {--size: 30;   font-size: calc(var(--size) * 1px);
}
等于
h3 {font-size:30px;
}

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

/* 无效 */
.divbox {--size: '30px';font-size: var(--size);
}/* 有效 */
.divbox {--size: 30px;font-size: var(--size);
}

6、进行calc()运算时,最好能提供默认值: calc(var(--base-line-height, 0) * 1rem)

7、不能作为媒体查询值使用:

@media screen and (min-width: var(--desktop-breakpoint) {})

8、图片地址,如url(var(--image-url)) ,不会生效

五、兼容性处理

检测浏览器是否支持CSS自定义属性的方法。

/*css*/@supports ( (--a: 0)) {/* supported */
}@supports ( not (--a: 0)) {/* not supported */
}
// Jsif (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {alert('CSS properties are supported');
} else {alert('CSS properties are NOT supported');
}

六、JS操作变量

CSS 变量可以和 JS 互相交互

:root{--testMargin:75px;
}
//  读取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable1); // '75px'// 写入
document.documentElement.style.setProperty('--testMargin', '100px');
var cssVariable2 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable2);  // '100px'// 删除
document.documentElement.style.removeProperty('--testMargin');
var cssVariable3 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable3); // '75px'

javascript可以把任意值存入css变量,可以读取变量的值,实现javascript与css的通信。

七、CSS variables与预处理器的不同

1、预处理器变量不是实时的

$color:#7F583F;@media screen and (min-width: 768px) {$color: #F7EFD2;
}.mediabox {background: $color;
}

编译结果

.mediabox {background: #7F583F; 
}

2、预处理器不能限定作用域

$zcolor:blue;
.ulbox {$zcolor:red;
}
ul{color: $zcolor;
}

编译为

ul {color: blue; 
}

3、预处理器变量不可互操作

原生的CSS自定义属性可以与任何CSS预处理器或纯CSS文件一起使用。

4、总结

  • 相较于传统的 LESS 、SASS 等预处理器变量,CSS 变量的优点在于:
  • CSS 变量的动态性,能在页面运行时更改,而传统预处理器变量编译后无法更改
  • CSS 变量能够继承,能够组合使用,具有作用域
  • 配合 Javascript 使用,可以方便的从 JS 中读/写

八、CSS原生变量的兼容性

https://caniuse.com/#search=css var

 

本文转载于:猿2048➨https://www.mk2048.com/blog/blog.php?id=ha2b1icb&title=CSS Variables

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370278.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【基础中的基础】引用类型和值类型,以及引用传递和值传递

一直在博客园怼人&#xff0c;非常惭愧。所以郑重决定&#xff1a; 好好写一篇干货&#xff0c;然后再接着怼人。 这是一起帮上陈百万同学的求助&#xff0c;讲了一会之后&#xff0c;我觉得很有些普世价值&#xff0c;干脆就发到园子来。面向小白&#xff0c;高手轻拍。 我们从…

Java 7:使用NIO.2进行文件过滤–第3部分

大家好。 这是使用NIO.2系列进行文件过滤的第3部分。 对于那些尚未阅读第1 部分或第2部分的人 &#xff0c;这里有个回顾。 NIO.2是自Java 7起JDK中包含的用于I / O操作的新API。使用此新API&#xff0c;您可以执行与java.io相同的操作&#xff0c;以及许多出色的功能&#xf…

Hadoop Serialization -- hadoop序列化具体解释 (2)【Text,BytesWritable,NullWritable】

回想&#xff1a;回想序列化&#xff0c;事实上原书的结构非常清晰&#xff0c;我截图给出书中的章节结构&#xff1a;序列化最基本的&#xff0c;最底层的是实现writable接口&#xff0c;wiritable规定读和写的游戏规则 &#xff08;void write(DataOutput out) throws IOExce…

我需要多少个线程?

这取决于您的应用程序。 但是对于那些希望对如何从生产站点购买的所有昂贵内核中挤出更多资金的人来说&#xff0c;请多多包涵&#xff0c;我将阐明围绕多线程 Java应用程序的奥秘。 内容针对最典型的Java EE应用程序进行了“优化”&#xff0c;该应用程序具有Web前端&#xff…

H5网页适配 iPhoneX,就是这么简单

iPhoneX 取消了物理按键&#xff0c;改成底部小黑条&#xff0c;这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言&#xff0c;顶部&#xff08;刘海部位&#xff09;的适配问题浏览器已经做了处理&#xff0c;所以我们只需要关注底部与小黑条的适配问题即可&#…

数字校园-云资源平台 2014.10.26-人人通共享空间

近期,教育部在统计学校信息化建设情况,当中一项重要内容,作为三通两平台的一个环节,就是学校开通人人通空间的情况,网上普及了一下知识,不就是十多年前就玩的学校博客的变种吗,网上有一些产品,也是没有热闹起来,为要求而要求的多,既然要求,就来一个吧,花了几天时间,也做了一个.…

Lucene –快速添加索引和搜索功能

什么是Lucene&#xff1f; Apache LuceneTM是完全用Java编写的高性能&#xff0c;功能齐全的文本搜索引擎库。 它是一项适用于几乎所有需要全文搜索的应用程序的技术&#xff0c;尤其是跨平台的应用程序。 Lucene可以纯文本&#xff0c;整数&#xff0c;索引PDF&#xff0c;Of…

《深入理解Java虚拟机》读书笔记3--垃圾回收算法

转载&#xff1a;http://blog.csdn.net/tjiyu/article/details/53983064 下面先来了解Java虚拟机垃圾回收的几种常见算法&#xff1a;标记-清除算法、复制算法、标记-整理算法、分代收集算法、火车算法&#xff0c;介绍它们的算法思路&#xff0c;有什么优点和缺点&#xff0c;…

Flex布局(一)flex-direction

采用Flex布局的元素&#xff0c;被称为Flex容器(flex container)&#xff0c;简称"容器"。其所有子元素自动成为容器成员&#xff0c;成为Flex项目(Flex item)&#xff0c;简称"项目" Flex-direction调整主轴方向&#xff08;默认为水平方向&#xff09;包…

登录网页后要弹出一个新标签_连永久链接都不会,还做什么新媒体?

上次给主编大大发的预览链接失效了&#xff0c;被骂得狗血淋头。大部分运营人可能都遇到过这种情况&#xff0c;忽视了预览生成的链接只是临时的&#xff0c;在12小时后或超过500阅读量后就会失效。一个疏忽&#xff0c;给自己带来了不必要的麻烦&#xff0c;耽误工作&#xff…

static_cast与dynamic_cast转换

static_cast与dynamic_cast转换   一 C语言中存在着两种类型转换&#xff1a; 隐式转换和显式转换 隐式转换&#xff1a;不同数据类型之间赋值和运算&#xff0c;函数调用传递参数……编译器完成 char ch;int i ch; 显示转换&#xff1a;在类型前增加 &#xff1a;&#xff…

vue使用iview Timeline 时间轴不显示问题

vue Timeline 时间轴不显示渲染的效果 官网代码 <Timeline pending><TimelineItem>发布1.0版本</TimelineItem><TimelineItem>发布2.0版本</TimelineItem><TimelineItem>发布3.0版本</TimelineItem><TimelineItem><a href…

Java EE 6 Web配置文件。 在云上。 简单。

Java SE还可以。 Java EE是邪恶的。 这就是我一直想的。 好吧&#xff0c;现在不再了。 让我分享我的经验。 几周前&#xff0c;我开始考虑将旧版spring hibernate tomcat应用程序移植到新平台上&#xff1a; SAP NetWeaver云 。 我知道您在极客那里的想法&#xff1a;…

Kubernetes核心概念总结

1、基础架构 1.1 Master Master节点上面主要由四个模块组成&#xff1a;APIServer、scheduler、controller manager、etcd。 APIServer。APIServer负责对外提供RESTful的Kubernetes API服务&#xff0c;它是系统管理指令的统一入口&#xff0c;任何对资源进行增删改查的操作都要…

php连接mysql数据,php连接mysql数据库

$sql_link mysql_connect("主机名","登入用户名","登入用户名密码");如果连接成功&#xff0c;就会返回一个mysql句柄,可以简单的理解成这个$sql_link 是php跟mysql的一个桥梁&#xff0c;通过该桥梁我们可以进入到mysql。进入到mysql之后&…

url存在宽字节跨站漏洞_利用WebSocket跨站劫持(CSWH)漏洞接管帐户

在一次漏洞悬赏活动中&#xff0c;我发现了一个使用WebSocket连接的应用&#xff0c;所以我检查了WebSocket URL&#xff0c;发现它很容易受到CSWH的攻击(WebSocket跨站劫持)有关CSWH的更多详细信息&#xff0c;可以访问以下链接了解https://www.christian-schneider.net/Cross…

php 数组对比 unset,如何区分PHP中unset,array_splice的区别

1.使用的函数a.函数unset()unset ( mixed $var , mixed $... ? ) : voidunset()销毁指定的变量。b.函数array_slice()array_splice(array,start,length,array)array表示数组。start表示删除元素的开始位置。length表示被移除的元素个数&#xff0c;也是被返回数组的长度。(可…

前端基础-CSS的各种选择器的特点以及CSS的三大特性

一、 基本选择器二、 后代选择器、子元素选择器三、 兄弟选择器四、 交集选择器与并集选择器五、 序列选择器六、 属性选择器七、 伪类选择器八、 伪元素选择器九、 CSS三大特性 一、 基本选择器 1、id选择器 #1、作用&#xff1a;根据指定的id名称&#xff0c;在当前界面中找…

使用JavaCV进行手和手指检测

这篇文章是Andrew Davison博士发布的有关自然用户界面&#xff08;NUI&#xff09;系列的一部分&#xff0c;内容涉及使用JavaCV从网络摄像头视频提要中检测手。 注意&#xff1a;可以从http://fivedots.coe.psu.ac.th/~ad/jg/nui055/下载本章的所有源代码。 第5章的彩色斑点检…

不能装载文档控件。请在检查浏览器的选项中检查浏览器的安全设置_【2020年网络安全宣传周】如何正确设置浏览器...

李夏是一个公司的职员&#xff0c;一天晚上加班赶制文档&#xff0c;由于要向客户汇报产品情况&#xff0c;需要获取大量网上信息&#xff0c;然而在制作中却发现浏览器的网页打不开了。第二天原计划向客户展示的材料未能完整汇总&#xff0c;客户见面对接效果也打了折扣。在当…