diff options
| -rw-r--r-- | files/zh-cn/web/css/@property/index.html | 89 | ||||
| -rw-r--r-- | files/zh-cn/web/css/@property/inherits/index.html | 100 | ||||
| -rw-r--r-- | files/zh-cn/web/css/@property/initial-value/index.html | 101 | ||||
| -rw-r--r-- | files/zh-cn/web/css/@property/syntax/index.html | 128 |
4 files changed, 418 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/@property/index.html b/files/zh-cn/web/css/@property/index.html new file mode 100644 index 0000000000..164b4d5b21 --- /dev/null +++ b/files/zh-cn/web/css/@property/index.html @@ -0,0 +1,89 @@ +--- +title: '@property' +slug: Web/CSS/@property +tags: + - At-rule + - CSS + - Reference + - Web + - Property + - Houdini +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p><strong><code>@property</code></strong> <a href="/zh-CN/docs/Web/CSS">CSS</a> {{cssxref("at-rule")}}是<a href="/en-US/docs/Web/Houdini">CSS Houdini</a> API的一部分, 它允许开发者显式地定义他们的{{cssxref('--*', 'CSS自定义属性')}}, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。</p> + +<p><code>@property</code> 规则提供了一个直接在样式表中注册自定义属性的方式，而无需运行任何JS代码。有效的 <code>@property</code> 规则会注册一个自定义属性, 就像 {{domxref('CSS.registerProperty')}} 函数被使用同样的参数调用了一样。</p> + +<h2 id="Syntax">Syntax(语法描述符)</h2> + +<pre class="brush: css no-line-numbers">@property --property-name { + syntax: '<color>'; + inherits: false; + initial-value: #c0ffee; +}</pre> + +<p>一个有效的 <code>@property</code> 规则代表一项自定义属性的注册,使用自定义属性名作为规则内代码序列的序部。</p> + +<p><code>@property</code> 规则中 <strong>syntax</strong> 和 <strong>inherits</strong> 描述符是必需的; 如果其中任何一项缺失, 整条规则都将失效并且会被忽略。 <strong>initial-value</strong> 描述符仅在syntax描述符为通用syntax定义时是可选的，否则<strong>initial-value</strong>也是必需的——如果此时该描述符缺失,整条规则都将失效且被忽略。</p> + +<p>未知的描述符自身都是无效的，且会被忽略。但是不会造成整条<code>@property</code>规则的失效。</p> + +<h2 id="Examples">实例</h2> + +<p>为 <code>--my-color</code> {{cssxref('--*', '自定义属性')}}添加颜色值类型检测、设置默认值并且设置属性值不允许被继承。</p> + +<p>使用 <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref('@property')}} <a href="/en-US/docs/Web/CSS/At-rule">规则</a>:</p> + +<pre class="brush: css">@property --my-color { + syntax: '<color>'; + inherits: false; + initial-value: #c0ffee; +} +</pre> + +<p>使用 <a href="/en-US/docs/Web/JavaScript">JavaScript中的</a> {{domxref('CSS.registerProperty')}}函数:</p> + +<pre class="brush: js">window.CSS.registerProperty({ + name: '--my-color', + syntax: '<color>', + inherits: false, + initialValue: '#c0ffee', +}); +</pre> + +<h2 id="Formal_syntax">标准语法</h2> + +<pre class="brush: css">{{csssyntax}}</pre> + +<h2 id="Specifications">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">提案</th> + </tr> + <tr> + <td>{{SpecName('CSS Properties and Values API', '#at-property-rule')}}</td> + <td>{{Spec2('CSS Properties and Values API')}}</td> + <td>初始定义.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">浏览器兼容性</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.at-rules.property")}}</p> + +<h2 id="See_also">另见</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/API/CSS_Properties_and_Values_API">CSS属性与值 API</a></li> + <li><a href="/zh-CN/docs/Web/API/CSS_Painting_API">CSS 绘图 API</a></li> + <li><a href="/zh-CN/docs/Web/API/CSS_Typed_OM_API">CSS 类型对象模型</a></li> + <li><a href="/zh-CN/docs/Web/Houdini">CSS Houdini</a></li> +</ul> diff --git a/files/zh-cn/web/css/@property/inherits/index.html b/files/zh-cn/web/css/@property/inherits/index.html new file mode 100644 index 0000000000..c2421f9535 --- /dev/null +++ b/files/zh-cn/web/css/@property/inherits/index.html @@ -0,0 +1,100 @@ +--- +title: '继承性' +slug: Web/CSS/@property/inherits +tags: + - CSS + - Reference + - Web + - Property + - Houdini +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p><strong><code>inherits</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 描述符在使用{{cssxref("@property")}} {{cssxref("at-rule")}}时是必需的，它控制由 <code>@property</code>声明注册的自定义属性默认情况下是否会被继承。</p> + +<h2 id="Syntax">Syntax（类型描述符）</h2> + +<pre class="brush: css no-line-numbers">@property --property-name { + syntax: '<color>'; + inherits: false; + initial-value: #c0ffee; +} + +@property --property-name { + syntax: '<color>'; + inherits: true; + initial-value: #c0ffee; +} +</pre> + +<h2 id="Values">取值</h2> + +<dl> + <dt><code>true</code></dt> + <dd>属性默认继承</dd> + <dt><code>false</code></dt> + <dd>属性默认不继承</dd> +</dl> + +<h2 id="Formal_definition">规范定义</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">标准语法</h2> + +<pre class="brush: css">{{csssyntax}}</pre> + +<h2 id="Examples">实例</h2> + +<p>为 <code>--my-color</code> {{cssxref('--*', '自定义属性')}}添加颜色值类型检测、设置默认值并且设置属性值不允许被继承。</p> + +<p>使用 <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref('@property')}} <a href="/en-US/docs/Web/CSS/At-rule">@规则</a>:</p> + +<pre class="brush: css">@property --my-color { + syntax: '<color>'; + inherits: false; + initial-value: #c0ffee; +} +</pre> + +<p>使用 <a href="/en-US/docs/Web/JavaScript">JavaScript中的</a> {{domxref('CSS.registerProperty')}}函数:</p> + +<pre class="brush: js">window.CSS.registerProperty({ + name: '--my-color', + syntax: '<color>', + inherits: false, + initialValue: '#c0ffee', +}); +</pre> + +<h2 id="Specifications">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">提议</th> + </tr> + <tr> + <td>{{SpecName('CSS Properties and Values API', '#inherits-descriptor', 'inherits')}}</td> + <td>{{Spec2('CSS Properties and Values API')}}</td> + <td>初始定义.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">浏览器兼容性</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.at-rules.property.inherits")}}</p> + +<h2 id="See_also">另见</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/API/CSS_Properties_and_Values_API">CSS属性与值 API</a></li> + <li><a href="/zh-CN/docs/Web/API/CSS_Painting_API">CSS 绘图 API</a></li> + <li><a href="/zh-CN/docs/Web/API/CSS_Typed_OM_API">CSS 类型对象模型</a></li> + <li><a href="/zh-CN/docs/Web/Houdini">CSS Houdini</a></li> +</ul>
\ No newline at end of file diff --git a/files/zh-cn/web/css/@property/initial-value/index.html b/files/zh-cn/web/css/@property/initial-value/index.html new file mode 100644 index 0000000000..61363a59fb --- /dev/null +++ b/files/zh-cn/web/css/@property/initial-value/index.html @@ -0,0 +1,101 @@ +--- +title: '初始值' +slug: Web/CSS/@property/initial-value +tags: + - CSS + - Reference + - Web + - Property + - Houdini +--- + +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p><strong><code>initial-value</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a>描述符在使用{{cssxref("@property")}} {{cssxref("at-rule")}}的时候是必需的，除非syntax属性接受了任何有效的token流。 它为属性设置初始值。</p> + +<p>被选定为<code>initial-value</code>的参数，依照<code>syntax</code>描述符定义，必须可以正确地解析。 因此,如果<code>syntax</code>描述符为<code><color></code>，那么初始值必须是一个有效的{{cssxref("color")}}值。</p> + +<h2 id="Syntax">语法</h2> + +<pre class="brush: css no-line-numbers">@property --property-name { + syntax: '<color>'; + inherits: false; + initial-value: #c0ffee; +} + +@property --property-name { + syntax: '<color>'; + inherits: true; + initial-value: #c0ffee; +}</pre> + +<h2 id="Values">取值</h2> + +<p>对于设定的<code>syntax</code>，具有正确值的字符串。</p> + +<h2 id="Formal_definition">标准定义</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">标准语法</h2> + +<pre class="brush: css">{{csssyntax}}</pre> + +<h2 id="Examples">实例</h2> + +<p>为 <code>--my-color</code> {{cssxref('--*', '自定义属性')}}添加颜色值类型检测、设置默认值并且设置属性值不允许被继承。</p> + +<p>使用 <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref('@property')}} <a href="/en-US/docs/Web/CSS/At-rule">规则</a>:</p> + +<pre class="brush: css">@property --my-color { + syntax: '<color>'; + inherits: false; + initial-value: #c0ffee; +} +</pre> + +<p>使用 <a href="/en-US/docs/Web/JavaScript">JavaScript中的</a> {{domxref('CSS.registerProperty')}}函数:</p> + +<pre class="brush: js">window.CSS.registerProperty({ + name: '--my-color', + syntax: '<color>', + inherits: false, + initialValue: '#c0ffee', +}); +</pre> + +<h2 id="Formal_syntax">标准语法</h2> + +<pre class="brush: css">{{csssyntax}}</pre> + +<h2 id="Specifications">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">提案</th> + </tr> + <tr> + <td>{{SpecName('CSS Properties and Values API', '#at-property-rule')}}</td> + <td>{{Spec2('CSS Properties and Values API')}}</td> + <td>初始定义.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">浏览器兼容性</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.at-rules.property")}}</p> + +<h2 id="See_also">另见</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/API/CSS_Properties_and_Values_API">CSS属性与值 API</a></li> + <li><a href="/zh-CN/docs/Web/API/CSS_Painting_API">CSS 绘图 API</a></li> + <li><a href="/zh-CN/docs/Web/API/CSS_Typed_OM_API">CSS 类型对象模型</a></li> + <li><a href="/zh-CN/docs/Web/Houdini">CSS Houdini</a></li> +</ul> diff --git a/files/zh-cn/web/css/@property/syntax/index.html b/files/zh-cn/web/css/@property/syntax/index.html new file mode 100644 index 0000000000..ab6fae937d --- /dev/null +++ b/files/zh-cn/web/css/@property/syntax/index.html @@ -0,0 +1,128 @@ +--- +title: syntax +slug: Web/CSS/@property/syntax +tags: + - CSS + - Reference + - Web + - Property + - Houdini +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p><strong><code>syntax</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 描述符在使用{{cssxref("@property")}} {{cssxref("at-rule")}}时是必需的，它描述了该属性所允许的语法结构。</p> + +<h2 id="Syntax">Syntax</h2> + +<p>如下是所有的有效syntax字符串:</p> + +<pre class="brush: css no-line-numbers">syntax: '<color>'; /* 接收一个颜色值 */ + +syntax: '<length> | <percentage>'; /* 接收长度或百分比参数，但是二者之间不进行计算合并 */ + +syntax: 'small | medium | large'; /* 接收这些参数值之一作为自定义标识符 */ + +syntax: '*'; /* 任何有效字符 */ +</pre> + +<h2 id="值">取值</h2> + +<p>规范定义的、受语法支持的字符串。支持的语法是<a href="/en-US/docs/Web/CSS/CSS_Types">CSS types</a>的子集。 这些可以单独使用，一些类型也可以结合使用。</p> + +<dl> + <dt><code>"<length>"</code></dt> + <dd>任何有效的 {{cssxref("<length>")}} 值.</dd> + <dt><code>"<number>"</code></dt> + <dd>任何有效的 {{cssxref("<number>")}} 值.</dd> + <dt><code>"<percentage>"</code></dt> + <dd>任何有效的 {{cssxref("<percentage>")}} 值.</dd> + <dt><code>"<length-percentage>"</code></dt> + <dd>任何有效的 {{cssxref("<length-percentage>")}} 值.</dd> + <dt><code>"<color>"</code></dt> + <dd>任何有效的 {{cssxref("<color>")}} 值.</dd> + <dt><code>"<image>"</code></dt> + <dd>任何有效的 {{cssxref("<image>")}} 值.</dd> + <dt><code>"<url>"</code></dt> + <dd>任何有效的 {{cssxref("url()","url()")}} 值.</dd> + <dt><code>"<integer>"</code></dt> + <dd>任何有效的 {{cssxref("<integer>")}} 值.</dd> + <dt><code>"<angle>"</code></dt> + <dd>任何有效的 {{cssxref("<angle>")}} 值.</dd> + <dt><code>"<time>"</code></dt> + <dd>任何有效的 {{cssxref("<time>")}} 值.</dd> + <dt><code>"<resolution>"</code></dt> + <dd>任何有效的 {{cssxref("<resolution>")}} 值.</dd> + <dt><code>"<transform-function>"</code></dt> + <dd>任何有效的 {{cssxref("<transform-function>")}} 值.</dd> + <dt><code>"<custom-ident>"</code></dt> + <dd>任何有效的 {{cssxref("<custom-ident>")}} 值.</dd> + <dt><code>"<transform-list>"</code></dt> + <dd>A list of valid {{cssxref("<transform-function>")}} 值.</dd> +</dl> + +<h2 id="Formal_definition">标准定义</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">标准语法</h2> + +<pre class="brush: css">{{csssyntax}}</pre> + +<h2 id="Examples">实例</h2> + +<p>为 <code>--my-color</code> {{cssxref('--*', '自定义属性')}}添加颜色值类型检测、设置默认值并且设置属性值不允许被继承。</p> + +<p>使用 <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref('@property')}} <a href="/en-US/docs/Web/CSS/At-rule">规则</a>:</p> + +<pre class="brush: css">@property --my-color { + syntax: '<color>'; + inherits: false; + initial-value: #c0ffee; +} +</pre> + +<p>使用 <a href="/en-US/docs/Web/JavaScript">JavaScript中的</a> {{domxref('CSS.registerProperty')}}函数:</p> + +<pre class="brush: js">window.CSS.registerProperty({ + name: '--my-color', + syntax: '<color>', + inherits: false, + initialValue: '#c0ffee', +}); +</pre> + +<h2 id="Formal_syntax">标准语法</h2> + +<pre class="brush: css">{{csssyntax}}</pre> + +<h2 id="Specifications">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">提案</th> + </tr> + <tr> + <td>{{SpecName('CSS Properties and 值 API', '#at-property-rule')}}</td> + <td>{{Spec2('CSS Properties and 值 API')}}</td> + <td>初始定义.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">浏览器兼容性</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.at-rules.property")}}</p> + +<h2 id="See_also">另见</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/API/CSS_Properties_and_值_API">CSS属性与值 API</a></li> + <li><a href="/zh-CN/docs/Web/API/CSS_Painting_API">CSS 绘图 API</a></li> + <li><a href="/zh-CN/docs/Web/API/CSS_Typed_OM_API">CSS 类型对象模型</a></li> + <li><a href="/zh-CN/docs/Web/Houdini">CSS Houdini</a></li> +</ul> |