blob: 2c81ff1ed39a75dad12d16cc234cddbb2492124f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
---
title: CSS Houdini
slug: Web/Guide/Houdini
tags:
- API
- CSS
- Houdini
- Web
translation_of: Web/Houdini
original_slug: Web/Houdini
---
<p>Houdini是一组底层API，它们公开了CSS引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展CSS。 Houdini是一组API，它们使开发人员可以直接访问<a href="/en-US/docs/Web/API/CSS_Object_Model">CSS 对象模型</a> （CSSOM），使开发人员可以编写浏览器可以解析为CSS的代码，从而创建新的CSS功能，而无需等待它们在浏览器中本地实现。</p>
<h2 id="Houdini_的优点">Houdini 的优点</h2>
<p>当样式改变时Houdini相比JavaScript<a href="/zh-CN/docs/Web/API/ElementCSSInlineStyle/style">.style</a> 的方式能够能够更快的解析。 浏览器在应用脚本中发现的任何样式更新之前，会对CSSOM进行解析--包括布局、绘制和合成过程。此外，对于JavaScript样式更新，布局、绘制和复合过程也会重复进行。Houdini代码不会等待第一个渲染周期完成。相反，它被包含在第一个周期中--创建可渲染的、可理解的样式。Houdini为在JavaScript中使用CSS值提供了一个基于对象的API。</p>
<p>Houdini 的 CSS Typed OM 是一个包含类型和方法的 CSS 对象、并且暴露出了作为 JavaScript 对象的值。比起先前基于字符串的，对 <code><a href="/zh-CN/docs/Web/API/HTMLElement/style">HTMLElement.style</a></code> 进行操作的方案，对 JavaScript 对象进行操作更符合直觉。每个元素和样式表规则都拥有一个样式对应表，该对应表可以通过 <code><a href="/zh-CN/docs/Web/API/StylePropertyMap">StylePropertyMap</a></code> 来获得。</p>
<p>一个 CSS Houdini 的特性就是 <a href="/zh-CN/docs/Web/API/Worklet">Worklet</a>。在它的帮助下，你可以通过引入一行 JavaScript 代码来引入配置化的组件，从而创建模块式的 CSS。不依赖任何前置处理器、后置处理器或者 JavaScript 框架。</p>
<pre class="brush: js notranslate"><script>
CSS.paintWorklet.addModule('csscomponent.js');
</script>
</pre>
<p>以上添加进的模块包含一个 <code><a href="/zh-CN/docs/Web/API/PaintWorklet/registerPaint">registerPaint()</a></code>函数，这个模块是完全通过可配置的 worklets 来注册的。</p>
<p>这个 CSS <code>paint()</code> 函数的参数包括 worklet 的名字，以及其他可选的参数。worklet 同时能够访问元素的自定义属性：它们不需要作为函数参数传递。</p>
<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">li</span> <span class="punctuation token">{</span>
<span class="property token">background-image</span><span class="punctuation token">:</span> <span class="function token">paint</span><span class="punctuation token">(myComponent</span><span class="punctuation token">,</span> stroke<span class="punctuation token">,</span> <span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">)</span><span class="punctuation token">;
--hilights: blue;
--lowlights: green;</span>
<span class="punctuation token">}</span></code></pre>
<div class="blockIndicator note">
<p><strong>提醒</strong>: 能力越大，责任越大！在 Houdini 的帮助下你能够在 css 中实现你自己的布局、栅格、或者区域特性，但是这么做并不是最佳实践。CSS 工作组已经做了许多努力来确保 CSS 中的每一项特性都能正常运行，覆盖各种边界情况，同时考虑到了安全、隐私，以及可用性方面的表现。如果你要深入使用 Houdini，确保你也把以上这些事项考虑在内！并且先从小处开始，再把你的自定义 Houdini 推向一个富有雄心的项目。</p>
</div>
<h2 class="Documentation" id="Houdini_APIs">Houdini APIs</h2>
<p>在下面，你能够找到一些链接。这些链接指向 Houdini 范围下的 API 的主列表页面，同时链接到一些指导页来帮助你，如果你需要指导如何去使用这些API。</p>
<div class="hidden">
<p>你可以通过读下面这篇文章开始你的学习： <a href="https://developer.mozilla.org/en-US/docs/Web/Houdini/learn">Houdini, an introduction</a> — 这篇文章包含了关于 Houdini 的简单历史，以及关于 Houdini 的许多特性的概览。</p>
</div>
<dl>
<dt>CSS Parser API</dt>
<dd>这是一个更直接地暴露出 CSS 解析器的 API，能够把任意 CSS 类语言解析成为一种中间类型。</dd>
<dd>目前还没有该 API 的教程或参考。</dd>
<dt>CSS Properties and Values API </dt>
<dd>定义了一个用来注册新的 CSS 属性的 API。通过该 API 注册的属性必须用一种特定的解析语法书写，以定义其类型、继承行为以及初始值。<br>
<br>
<a href="/en-US/docs/Web/API/CSS_Properties_and_Values_API">CSS Properties and Values API reference</a><br>
<a href="/en-US/docs/Web/API/CSS_Properties_and_Values_API/guide">CSS Properties and Values API guide</a></dd>
<dt></dt>
<dt>CSS Typed OM</dt>
<dd>该 API 将 CSSOM 字符串转化为有类型意义的 JavaScript。这将对后续的一个重要的表现打下基础。CSS Typed OM 将 CSS 值以类型化处理的 JavaScript 对象的形式暴露出来，以使其表现可以被控制。<br>
<br>
<a href="/en-US/docs/Web/API/CSS_Typed_OM_API">CSS Typed OM reference</a><br>
<a href="/en-US/docs/Web/API/CSS_Typed_OM_API/Guide">CSS Typed OM guide</a></dd>
<dt>CSS Layout API </dt>
<dd>
<p>作为一个被设计来提升 CSS 扩展性的 API，该 API 能够让开发者去书写他们自己的布局算法，比如 masonry 或者 line snapping。该 API 目前还没有原生支持。</p>
<p>目前还没有该 API 的教程或参考。</p>
</dd>
<dt>CSS Painting API</dt>
<dd>
<p>作为一个被设计来提升 CSS 扩展性的 API，该 API 允许开发者通过 <code>paint()</code> 方法书写 JavaScript 函数，以控制绘制元素的背景、边框或者内容区域。<br>
<br>
<a href="/en-US/docs/Web/API/CSS_Painting_API">CSS Painting API reference</a><br>
<a href="/en-US/docs/Web/API/CSS_Painting_API/Guide">CSS Painting API guide </a></p>
</dd>
<dt>Worklets </dt>
<dd>
<p>该 API 允许脚本独立于 JavaScript 执行环境，运行在渲染流程的各个阶段。Worklets 在概念上很接近于 <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Web Workers</a> ，它由渲染引擎调用，并扩展了渲染引擎。<br>
<br>
<a href="/en-US/docs/Web/API/Worklet">Worklets reference</a></p>
</dd>
</dl>
<h2 id="其他">其他</h2>
<p>以下主题你可能会感兴趣，它们可能在你使用 Houdini API 的时候起一些有趣的作用。</p>
<dl>
<dt>Composite Scrolling and Animation </dt>
</dl>
|
