CSS 变量/自定义属性

Tags
css
Created
Oct 3, 2018 2:57 PM

CSS 变量的缺点:

  • 不能被探测
  • 总是继承 // houdini 解决
  • 不能动画 // houdini 解决

只要名字合法,@supports 总是 ture

https://www.w3.org/TR/css-variables-1/

  • -theme-color: 73, 188, 133; // 表示有三个数字的 css 值

color: rgba(var(--theme-color),.5); // 和其他数字连接成 <color>

  • -theme-color: #ffffff;

color: var(--theme-color)66; // 字符串链接成字符串而不是 <color>

应用未设置的自定义属性视为无效值 // 不会验证,所以也能覆盖属性

配置一个基础主题,是否可以使用算法来计算出不同情况下的主题?

  • 主色变化/系统色
  • 深色/浅色主题
  • 环境光/亮度
SuperMade with Super