CSS Typed OM

[anjia]

简介

我们都知道，CSSOM 是 CSS 的对象模型，它提供了一系列方法来访问元素上各个属性的值。

CSS Typed OM（CSS 类型化的对象模型），单纯看名字，它只比 CSSOM 多了个 Typed。它是 CSS 的 object-based API，把 CSS value 的字符串值转成了 JS 对象。是 CSS Houdini #23 的一部分。

CSS OM	CSS Typed OM
介绍	CSS Typed OM
values 都是 string	values 都是 JS object
	给 CSS values 增加了 types, methods 和 a proper object model
element.style	元素 .attributeStyleMap 样式规则.styleMap
	两方法都返回StylePropertyMap对象 是个 map-like object，可以用 get/set/keys/values/entries
写法简单	写法冗长了点
	代码更健壮 性能更好

接下来，我们重点看下它是如何让代码更健壮性能更好的。

关键特性

特性检测 window.CSS && CSS.number

1. 取CSS值时，再也不用担心 string 和 number 的误用了
   • 如果给定的 CSS 属性支持 number，那么 typed OM 会返回一个 number，即便输入的值是string
   • 是个 JSON 结构的，内含 value 和 unit

   el.attributeStyleMap.set('opacity', '0.3');
   el.attributeStyleMap.get('opacity').value === 0.3  // true
   el.attributeStyleMap.get('opacity').value += 0.1   // 再也不用担心值是 0.30.1 了
   

2. 它会自动把值处理到有效范围之内

   el.attributeStyleMap.set('z-index', CSS.number(15.4))
   el.computedStyleMap().get('z-index').value === 15    // 自动四舍五入，处理成 15
   
   el.attributeStyleMap.set('opacity', 3)
   el.computedStyleMap().get('opacity').value === 1  // 值始终在有效范围之内
   

3. 取属性值的时候，再也不用纠结要不要用驼峰了。Typed OM 里是在 CSS 里怎么写，就在 JS 里怎么取

   // 之前的写法
   el.style.backgroundColor
   el.style['background-color']
   

4. 性能更好
   • 浏览器不用花费大量的时间去做字符串的序列化/反序列化工作
   • 在JS和C++之间就可以对 CSS values 有一致的解释和理解了
   • 好处是：
     • 有人统计了下，Typed OM 比单纯的 CSSOM 操作快了 30%
     • 这对处理快速的脚本动画效果至关重要，eg.requestAnimationFrame 和 animationWorklet
5. 方便了算术运算和单位转换，eg.处理绝对长度单位时，见 Arithmetic operations
6. 新的解析方法，能让 CSS 里处理 error 了，见 Error Handling

更详细的 API，见 API Basics

https://developers.google.com/web/updates/2018/03/cssom