Migrate to multiple Compat macro (zh-cn)

6 files changed, 55 insertions, 341 deletions

diff --git a/files/zh-cn/web/api/dommatrix/index.html b/files/zh-cn/web/api/dommatrix/index.html
index e142998d45..08b2dfc250 100644
--- a/files/zh-cn/web/api/dommatrix/index.html
+++ b/files/zh-cn/web/api/dommatrix/index.html
@@ -109,69 +109,9 @@ translation_of: Web/API/DOMMatrix
 
 <h2 id="浏览器兼容性">浏览器兼容性</h2>
 
-<p>{{CompatibilityTable}}</p>
+{{Compat("api.DOMMatrix")}}
 
-<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>基本支持</td>
-   <td>{{CompatGeckoDesktop(33)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
-  <tr>
-   <td>可用于 Web workers</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>Android</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>基本支持</td>
-   <td>{{CompatGeckoMobile(33)}}</td>
-   <td rowspan="1">{{CompatUnknown}}</td>
-   <td rowspan="1">{{CompatNo}}</td>
-   <td rowspan="1">{{CompatUnknown}}</td>
-   <td rowspan="1">{{CompatNo}}</td>
-  </tr>
-  <tr>
-   <td>可用于 Web workers</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
+{{Compat("api.WebKitCSSMatrix")}}
 
 <h2 id="相关链接">相关链接</h2>
 
diff --git a/files/zh-cn/web/api/network_information_api/index.html b/files/zh-cn/web/api/network_information_api/index.html
index 38951b5d1a..85917b5451 100644
--- a/files/zh-cn/web/api/network_information_api/index.html
+++ b/files/zh-cn/web/api/network_information_api/index.html
@@ -42,57 +42,13 @@ connection.addEventListener('change', updateConnectionStatus);
 
 <h2 id="浏览器兼容性">浏览器兼容性</h2>
 
-<p>{{CompatibilityTable}}</p>
+<h3>NetworkInformation</h3>
 
-<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>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
+{{Compat("api.NetworkInformation")}}
 
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>Firefox OS</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>2.2 {{property_prefix("webkit")}}</td>
-   <td>12.0<sup>[1]</sup></td>
-   <td>1.4</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
+<h3>Navigator.connection</h3>
 
-<p>[1] 在 Firefox 中，网络状况 API 可以通过 <code>dom.netinfo.enabled</code> 偏好选项来控制开启与否。</p>
+{{Compat("api.Navigator.connection")}}
 
 <h2 id="相关链接">相关链接</h2>
 
diff --git a/files/zh-cn/web/api/push_api/index.html b/files/zh-cn/web/api/push_api/index.html
index d19ad36263..01264e50b3 100644
--- a/files/zh-cn/web/api/push_api/index.html
+++ b/files/zh-cn/web/api/push_api/index.html
@@ -99,85 +99,13 @@ translation_of: Web/API/Push_API
 
 <h2 id="浏览器兼容性">浏览器兼容性</h2>
 
-<p>{{CompatibilityTable}}</p>
+<h3>PushEvent</h3>
 
-<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</td>
-   <td>{{CompatChrome(42.0)}}</td>
-   <td>{{CompatGeckoDesktop(44.0)}}<sup>[1][3]</sup></td>
-   <td>{{CompatNo}}<sup>[2]</sup></td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("PushEvent.data")}},<br>
-    {{domxref("PushMessageData")}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatGeckoDesktop(44.0)}}<sup>[3]</sup></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-
-<table>
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Android Webview</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>Firefox OS</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>{{CompatNo}}</td>
-   <td>{{CompatGeckoMobile(48.0)}}<sup>[4]</sup></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}<sup>[2]</sup></td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatChrome(42.0)}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("PushEvent.data")}},<br>
-    {{domxref("PushMessageData")}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatGeckoMobile(48.0)}}<sup>[4]</sup></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
+{{Compat("api.PushEvent")}}
 
