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>

　　

posted @ 2017-06-21 14:45  freewalker  阅读(231)  评论(0)  编辑  收藏  举报