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变量的更多相关文章

  1. 引人瞩目的 CSS 变量（CSS Variable）

    这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...

  2. 第一个CSS变量：currentColor

    一.基本介绍 CSS变量正慢慢地从最初的草案到浏览器实现.但规范中有个已经存在多年的变量:currentColor.这个CSS特性具有良好的浏览器支持和一些实际的应用,本篇文章,我们来学习和了解它. ...

  3. CSS变量variable

    前面的话 一直以来,CSS中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器.新的草案发布之后,直接在 CSS 中定义和使用变量不再是幻想了.本文将详细介绍CS ...

  4. 【译】巧用CSS变量实现自动前缀

    转:https://www.h5jun.com/post/autoprefixing-with-css-variables-lea-verou.html 最近,当我在制作 markapp.io 这个小 ...

  5. css变量的用法——(--cssName)

    CSS变量,又称——CSS自定义属性,现在很多CSS预处理/后处理程序已作了相关快捷的编译处理, 基本用法有哪些呢,我们先看一个简单的栗子:——要求,创建一个五个块元素居中的分栏样式,奇数和偶数同高不 ...

  6. CSS变量（自定义属性）实践指南

    本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处:葡萄城官网,葡萄城为开 ...

  7. 实现响应式——CSS变量

    CSS 变量是 CSS 引入的一个新特性,目前绝大多数浏览器已经支持了,它可以帮助我们用更少的代码写出同样多的样式,大大提高了工作效率,本篇文章将教你如何使用 CSS 变量(css variable) ...

  8. 初次接触CSS变量

    本文的目的主要是展示CSS变量是如何工作的.随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为您提供重用和轻松更改重复出现的CSS属性 ...

  9. 原生CSS设置网站主题色—CSS变量赋值

    定义CSS变量 在css文件顶部定义css变量,注意必须以--开头,使用:root包括这几个变量 :root { --main-bg-color: #ff7675; --color1: #fbfee9 ...

随机推荐

  1. Hive基础（2）---（启动HiveServer2）Hive严格模式

    启动方式 1, hive  命令行模式,直接输入/hive/bin/hive的执行程序,或者输入 hive –service cli 用于linux平台命令行查询,查询语句基本跟mysql查询语句类似 ...

  2. Java数据结构和算法总结-冒泡排序、选择排序、插入排序算法分析

    前言:排序在算法中的地位自然不必多说,在许多工作中都用到了排序,就像学生成绩统计名次.商城商品销量排名.新闻的搜索热度排名等等.也正因为排序的应用范围如此之广,引起了许多人深入研究它的兴趣,直至今天, ...

  3. bzoj3997组合数学（求最长反链的dp）

    组合数学 给出一个网格图,其中某些格子有财宝,每次从左上角出发,只能向下或右走.问至少走多少次才能将财宝捡完.此对此问题变形,假设每个格子中有好多财宝,而每一次经过一个格子至多只能捡走一块财宝,至少走 ...

  4. Django 1.10中文文档-执行查询

    Django 1.10中文文档: https://github.com/jhao104/django-chinese-doc 只要创建好 数据模型, Django 会自动为生成一套数据库抽象的API, ...

  5. margin:0px auto和text-align:center区别

    (1)margin:0px auto :作用于块级元素,对块级元素进行居中 (2)text-align:center:作用于内联元素,必须放在要居中的内联元素所在的块级元素. 例: (1) <d ...

  6. PHP抓取网页图片

    <?php set_time_limit(0);//抓取不受时间限制 if($_POST['Submit']=="开始抓取"){ $URL=$_POST['link']; g ...

  7. SQL SERVER 数据库级联删除

    --SQL SERVER 2008R2 级联删除:主子表设置外键关联,当主表数据删除的时候会自动删除子表中对应的数据 --创建主表 create table test_main( ID ,) PRIM ...

  8. css百分比参照大总结

    最近做PC端项目,由于要自适应到800*600,所以免不了要使用百分比的布局方式,但是一开始有点搞不清楚百分比的参照,于是页面的布局怎么调也调不好. 事后我进行了一下总结,希望能够帮到大家: 参照父元 ...

  9. （10.11）Java第一小步

    在度过大一和大二浑浑噩噩的咸鱼生活之后,我决定 开始为自己的未来负责,开始学习自己喜欢的Java,同时决定以这篇博客来开启自己的博客之旅和Jaca的学习之路. 以后我也会陆续在博客园更新自己的博客,记 ...

  10. python3.6安装pyspider

    win10下安装pyspider 1.pip 我在安装pip的时候默认安装了Pip. 如果没有的话:pip安装 2.PhantomJS PhantomJS 是一个基于 WebKit 的服务器端 Jav ...