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. iOS Storyboard约束详解

    链接:http://www.jianshu.com/p/b88c65ffc3eb 约束,就是指--此处略去1万字--都懂的,就不说了.直接进入实战环节. 本文的控件约束都是围绕着UITableView ...

  2. JAVA 反射（1）

    getDeclaredField是可以获取一个类的所有字段. getField只能获取类的public 字段.

  3. POJ1422Air Raid（二分图，最小不相交路径覆盖）

    Air Raid Consider a town where all the streets are one-way and each street leads from one intersecti ...

  4. 网时|ipone8爆冷，我的服务器空欢喜一场

    上周ipone可谓是占尽了风头,从face ID到全面屏,从人脸识别到逆天价格,小编都能预想到上市之后的一片火热了,苹果后台的服务器恐怕都早已做好了准备,加大带宽,稳定运行,确保万无一失. 9月22日 ...

  5. ZOJ2401 Zipper 双塔式 DP

    遇到双塔DP,写一下. flag是为了避免memset多次导致的时间浪费. #include<cstdio> #include<cstdlib> #include<ios ...

  6. 详解面向对象编程——JavaScriptOOP

        前  言 絮叨絮叨 学习了JS之后,不知道大家觉得怎们样呢? 今天我们就来讲一下JS中最重要的一个环节,JavaScript中的面向对象编程OOP,这里的东西有点难,也有点绕. 可是! 不要灰 ...

  7. Java IO编程全解（一）——Java的I/O演进之路

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/7419117.html JDK1.4之前的早期版本,Java对I/O的支持并不完善,开发人员在开发高性能I/O ...

  8. Xcode插件失效以后的处理方法

    全在终端执行,依次输入如下命令 //获取DVTPlugInCompatibilityUUID字段 defaults read /Applications/Xcode.app/Contents/Info ...

  9. TensorFlow问题:The TensorFlow library wasn't compiled to use SSE4.2 instructions, but these are available on your machine and could speed up CPU computations.

    1. 问题描述 The TensorFlow library wasn't compiled to use SSE4.2 instructions, but these are available o ...

  10. win10 uwp smms图床

    本文,如何使用smms图床上传图片,用到win10 uwp post文件,因为我是渣渣,如果本文有错的,请和我说,在本文评论,或发给我邮箱lindexi_gd@163.com,请不要发不良言论 找到一 ...