Get rid of {{CompatibilityTable}} from CSS (#859)

8 files changed, 54 insertions, 575 deletions

diff --git a/files/ko/web/css/@font-face/index.html b/files/ko/web/css/@font-face/index.html
index 9ba2e223e6..6ac8686509 100644
--- a/files/ko/web/css/@font-face/index.html
+++ b/files/ko/web/css/@font-face/index.html
@@ -2,6 +2,7 @@
 title: '@font-face'
 slug: Web/CSS/@font-face
 translation_of: Web/CSS/@font-face
+browser-compat: css.at-rules.font-face
 ---
 <p>{{CSSRef}}</p>
 
@@ -9,8 +10,6 @@ translation_of: Web/CSS/@font-face
 
 <p><a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="At-rule">at-rule</a> 인 <code>@font-face</code> 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. <code style="font-size: 14px;">@font-face</code> 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게되었다. <code>@font-face</code> at-rule 은 CSS의 top-level에서 뿐 아니라, <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a> 안에서도 사용될 수도 있다. </p>
 
-<p>{{ seeCompatTable() }}</p>
-
 <h2 id="문법(Syntax)">문법(Syntax)</h2>
 
 <pre>@font-face {
@@ -81,130 +80,51 @@ translation_of: Web/CSS/@font-face
  <li>Gecko에서는 웹폰트(web font)가 사용된 페이지를 표시할 때는 웹폰트가 다운로드 되는 동안 사용자의 컴퓨터에 이미 설치되어 있어 즉시 사용가능한 폰트(CSS fallback font)를 사용하여 텍스트를 표시한다. 각각의 웹폰트의 다운로드가 완료되면 Gecko는 해당 텍스트의 폰트를 교체한다. 이러한 과정은 사용자가 웹페이지 내의 텍스트를 좀 더 빨리 읽게끔 도와준다.</li>
 </ul>
 
-<h2 id="Notes" name="Notes">명세(Specifications)</h2>
+<h2 id="specifications">명세</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('WOFF1.0', '', 'WOFF font format') }}</td>
-   <td>{{ Spec2('WOFF1.0') }}</td>
-   <td>Font format specification</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('CSS3 Fonts', '#font-face-rule', '@font-face') }}</td>
-   <td>{{ Spec2('CSS3 Fonts') }}</td>
-   <td> </td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Specification</th>
+      <th scope="col">Status</th>
+      <th scope="col">Comment</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('CSS5 Fonts', '#font-face-rule', '@font-face')}}</td>
+      <td>{{Spec2('CSS5 Fonts')}}</td>
+      <td>Adds the <code>size-adjust</code> descriptor.</td>
+    </tr>
+    <tr>
+      <td>{{SpecName('CSS4 Fonts', '#font-face-rule', '@font-face')}}</td>
+      <td>{{Spec2('CSS4 Fonts')}}</td>
+      <td>Definition in this version of the specification.</td>
+    </tr>
+    <tr>
+      <td>{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}</td>
+      <td>{{Spec2('WOFF2.0')}}</td>
+      <td>Font format specification with new compression algorithm</td>
+    </tr>
+    <tr>
+      <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td>
+      <td>{{Spec2('WOFF1.0')}}</td>
+      <td>Font format specification</td>
+    </tr>
+    <tr>
+      <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td>
+      <td>{{Spec2('CSS3 Fonts')}}</td>
+      <td>Initial definition</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="브라우저_호환성(Browser_compatibility)">브라우저 호환성(Browser compatibility)</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<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</td>
-   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
-   <td>4.0</td>
-   <td>4.0</td>
-   <td>10.0</td>
-   <td>3.1</td>
-  </tr>
-  <tr>
-   <td><a href="/en/WOFF" title="en/About_WOFF">WOFF</a></td>
-   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
-   <td>6.0</td>
-   <td>9.0</td>
-   <td>11.10</td>
-   <td>5.1</td>
-  </tr>
-  <tr>
-   <td>SVG Font</td>
-   <td>{{ CompatNo() }}<br>
-    {{ unimplemented_inline(119490) }}</td>
-   <td>yes</td>
-   <td>{{ CompatNo() }}</td>
-   <td>yes</td>
-   <td>yes</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 Mobile</th>
-   <th>Opera Mini</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatGeckoMobile("1.9.1") }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>10.0</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-  </tr>
-  <tr>
-   <td>WOFF</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatGeckoMobile("5.0") }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>11.0</td>
-   <td>{{ CompatNo() }}</td>
-  </tr>
-  <tr>
-   <td>SVG fonts</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatNo() }}<br>
-    {{ unimplemented_inline(119490) }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>10.0</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
+<h2 id="browser_compatibility">브라우저 호환성</h2>
 
-<h3 id="주의사항(Notes)_2">주의사항(Notes)</h3>
-
-<ul>
- <li>Embedded OpenType 폰트는 특허가 적용되기 때문에, 호환성 테이블(compatibility table)에 포함되어 있지 않다. IE 9.0 이전의 브라우저에서, IE는 이 포맷(format)만을 지원했었다.</li>
- <li>TrueType 과 OpenType 는 WOFF로 교체되어 포함되지 않았다.</li>
-</ul>
+<p>{{Compat}}</p>
 
 <h2 id="참고자료(See_also)">참고자료(See also)</h2>
 
-<dl>
-</dl>
-
 <ul>
  <li><a href="/en/WOFF" title="en/About WOFF">About WOFF</a></li>
  <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
diff --git a/files/ko/web/css/animation-direction/index.html b/files/ko/web/css/animation-direction/index.html
index 5bd1d1e41d..15586fb749 100644
--- a/files/ko/web/css/animation-direction/index.html
+++ b/files/ko/web/css/animation-direction/index.html
@@ -5,8 +5,9 @@ tags:
   - CSS 속성
   - CSS 애니메이션
 translation_of: Web/CSS/animation-direction
+browser-compat: css.properties.animation-direction
 ---
-<div>{{CSSRef}} {{SeeCompatTable}}</div>
+<div>{{CSSRef}}</div>
 
 <p><strong><code>animation-direction</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> 속성은 애니메이션이 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정합니다.</p>
 
@@ -76,112 +77,9 @@ animation-direction: unset;
  </tbody>
 </table>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성(Browser compatibility)</h2>
+<h2 id="Browser_compatibility">브라우저 호환성(Browser compatibility)</h2>
 
-<div>{{CompatibilityTable}}</div>
-
-<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 (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
-    {{CompatChrome(43.0)}}</td>
-   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
-    {{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
-    {{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td>
-   <td>10</td>
-   <td>12{{property_prefix("-o")}}<br>
-    12.50</td>
-   <td>4.0{{property_prefix("-webkit")}}</td>
-  </tr>
-  <tr>
-   <td><code>reverse</code></td>
-   <td>19</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoDesktop("16.0")}}</td>
-   <td>10</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>alternate-reverse</code></td>
-   <td>19</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoDesktop("16.0")}}</td>
-   <td>10</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>Android</th>
-   <th>Android Webview</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-   <th>Chrome for Android</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
-    {{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
-    {{CompatGeckoMobile("16.0")}}<sup>[1]</sup></td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
-    {{CompatChrome(43.0)}}</td>
-  </tr>
-  <tr>
-   <td><code>reverse</code></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile("16.0")}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
-  </tr>
-  <tr>
-   <td><code>alternate-reverse</code></td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile("16.0")}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] Gecko 44.0 {{geckoRelease("44.0")}}은 layout.css.prefixes.webkit 환경 설정 뒤에 웹 호환성 이유로 인해 -webkit- 접두사가 붙은 속성 버전에 대한 지원을 추가했으며, 기본값은 false입니다. Gecko 49.0 {{geckoRelease("49.0")}} 이후 기본 설정은 true로 기본 설정됩니다.</p>
+<p>{{Compat}}</p>
 
 <h2 id="같이_보기(See_also)">같이 보기(See also)</h2>
 
diff --git a/files/ko/web/css/animation-duration/index.html b/files/ko/web/css/animation-duration/index.html
index 2aca466bc9..5fcbffce63 100644
--- a/files/ko/web/css/animation-duration/index.html
+++ b/files/ko/web/css/animation-duration/index.html
@@ -4,6 +4,7 @@ slug: Web/CSS/animation-duration
 tags:
   - CSS 애니메이션
 translation_of: Web/CSS/animation-duration
+browser-compat: css.properties.animation-duration
 ---
 <div>{{CSSRef}} {{SeeCompatTable}}</div>
 
@@ -68,69 +69,7 @@ animation-duration: 10s, 35s, 230ms;
 
 <h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성(Browser compatibility)</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 (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>3.0{{property_prefix("-webkit")}}<br>
-    {{CompatChrome(43.0)}}</td>
-   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
-    {{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
-    {{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td>
-   <td>10</td>
-   <td>12{{property_prefix("-o")}}<br>
-    12.10</td>
-   <td>4.0{{property_prefix("-webkit")}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-   <th>Chrome for Android</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>2.0{{property_prefix("-webkit")}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
-    {{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
-    {{ CompatGeckoMobile("16.0")}}<sup>[1]</sup></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>4.2{{property_prefix("-webkit")}}</td>
-   <td>{{CompatChrome(43.0)}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] Gecko 44.0 {{geckoRelease("44.0")}}은 layout.css.prefixes.webkit 환경 설정 뒤에 웹 호환성 이유로 인해 -webkit- 접두어로 사용 된 속성 버전에 대한 지원을 추가하고 기본을 false로 설정합니다. Gecko 49.0 {{geckoRelease("49.0")}}이후 기본 설정은 true로 기본 설정됩니다.</p>
+<p>{{Compat}}</p>
 
 <h2 id="같이_보기(See_also)">같이 보기(See also)</h2>
 
diff --git a/files/ko/web/css/animation-fill-mode/index.html b/files/ko/web/css/animation-fill-mode/index.html
index 1cd84d5503..e22adcb062 100644
--- a/files/ko/web/css/animation-fill-mode/index.html
+++ b/files/ko/web/css/animation-fill-mode/index.html
@@ -5,6 +5,7 @@ tags:
   - CSS 속성
   - CSS 애니메이션
 translation_of: Web/CSS/animation-fill-mode
+browser-compat: css.properties.animation-fill-mode
 ---
 <div>{{CSSRef}}</div>
 
@@ -169,68 +170,7 @@ animation-fill-mode: both, forwards, none;
 
 <h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성(Browser compatibility)</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 (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
-    {{CompatChrome(43.0)}}</td>
-   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
-    {{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
-    {{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td>
-   <td>10</td>
-   <td>12{{property_prefix("-o")}}<br>
-    12.10</td>
-   <td>4.0{{property_prefix("-webkit")}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-   <th>Chrome for Android</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
-    {{CompatVersionUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] Gecko 44.0 {{geckoRelease("44.0")}} 은 layout.css.prefixes.webkit 환경 설정 뒤에 웹 호환성 이유로 인해 -webkit- 접두사가 붙은 속성 버전에 대한 지원을 추가했으며, 기본값은 false입니다. Gecko 49.0 {{geckoRelease("49.0")}} 이후 기본 설정은 true로 기본 설정됩니다.</p>
+<p>{{Compat}}</p>
 
 <h2 id="같이_보기(See_also)">같이 보기(See also)</h2>
 
diff --git a/files/ko/web/css/font-weight/index.html b/files/ko/web/css/font-weight/index.html
index 59098abf33..de4e397f4f 100644
--- a/files/ko/web/css/font-weight/index.html
+++ b/files/ko/web/css/font-weight/index.html
@@ -2,6 +2,7 @@
 title: font-weight
 slug: Web/CSS/font-weight
 translation_of: Web/CSS/font-weight
+browser-compat: css.properties.font-weight
 ---
 <div>{{CSSRef}}</div>
 
@@ -234,50 +235,4 @@ span {
 
 <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</td>
-   <td>2.0</td>
-   <td>{{CompatGeckoDesktop(1.0)}}</td>
-   <td>3.0</td>
-   <td>3.5</td>
-   <td>1.3</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</td>
-   <td>1.0</td>
-   <td>{{CompatGeckoMobile(1.0)}}</td>
-   <td>6.0</td>
-   <td>6.0</td>
-   <td>3.1</td>
-  </tr>
- </tbody>
-</table>
-</div>
+<p>{{Compat}}</p>
diff --git a/files/ko/web/css/transition-delay/index.html b/files/ko/web/css/transition-delay/index.html
index 03b0a731f6..9f64930d73 100644
--- a/files/ko/web/css/transition-delay/index.html
+++ b/files/ko/web/css/transition-delay/index.html
@@ -2,6 +2,7 @@
 title: transition-delay
 slug: Web/CSS/transition-delay
 translation_of: Web/CSS/transition-delay
+browser-compat: css.properties.transition-delay
 ---
 <div>{{CSSRef}}{{SeeCompatTable}}</div>
 
@@ -331,61 +332,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 
 <h2 id="Browser_compatibility">Browser compatibility</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>1.0 {{property_prefix("-webkit")}}</td>
-   <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br>
-    {{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td>
-   <td>10.0</td>
-   <td>11.6 {{property_prefix("-o")}}<br>
-    12.10</td>
-   <td>3.0 {{property_prefix("-webkit")}}</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 Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>2.1 {{property_prefix("-webkit")}}</td>
-   <td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br>
-    {{CompatGeckoMobile("16.0")}}<sup>[1]</sup></td>
-   <td>{{CompatUnknown}}</td>
-   <td>10.0 {{property_prefix("-o")}}<br>
-    12.10<sup>[2]</sup></td>
-   <td>3.2 {{property_prefix("-webkit")}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the property 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>[2] See <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">blog post about Opera 12.50</a>.</p>
+<p>{{Compat}}</p>
 
 <h2 id="See_also">See also</h2>
 
diff --git a/files/ko/web/css/transition/index.html b/files/ko/web/css/transition/index.html
index e14bda0330..1c8c0d6044 100644
--- a/files/ko/web/css/transition/index.html
+++ b/files/ko/web/css/transition/index.html
@@ -2,6 +2,7 @@
 title: transition
 slug: Web/CSS/transition
 translation_of: Web/CSS/transition
+browser-compat: css.properties.transition
 ---
 <div>{{CSSRef}}{{SeeCompatTable}}</div>
 
@@ -68,79 +69,7 @@ transition: unset;
 
 <h2 id="Browser_compatibility">Browser compatibility</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>1.0 {{ property_prefix("-webkit") }}<br>
-    26.0 <a href="http://googlechromereleases.blogspot.com/2013/03/stable-channel-update_26.html" title="Released on March 26, 2013">#</a></td>
-   <td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}<br>
-    {{ CompatGeckoDesktop("16.0") }}<sup>[1]</sup></td>
-   <td>10.0</td>
-   <td>10.1 {{ property_prefix("-o") }}<br>
-    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="Released on August 3, 2012">#</a></td>
-   <td>3.0 {{ property_prefix("-webkit") }}<br>
-    6.1</td>
-  </tr>
-  <tr>
-   <td>Gradients<sup>[2]</sup></td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>10.0</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>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>2.1 {{ property_prefix("-webkit") }}</td>
-   <td>{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}<br>
-    {{ CompatGeckoMobile("16.0") }}<sup>[1]</sup></td>
-   <td>10.0</td>
-   <td>10.0 {{ property_prefix("-o") }}<br>
-    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
-   <td>3.2 {{ property_prefix("-webkit") }}</td>
-  </tr>
-  <tr>
-   <td>Gradients<sup>[1]</sup></td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>10.0</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatNo() }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the property 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>[2] <a href="http://www.quirksmode.org/css/transitions/properties.html#t031">PPK test</a></p>
+<p>{{Compat}}</p>
 
 <h2 id="See_also">See also</h2>
 
diff --git a/files/ko/web/css/will-change/index.html b/files/ko/web/css/will-change/index.html
index ddddef39f2..a685e9f2f7 100644
--- a/files/ko/web/css/will-change/index.html
+++ b/files/ko/web/css/will-change/index.html
@@ -2,6 +2,7 @@
 title: will-change
 slug: Web/CSS/will-change
 translation_of: Web/CSS/will-change
+browser-compat: css.properties.will-change
 ---
 <div>{{CSSRef}}</div>
 
@@ -118,54 +119,4 @@ function removeHint() {
 
 <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</td>
-   <td>{{CompatChrome(36)}}</td>
-   <td>{{CompatGeckoDesktop(36)}} [1]</td>
-   <td><a href="https://dev.modern.ie/platform/status/csswillchange/?filter=f3e0000bf&amp;search=will-change">{{CompatNo}}</a></td>
-   <td>{{CompatOpera(24)}}</td>
-   <td>{{CompatSafari(9.1)}}</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</td>
-   <td>37</td>
-   <td>{{CompatGeckoMobile(36)}} [1]</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>9.3</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] From Firefox 31 to 35, <code>will-change</code> was available, but only if the user flipped the <code>layout.css.will-change.enabled</code> flag to <code>true</code>. The preference have been removed in Firefox 43.</p>
-
-<p>Firefox allows to set <code>will-change: will-change</code> up to version 42.0, which is invalid by the spec. This was fixed in Firefox 43.0. See {{bug("1195884")}}.</p>
+<p>{{Compat}}</p>