css变量

最新推荐文章于 2023-07-27 19:44:48 发布

weixin_34208185

最新推荐文章于 2023-07-27 19:44:48 发布

阅读量93

点赞数

原文链接：http://www.cnblogs.com/lydialee/p/7059479.html

版权

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>

转载于:https://www.cnblogs.com/lydialee/p/7059479.html

weixin_34208185

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css变量

CSS变量：目前主流浏览器都已支持CSS变量，Edge 浏览器也支持 CSS 变量。用户可以方便地在css中使用自定义变量。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document...
复制链接

扫一扫

css变量

“相关推荐”对你有帮助么？