initial commit

4 files changed, 440 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/css/escape/index.html b/files/zh-cn/web/api/css/escape/index.html
new file mode 100644
index 0000000000..3271798047
--- /dev/null
+++ b/files/zh-cn/web/api/css/escape/index.html
@@ -0,0 +1,125 @@
+---
+title: CSS.escape()
+slug: Web/API/CSS/escape
+tags:
+  - CSS
+  - escape()
+  - 参考
+  - 方法
+translation_of: Web/API/CSS/escape
+---
+<p>{{APIRef("CSSOM")}}{{SeeCompatTable}}</p>
+
+<p> <code><strong>CSS.escape()</strong></code> 静态方法返回 {{domxref("DOMString")}} 包含作为参数传递的转义字符串，主要用作CSS选择器的一部分。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>escapedStr</em> = CSS.escape(str);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><em>str</em></dt>
+ <dd>The {{domxref("DOMString")}} to be escaped.</dd>
+</dl>
+
+<h2 id="实例">实例</h2>
+
+<h3 id="基本结果">基本结果</h3>
+
+<pre class="brush: js">CSS.escape(".foo#bar")        // "\.foo\#bar"
+CSS.escape("()[]{}")          // "\(\)\[\]\\{\\}"
+CSS.escape('--a')             // "--a"
+CSS.escape(0)                 // "\30 ",  Unicode代码点“0”是30
+CSS.escape('\0')              // "\ufffd",  Unicode替换字符 </pre>
+
+<h3 id="在上下文使用">在上下文使用</h3>
+
+<p>要转义一个字符串作为选择器使用， <code>escape()</code>方法可以用于:</p>
+
+<pre class="brush: js">var element = document.querySelector('#' + CSS.escape(id) + ' &gt; img');</pre>
+
+<p><code>escape()</code>方法也可以用于转义字符串，它也转义了不严格需要转义的字符：</p>
+
+<pre class="brush: js">var element = document.querySelector('a[href="#' + CSS.escape(fragment) + '"]');</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">格式</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM', '#the-css.escape()-method', 'CSS.escape()')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatGeckoDesktop("31")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatGeckoMobile("31")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 32做了一些小的修改，以符合规范和CSS语法的发展。标识符现在可以以' -- '开始，第二个破折号不能被转义。另外供应商标识符也不会被更改。</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>The {{domxref("CSS")}} interface where this static method resides.</li>
+ <li><a href="https://github.com/mathiasbynens/CSS.escape/blob/master/css.escape.js">A polyfill for the CSS.escape</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/css/factory_functions/index.html b/files/zh-cn/web/api/css/factory_functions/index.html
new file mode 100644
index 0000000000..8f4eea206a
--- /dev/null
+++ b/files/zh-cn/web/api/css/factory_functions/index.html
@@ -0,0 +1,100 @@
+---
+title: CSS数字工厂函数
+slug: Web/API/CSS/factory_functions
+translation_of: Web/API/CSS/factory_functions
+---
+<p>{{SeeCompatTable}}<span class="seoSummary"><strong>CSS numeric factory functions</strong></span>，例如 <code>CSS.em()</code> 和 <code>CSS.turn()</code>，是一组使用传入的数字参数以及所指定的单位（单位名称即所用方法名称）来返回 <span class="seoSummary"><a href="/en-US/docs/Web/API/CSSUnitValue">CSSUnitValues</a></span> 的方法。这些函数创建新的数字值，与使用 {{domxref('CSSUnitValue.CSSUnitValue()')}} 构造函数相比，没有后者那么冗长。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox notranslate">CSS.number(<var>number</var>);
+CSS.percent(<var>number</var>);
+
+// &lt;length&gt;
+CSS.em(<var>number</var>);
+CSS.ex(<var>number</var>);
+CSS.ch(<var>number</var>);
+CSS.ic(<var>number</var>);
+CSS.rem(<var>number</var>);
+CSS.lh(<var>number</var>);
+CSS.rlh(<var>number</var>);
+CSS.vw(<var>number</var>);
+CSS.vh(<var>number</var>);
+CSS.vi(<var>number</var>);
+CSS.vb(<var>number</var>);
+CSS.vmin(<var>number</var>);
+CSS.vmax(<var>number</var>);
+CSS.cm(<var>number</var>);
+CSS.mm(<var>number</var>);
+CSS.Q(<var>number</var>);
+CSS.in(<var>number</var>);
+CSS.pt(<var>number</var>);
+CSS.pc(<var>number</var>);
+CSS.px(<var>number</var>);
+
+// &lt;angle&gt;
+CSS.deg(<var>number</var>);
+CSS.grad(<var>number</var>);
+CSS.rad(<var>number</var>);
+CSS.turn(<var>number</var>);
+
+// &lt;time&gt;
+CSS.s(<var>number</var>);
+CSS.ms(<var>number</var>);
+
+// &lt;frequency&gt;
+CSS.Hz(<var>number</var>);
+CSS.kHz(<var>number</var>);
+
+// &lt;resolution&gt;
+CSS.dpi(<var>number</var>);
+CSS.dpcm(<var>number</var>);
+CSS.dppx(<var>number</var>);
+
+// &lt;flex&gt;
+CSS.fr(<var>number</var>);</pre>
+
+<h2 id="示例">示例</h2>
+
+<p>我们使用 <code>CSS.vmax()</code> 数字工厂函数来创建一个 {{domxref('CSSUnitValue')}}：</p>
+
+<pre class="brush: js notranslate">let height = CSS.vmax(50);
+
+console.log( height );       // CSSUnitValue {value: 50, unit: "vmax"}
+console.log( height.value )  // 50
+console.log( height.unit )   // vmax</pre>
+
+<p>在这个例子中，我们给元素设定 margin 属性值，使用 <code>CSS.px()</code> 函数:</p>
+
+<pre class="brush: js notranslate">myElement.attributeStyleMap.set('margin', CSS.px(40));
+let currentMargin = myElement.attributeStyleMap.get('margin');
+console.log(currentMargin.value, currentMargin.unit); // 40, 'px'</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM', '#numeric-factory', 'Numeric Factory Functions')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.CSS")}}</p>
+
+<h2 id="另请参阅">另请参阅</h2>
+
+<ul>
+ <li>{{domxref('CSSUnitValue.CSSUnitValue()')}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/css/index.html b/files/zh-cn/web/api/css/index.html
new file mode 100644
index 0000000000..4a835d0bc8
--- /dev/null
+++ b/files/zh-cn/web/api/css/index.html
@@ -0,0 +1,85 @@
+---
+title: CSS
+slug: Web/API/CSS
+translation_of: Web/API/CSS
+---
+<p>{{APIRef("CSSOM")}}</p>
+
+<p><code>CSS</code> 接口涵盖CSS相关的实用方法。尚且不存在实现这个接口的对象：它仅仅包含静态的方法，因此也是一个实用性的接口。</p>
+
+<h2 id="属性">属性</h2>
+
+<p>CSS接口是一个工具接口，无法创建该类型的对象：其内部只定义了静态属性。</p>
+
+<h3 id="静态属性">静态属性</h3>
+
+<dl>
+ <dt>{{DOMxRef("CSS.paintWorklet")}} {{Experimental_Inline}}{{SecureContext_Inline}}</dt>
+ <dd>针对所有与绘制相关的类，提供对负责它们的工作集的访问。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p>CSS接口是一个工具接口，无法创建该类型的对象：其内部只定义了静态方法。</p>
+
+<h3 id="静态方法">静态方法</h3>
+
+<p>没有继承的静态方法。</p>
+
+<dl>
+ <dt>{{DOMxRef("CSS.registerProperty()")}}</dt>
+ <dd>注册 {{cssxref('--*', 'custom properties')}}，启用属性类型检查、默认值，以及继承了或者没有继承它们值的属性。</dd>
+ <dt>{{DOMxRef("CSS.supports()")}}</dt>
+ <dd>返回一个 {{JSxRef("Boolean")}} 来表明键值对、条件，或者传入参数是否受支持。</dd>
+ <dt>{{DOMxRef("CSS.escape()")}}</dt>
+ <dd>可以用来转义一个大多用来当作CSS选择器一部分的字符串。</dd>
+ <dt>{{DOMxRef("CSS.factory_functions", 'CSS factory functions')}}</dt>
+ <dd>可以用来返回一个 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/CSSUnitValue">CSSUnitValue</a></code>。它的值由传入的数值以及调用的factory方法名称组成。</dd>
+ <dd>
+ <pre class="notranslate">CSS.em(3) // CSSUnitValue {value: 3, unit: "em"}</pre>
+ </dd>
+</dl>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Painting API','#dom-css-paintworklet','paintWorklet')}}</td>
+   <td>{{Spec2('CSS Painting API')}}</td>
+   <td>Adds the <code>paintWorklet</code> static property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM', '#the-css.escape()-method', 'CSS')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Adds the <code>escape()</code> static method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span style="display: none;"> </span></p>
+
+<dl>
+</dl>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.CSS", 1)}}</p>
+
+<h2 id="另请参阅">另请参阅</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/css/supports/index.html b/files/zh-cn/web/api/css/supports/index.html
new file mode 100644
index 0000000000..86c8f5dd91
--- /dev/null
+++ b/files/zh-cn/web/api/css/supports/index.html
@@ -0,0 +1,130 @@
+---
+title: CSS.supports()
+slug: Web/API/CSS/supports
+tags:
+  - API
+  - CSSOM
+  - Method
+translation_of: Web/API/CSS/supports
+---
+<p>{{APIRef("CSSOM")}}</p>
+
+<p><code><strong>CSS.supports()</strong></code> 静态方法返回一个{{domxref("Boolean")}}值，用来校验浏览器是否支持一个给定的CSS特性。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>boolValue</em> = CSS.supports(<em>propertyName</em>, <em>value</em>);
+<em>boolValue</em> = CSS.supports(<em>supportCondition</em>);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<p>有两种不同的传值形式。第一种用来检验浏览器对于一对“属性-属性值”的支持：</p>
+
+<dl>
+ <dt><em>propertyName</em></dt>
+ <dd>一个包含要检查的CSS属性名称的{{domxref("DOMString")}}。</dd>
+ <dt><em>value</em></dt>
+ <dd>一个包含要检查的CSS属性值的{{domxref("DOMString")}}。</dd>
+</dl>
+
+<p>第二种语法需要一个匹配{{cssxref("@supports")}}条件的参数：</p>
+
+<dl>
+ <dt><em>supportCondition</em></dt>
+ <dd>一个包含了检查条件的{{domxref("DOMString")}}。</dd>
+</dl>
+
+<h2 id="实例">实例</h2>
+
+<pre class="brush: js">result = CSS.supports("text-decoration-style", "blink");
+result = CSS.supports("display", "flex");
+result = CSS.supports('--foo', 'red');
+result = CSS.supports('(--foo: red)');
+result = CSS.supports("<code class="language-css">( <span class="property token">transform-origin</span><span class="punctuation token">:</span> 5% 5% )");
+result = <code class="language-css">CSS.supports("( <span class="property token">transform-style</span><span class="punctuation token">:</span> preserve ) or ( <span class="property token">-moz-transform-style</span><span class="punctuation token">:</span> preserve ) or " +
+                      "( <span class="property token">-o-transform-style</span><span class="punctuation token">:</span> preserve ) or ( <span class="property token">-webkit-transform-style</span><span class="punctuation token">:</span> preserve )" );</code></code>
+//result is true or false
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Conditional', '#the-css-interface', 'CSS.supports()') }}</td>
+   <td>{{ Spec2('CSS3 Conditional') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>28.0 [2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("22") }} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>12.1</td>
+   <td>9 [2]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("22") }} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>12.1</td>
+   <td>9</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]只有在用户设置<code>layout.css.supports-rule.enabled=true</code>时，Gecko 20和21才会支持这一特性。</p>
+
+<p>[2] 在Chrome ≤ 51 (bug 584683) 和 Safari (bug 154669)中, 即使支持自定义属性，<code>CSS.supports('--foo', 'red')</code> 也会返回false。 您可以使用<code>CSS.supports('(--foo: red)')</code>，作为一种解决方案。</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{cssxref("@supports")}} at-rule 允许以声明的方式，使用相同的功能。</li>
+ <li>{{domxref("CSSSupportsRule")}} CSSOM 类允许在规则中操作{{cssxref("@supports")}}。</li>
+</ul>