-<ul>
- <li>[1] Currently available only on desktop versions of Firefox; also, push messages are only delivered when Firefox is running.</li>
- <li>[2] This is currently not implemented. See the <a href="https://dev.modern.ie/platform/status/pushapi/">Microsoft Edge status information</a>.</li>
- <li>[3] Push (and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</li>
- <li>[4] 在Firefox for Android version 48，Push已经默认开启了。</li>
-</ul>
+<h3>PushMessageData</h3>
 
-<p> </p>
+{{Compat("api.PushMessageData")}}
 
 <h2 id="另见">另见</h2>
 
diff --git a/files/zh-cn/web/api/web_authentication_api/index.html b/files/zh-cn/web/api/web_authentication_api/index.html
index 24193e8f1d..43c4e98b24 100644
--- a/files/zh-cn/web/api/web_authentication_api/index.html
+++ b/files/zh-cn/web/api/web_authentication_api/index.html
@@ -198,57 +198,37 @@ navigator.credentials.create(createCredentialDefaultArgs)
 
 <h2 id="Browser_compatibility">Browser compatibility</h2>
 
-<div>{{ CompatibilityTable() }}</div>
+<h3>Credential</h3>
 
-<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</td>
-   <td>{{CompatChrome(65)}}</td>
-   <td>{{CompatGeckoDesktop(60)}}<sup>[1]</sup></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
+{{Compat("api.Credential")}}
 
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android Webview</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}<sup>[1]</sup></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
+<h3>CredentialsContainer</h3>
+
+{{Compat("api.CredentialsContainer")}}
+
+<h3>PublicKeyCredential</h3>
+
+{{Compat("api.PublicKeyCredential")}}
+
+<h3>AuthenticatorResponse</h3>
+
+{{Compat("api.AuthenticatorResponse")}}
+
+<h3>AuthenticatorAttestationResponse</h3>
+
+{{Compat("api.AuthenticatorAttestationResponse")}}
+
+<h3>AuthenticatorAssertionResponse</h3>
+
+{{Compat("api.AuthenticatorAssertionResponse")}}
+
+<h3>PublicKeyCredentialCreationOptions</h3>
+
+{{Compat("api.PublicKeyCredentialCreationOptions")}}
+
+<h3>PublicKeyCredentialRequestOptions</h3>
 
-<p>[1] Web authentication has been restricted to active documents ({{bug(1409202)}}).</p>
+{{Compat("api.PublicKeyCredentialRequestOptions")}}
 
 <h2 id="See_also">See also</h2>
 
diff --git a/files/zh-cn/web/css/css_counter_styles/index.html b/files/zh-cn/web/css/css_counter_styles/index.html
index 305f55d128..7324239d35 100644
--- a/files/zh-cn/web/css/css_counter_styles/index.html
+++ b/files/zh-cn/web/css/css_counter_styles/index.html
@@ -70,52 +70,14 @@ translation_of: Web/CSS/CSS_Counter_Styles
 
 <h2 id="浏览器兼容性">浏览器兼容性</h2>
 
-<p>{{CompatibilityTable}}</p>
+<h3><code>@counter-style</code> rule</h3>
 
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>特性</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>基本支持</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatGeckoDesktop(33)}}<sup>[1]</sup></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
+{{Compat("css.at-rules.counter-style")}}
 
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>特性</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>基本支持</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatGeckoDesktop(33)}}<sup>[1]</sup></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
+<h3><code>counter-increment</code> property</h3>
+
+{{Compat("css.properties.counter-increment")}}
+
+<h3><code>counter-reset</code> property</h3>
 
-<p>[1] Gecko不在支持图片所描述的 {{cssxref("@counter-style/symbols", "symbols")}} .可以查看{{bug("1024179")}}.</p>
+{{Compat("css.properties.counter-reset")}}
\ No newline at end of file
diff --git a/files/zh-cn/web/html/attributes/crossorigin/index.html b/files/zh-cn/web/html/attributes/crossorigin/index.html
index b7bd9b969e..d113edfeb6 100644
--- a/files/zh-cn/web/html/attributes/crossorigin/index.html
+++ b/files/zh-cn/web/html/attributes/crossorigin/index.html
@@ -85,69 +85,17 @@ original_slug: Web/HTML/CORS_settings_attributes
 
 <h2 id="浏览器兼容性">浏览器兼容性</h2>
 
-<p>{{ CompatibilityTable() }}</p>
+<h3>script crossorigin</h3>
 
-<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</td>
-   <td>13</td>
-   <td>{{ CompatGeckoDesktop("8.0") }}</td>
-   <td>11</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-  </tr>
-  <tr>
-   <td>{{ HTMLElement("video")}}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatGeckoDesktop("12.0") }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
+{{Compat("html.elements.script.crossorigin")}}
 
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</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>{{ CompatUnknown() }}</td>
-   <td>{{ CompatGeckoMobile("8.0") }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-  </tr>
-  <tr>
-   <td>{{ HTMLElement("video")}}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatGeckoMobile("12.0") }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
+<h3>video crossorigin</h3>
+
+{{Compat("html.elements.video.crossorigin")}}
+
+<h3>link crossorigin</h3>
+
+{{Compat("html.elements.link.crossorigin")}}
 
 <h2 id="另请参阅">另请参阅</h2>