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>