css变量
CSS变量:
目前主流浏览器都已支持CSS变量,Edge 浏览器也支持 CSS 变量。用户可以方便地在css中使用自定义变量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <style>
/*css变量*/
/*兼容性检测*/
@supports ((--a:0)){
/*css变量的作用域为所在的选择器上,:root上声明的css变量具有全局作用域*/
:root{
--bgcolor:#fff;
--color:green;
--fsize:18px;
--size:20; }
.first-p{
/*--bgcolor的作用域为first-p选择符所在的元素*/
--bgcolor:yellow;
background-color:var(--bgcolor);
font-size:var(--fsize);
color:var(--color);
}
.second-p{
font-size:calc(var(--size)*1px); /*数值和字符串拼接时,使用calc()*/
}
}
@supports (not(--a:0)){
.first-p{
background-color:#ff55ff;
font-size:12px;
color:red
}
</style> <div>
<p class="first-p">this is first paragraph.</p>
<p class="second-p">this is first paragraph.</p>
<p class="third-p">this is first paragraph.</p>
</div> <script>
//js检测css变量的兼容性
var isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0); </script>
</body>
</html>
css变量的更多相关文章
- 引人瞩目的 CSS 变量(CSS Variable)
这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...
- 第一个CSS变量:currentColor
一.基本介绍 CSS变量正慢慢地从最初的草案到浏览器实现.但规范中有个已经存在多年的变量:currentColor.这个CSS特性具有良好的浏览器支持和一些实际的应用,本篇文章,我们来学习和了解它. ...
- CSS变量variable
前面的话 一直以来,CSS中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器.新的草案发布之后,直接在 CSS 中定义和使用变量不再是幻想了.本文将详细介绍CS ...
- 【译】巧用CSS变量实现自动前缀
转:https://www.h5jun.com/post/autoprefixing-with-css-variables-lea-verou.html 最近,当我在制作 markapp.io 这个小 ...
- css变量的用法——(--cssName)
CSS变量,又称——CSS自定义属性,现在很多CSS预处理/后处理程序已作了相关快捷的编译处理, 基本用法有哪些呢,我们先看一个简单的栗子:——要求,创建一个五个块元素居中的分栏样式,奇数和偶数同高不 ...
- CSS变量(自定义属性)实践指南
本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处:葡萄城官网,葡萄城为开 ...
- 实现响应式——CSS变量
CSS 变量是 CSS 引入的一个新特性,目前绝大多数浏览器已经支持了,它可以帮助我们用更少的代码写出同样多的样式,大大提高了工作效率,本篇文章将教你如何使用 CSS 变量(css variable) ...
- 初次接触CSS变量
本文的目的主要是展示CSS变量是如何工作的.随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为您提供重用和轻松更改重复出现的CSS属性 ...
- 原生CSS设置网站主题色—CSS变量赋值
定义CSS变量 在css文件顶部定义css变量,注意必须以--开头,使用:root包括这几个变量 :root { --main-bg-color: #ff7675; --color1: #fbfee9 ...
随机推荐
- ios小型服务器环境配置
之前买的一台二手iphone4退役了,上闲鱼上一看,就值200,而且耳机声音也有点轻,估计买不了什么钱 于是网上看看能不能有什么废物利用的法子,看到说做行车记录仪的,有说做git服务器的,感觉挺有兴趣 ...
- JSP入门 生命周期
我们之前使用的都是javax.servlet.http.HttpServlet,这个类实现了javax.servlet.Servlet接口,而这个接口中定义的三个方法是所有servlet都必须实现的. ...
- Spring Framework 5.0 新特性
Spring Framework 5.0是在Spring Framework 4.0之后将近四年内一次重大的升级. 在这个时间框架内,主要的发展之一就是Spring Boot项目的演变. Spring ...
- hdu 4123--Bob’s Race(树形DP+RMQ)
题目链接 Problem Description Bob wants to hold a race to encourage people to do sports. He has got troub ...
- uva12519
The Farnsworth Parabox Professor Farnsworth, a renowned scientist that lives in year 3000 working at ...
- P1013
问题 D: P1013 时间限制: 1 Sec 内存限制: 128 MB提交: 33 解决: 21[提交][状态][讨论版] 题目描述 " 找啊找啊找GF,找到一个好GF,吃顿饭啊拉拉手 ...
- fiddler 监听HttpClient发送的请求
用HttpClient模拟浏览器发送请求,设置一下代理httpClient.getHostConfiguration().setProxy("127.0.0.1", 8888);
- Andrid 高级程序员面试题
==========================20150518===================================一. Acitvity组件 1. 生命周期&kille ...
- 【学习】如何用jQuery获取iframe中的元素
(我的博客网站中的原文:http://www.xiaoxianworld.com/archives/292,欢迎遇到的小伙伴常来瞅瞅,给点评论和建议,有错误和不足,也请指出.) 说实在的,以前真的很少 ...
- eclipse+fileSyncPlugin+svn+jenkins+tomcat
实现一个想法,把项目部署在linux服务器上,在本地的eclipse代码更新后,通过svn+jenkins自动同步到服务器, 然后通过eclipse远程debug项目.这样是不是就解决了在本地跑项目, ...