diff options
| author | YujiSoftware <yuji.software+github@gmail.com> | 2022-03-02 20:22:51 +0900 |
|---|---|---|
| committer | Irvin <irvinfly@gmail.com> | 2022-03-04 01:03:17 +0800 |
| commit | 9a110dee28ae2ef12ee014b98fda6bae6ee48edb (patch) | |
| tree | 6525763f4313d7d8f42aefa699765f61ee1c63df /files/zh-cn/web/css/gradient | |
| parent | eeddb651b6e8deb8ecabc2bc5bc28c8ead25cca5 (diff) | |
| download | translated-content-9a110dee28ae2ef12ee014b98fda6bae6ee48edb.tar.gz translated-content-9a110dee28ae2ef12ee014b98fda6bae6ee48edb.tar.bz2 translated-content-9a110dee28ae2ef12ee014b98fda6bae6ee48edb.zip | |
Migrate to Compat macro (zh-cn)
Diffstat (limited to 'files/zh-cn/web/css/gradient')
3 files changed, 3 insertions, 397 deletions
diff --git a/files/zh-cn/web/css/gradient/linear-gradient()/index.html b/files/zh-cn/web/css/gradient/linear-gradient()/index.html index 4e1083f3cd..670d14976a 100644 --- a/files/zh-cn/web/css/gradient/linear-gradient()/index.html +++ b/files/zh-cn/web/css/gradient/linear-gradient()/index.html @@ -269,172 +269,7 @@ where <side-or-corner> = [ left | right ] || [ top | bottom ] <h2 id="浏览器兼容性">浏览器兼容性</h2> -<p>{{CompatibilityTable}}</p> - -<table> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera (Presto)</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})</td> - <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("16")}}<sup>[2]</sup></td> - <td>10.0 (534.16){{property_prefix("-webkit")}}<sup>[6]</sup></td> - <td>10.0<sup>[4]</sup></td> - <td>11.10{{property_prefix("-o")}}<sup>[1]</sup></td> - <td>5.1{{property_prefix("-webkit")}}<sup>[6]</sup></td> - </tr> - <tr> - <td>On {{cssxref("border-radius")}}</td> - <td>{{CompatGeckoDesktop("29")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>On any other property that accepts {{cssxref("<image>")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Legacy webkit syntax{{non-standard_inline}}</td> - <td>{{CompatNo}}</td> - <td>3{{property_prefix("-webkit")}}<sup>[3]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>4.0{{property_prefix("-webkit")}}<sup>[3]</sup></td> - </tr> - <tr> - <td>Legacy 'from' syntax (without <code>to</code>){{non-standard_inline}}</td> - <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[5]</sup></td> - <td>10.0 (534.16){{property_prefix("-webkit")}}<sup>[3]</sup></td> - <td>10</td> - <td>11.10{{property_prefix("-o")}}<sup>[5]</sup></td> - <td>5.1{{property_prefix("-webkit")}}<sup>[3]</sup></td> - </tr> - <tr> - <td>Standard syntax (using the <code>to</code> keyword)</td> - <td>{{CompatGeckoDesktop("16")}}</td> - <td>26.0 (537.27)</td> - <td>10</td> - <td>12.10</td> - <td>6.1</td> - </tr> - <tr> - <td>Interpolation hints (a percent without a color)</td> - <td>{{CompatGeckoDesktop("36")}}</td> - <td>40</td> - <td>{{CompatUnknown}}</td> - <td>27</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Unitless 0 for <code><angle></code></td> - <td>{{CompatGeckoDesktop("46")}}{{property_prefix("-moz")}}<sup>[7]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>Edge 12</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> - -<table> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera (Presto)</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})</td> - <td>{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("16")}}[2]</td> - <td>16{{property_prefix("-webkit")}}<br> - 26</td> - <td>10</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>On {{cssxref("border-radius")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>On any other property that accepts {{cssxref("<image>")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Legacy webkit syntax{{non-standard_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Legacy 'from' syntax (without <code>to</code>){{non-standard_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Standard syntax (using the <code>to</code> keyword)</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Interpolation hints (a percent without a color)</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> - -<p>[1] Gecko, Opera & Webkit consider {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting <code>layout.css.prefixes.gradients</code> to <code>false</code>.</p> - -<p>[2] Before Gecko 36.0 {{geckoRelease("36.0")}}, Gecko didn't apply gradients on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.</p> - -<p>[3] WebKit since 528 supports the legacy <a href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and an angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p> - -<p>[4] Internet Explorer 5.5 through 9.0 supports proprietary <a href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p> - -<p>[5] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a 'from' position. The <code>to</code> syntax has been added in Firefox 10 and Opera 11.60.</p> - -<p>In addition to the unprefixed support using the standard syntax, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> - -<p>[6] Opera & Webkit consider {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting <code>layout.css.prefixes.gradients</code> to <code>false</code>. WebKit since 528 supports the legacy <a href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and an angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p> - -<p>[7] <code>linear-gradient(0, pink, teal)</code> equivalent to <code>linear-gradient(0deg, pink, teal)</code>,See {{bug("1239153")}}.</p> +{{Compat("css.types.image.gradient.linear-gradient")}} <h2 id="了解更多">了解更多</h2> diff --git a/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html b/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html index c4dd9fc55d..007a1eb361 100644 --- a/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html +++ b/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html @@ -160,144 +160,7 @@ where <code><side-or-corner> = [left | right] || [top | bottom]</code> <h2 id="浏览器兼容性">浏览器兼容性</h2> -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})</td> - <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[3]</sup><br> - {{CompatGeckoDesktop("16")}}<sup>[5]</sup></td> - <td>10.0 (534.16){{property_prefix("-webkit")}} <sup>[2]</sup><sup>[3]</sup></td> - <td>10.0 <sup>[1]</sup></td> - <td>11.10{{property_prefix("-o")}} <sup>[3]</sup></td> - <td>5.1{{property_prefix("-webkit")}}<sup>[2]</sup><sup>[3]</sup></td> - </tr> - <tr> - <td>On {{cssxref("border-radius")}}</td> - <td>{{CompatGeckoDesktop("29")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>On any other property that accept {{cssxref("<image>")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Legacy webkit syntax</a>{{non-standard_inline}}</td> - <td>{{CompatNo}}</td> - <td>3{{property_prefix("-webkit")}} <sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>4.0{{property_prefix("-webkit")}}<sup>[2]</sup></td> - </tr> - <tr> - <td>Legacy <em>from </em>syntax (without <code>to</code>){{non-standard_inline}}</td> - <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[4]</sup><br> - Removed in {{CompatGeckoDesktop("16")}}<sup>[7]</sup></td> - <td>10.0 (534.16){{property_prefix("-webkit")}} <sup>[2]</sup></td> - <td>10.0</td> - <td>11.10{{property_prefix("-o")}}<sup>[4]</sup></td> - <td>5.1{{property_prefix("-webkit")}}<sup><a href="#bc2%3E">[2]</a></sup></td> - </tr> - <tr> - <td><code>to</code> syntax</td> - <td>{{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}<sup>[4]</sup><br> - {{CompatGeckoDesktop("16")}}</td> - <td>26.0</td> - <td>10.0</td> - <td>11.60{{property_prefix("-o")}}<sup>[4]</sup><br> - Presto 2.12 will remove the prefix.</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><a href="https://drafts.csswg.org/css-images-4/#color-interpolation-hint">Interpolation hints/gradient midpoints</a> (a percent without a color)</td> - <td>{{CompatGeckoDesktop("36")}}</td> - <td><a href="https://code.google.com/p/chromium/issues/detail?id=420527">40</a></td> - <td>{{CompatUnknown}}</td> - <td>27</td> - <td>{{CompatVersionUnknown}}<sup><a href="#bc2%3E">[6]</a></sup></td> - </tr> - <tr> - <td>Unitless 0 for <code><angle></code></td> - <td>{{CompatGeckoDesktop("46")}}{{property_prefix("-webkit")}}<sup>[8]</sup><br> - {{CompatNo}}<sup>[9]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>Edge 12</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera (Presto)</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}<sup>[3]</sup><br> - {{CompatGeckoMobile("16")}}<sup>[5]</sup></td> - <td> - <p>16{{property_prefix("-webkit")}}<br> - 26</p> - </td> - <td>10</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup><a href="#bc2%3E">[6]</a></sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Internet Explorer 5.5 through 9.0 supports proprietary <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p> - -<p>[2] WebKit since 528 supports the legacy <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p> - -<p>[3] Gecko, Opera & Webkit considers {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting <code>layout.css.prefixes.gradients</code> to <code>false</code>.</p> - -<p>[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a <em>from</em> position. The <code>to</code> syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:</p> - -<pre class="notranslate">-moz-repeating-linear-gradient(to top left, blue, red);</pre> - -<p>is the same as:</p> - -<pre class="notranslate">-moz-repeating-linear-gradient(bottom right, blue, red);</pre> - -<p>The legacy syntax, without <code>to</code>, is planned to go away when the prefix is removed.</p> - -<p>[5] Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency.</p> - -<p>[6] {{webkitbug(1074056)}}.</p> - -<p>[7] In addition to the unprefixed support using the standard syntax, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> - -<p>[8] In <code>-webkit-linear-gradient </code>function (handled below), Gecko accept unitless 0 for angles, to match webkit/blink,See {{bug("1239153")}}.</p> - -<p>[9] See {{bug("1363292")}}.</p> +{{Compat("css.types.image.gradient.repeating-linear-gradient")}} <h2 id="了解更多">了解更多</h2> diff --git a/files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html b/files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html index 8ca073bbd8..f3ac84767e 100644 --- a/files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html +++ b/files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html @@ -171,99 +171,7 @@ where <extent-keyword> = closest-corner | closest-side | farthest-corner | <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 (WebKit)</th> - </tr> - <tr> - <td>Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})</td> - <td>10 {{property_prefix("-webkit")}}</td> - <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<br> - {{CompatGeckoDesktop("16")}}<sup>[1]</sup></td> - <td>10</td> - <td>12 {{property_prefix("-o")}}<br> - 12.5</td> - <td>5.1 {{property_prefix("-webkit")}}</td> - </tr> - <tr> - <td>On {{cssxref("border-image")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("29")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>On any other property that accept {{cssxref("<image>")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Interpolation hints (a percent without a color)</td> - <td>40</td> - <td>{{CompatGeckoDesktop("36")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})</td> - <td>4.4</td> - <td>{{CompatGeckoMobile("46")}}</td> - <td>10</td> - <td>12.1</td> - <td>7.1</td> - </tr> - <tr> - <td>On {{cssxref("border-image")}}</td> - <td>{{CompatGeckoMobile("29")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>On any other property that accept {{cssxref("<image>")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency. Since Firefox 42, the prefixed version of gradients can be disabled by setting <code>layout.css.prefixes.gradients</code> to <code>false</code>.</p> - -<p>In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the function for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> +{{Compat("css.types.image.gradient.repeating-radial-gradient")}} <h2 id="参阅：">参阅：</h2> |