Skip to main content

总结的一些新特性

Typed OM Object​

解决⽬前模型的⼀些问题，并实现 CSS Parsing API 和 CSS 属性与值 API 相关的特性。

手动拼接字符串和各种奇怪错误的日子已经结束了！
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Typed OM Object</title>
  </head>

  <body>
    <div id="app"></div>
    <script>
      const oEl = document.querySelector("#app");
      oEl.attributeStyleMap.set("background-color", "red");
      oEl.attributeStyleMap.set("padding-top", CSS.px(12));
    </script>
  </body>
</html>
  • 优点：
    • 更少的 bug。例如数字值总是以数字形式返回，而不是字符串。
    • el.style.opacity += 0.1; el.style.opacity === '0.30.1' // dragons!
    • 算术运算和单位转换。在绝对长度单位（例如 px -> cm）之间进行转换并进行基本的数学运算。
    • 数值范围限制和舍入。Typed OM 通过对值进行范围限制和舍入，以使其在属性的可接受范围内。 更好的性能。浏览器必须做更少的工作序列化和反序列化字符串值。现在，对于 CSS 值，引擎可以对 JS 和 C++ 使用相似的理解。 Tab Akins 已经展示了一些早期的性能基准测试，与使用旧的 CSSOM 和字符串相比，Typed OM的运行速度快了 ~30%。这对使用 requestionAnimationFrame() 处理快速 CSS动画可能很重要 。crbug.com/808933 可以追踪 Blink 的更多性能演示。
    • 错误处理。新的解析方法带来了 CSS 世界中的错误处理。 “我应该使用骆驼式的 CSS名称还是字符串呢？
    • ” 你不再需要猜测名字是骆驼还或字符串（例如 el.style.backgroundColor vs el.style['background-color']）。Typed OM 中的 CSS 属性名称始终是字符串， 与您实际在 CSS中编写的内容一致:)

Properties / Values​

测试

JS 设置属性的权限要高于 CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body,
      html {
        --ace-color: red;
      }

      #app {
        height: 30px;
        background-color: var(--ace-color);
      }
    </style>
  </head>

  <body>
    <div id="app"></div>
    <script>
      window.CSS.registerProperty({
        name: "--ace-color",
        syntax: "<color>",
        inherits: false,
        initialValue: "green",
      });
    </script>
  </body>
</html>