Skip to content

Commit

Permalink
Source spec section from macros in CSS (phase 2) (#6463)
Browse files Browse the repository at this point in the history
  • Loading branch information
@teoli2003
teoli2003 authored Jul 3, 2021
1 parent 3659d66 commit bec20b2
Show file tree
Hide file tree
Showing 67 changed files with 240 additions and 1,470 deletions.
15 changes: 1 addition & 14 deletions files/en-us/web/css/@media/shape/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,20 +64,7 @@ <h3 id="Custom_stylesheet">Custom stylesheet</h3>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Round Display', '#shape-media-feature', 'shape')}}</td>
<td>{{Spec2('CSS Round Display')}}</td>
</tr>
</tbody>
</table>
{{Specifications}}

<h2 id="Browser_compatibility">Browser compatibility</h2>

Expand Down
39 changes: 12 additions & 27 deletions files/en-us/web/css/@media/update-frequency/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,17 @@
---
<div>{{CSSRef}}</div>

<p>The <strong><code>update</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features">media feature</a> can be used to test how frequently (if at all) the output device is able to modify the appearance of content.</p>
<p>The <strong><code>update</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features">media feature</a> can be used to test how frequently (if at all) the output device is able to modify the appearance of content.</p>

<h2 id="Syntax">Syntax</h2>

<p>The <code>update</code> feature is specified as a single keyword value chosen from the list below.</p>
<p>The <code>update</code> feature is specified as a single keyword value chosen from the list below.</p>

<dl>
<dt><code>none</code></dt>
<dd>Once it has been rendered, the layout can no longer be updated. Example: documents printed on paper.</dd>
<dt><code>slow</code></dt>
<dd>The layout may change dynamically according to the usual rules of CSS, but the output device is not able to render or display changes quickly enough for them to be perceived as a smooth animation. Examples: e-book readers or severely underpowered devices.</dd>
<dd>The layout may change dynamically according to the usual rules of CSS, but the output device is not able to render or display changes quickly enough for them to be perceived as a smooth animation. Examples: e-book readers or severely underpowered devices.</dd>
<dt><code>fast</code></dt>
<dd>The layout may change dynamically according to the usual rules of CSS, and the output device is not unusually constrained in speed, so regularly-updating things like <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> can be used. Example: computer screens.</dd>
</dl>
Expand All @@ -36,19 +36,19 @@ <h3 id="HTML">HTML</h3>
<h3 id="CSS">CSS</h3>

<pre class="brush: css">@keyframes jiggle {
  from {
  transform: translateY(0);
from {
transform: translateY(0);
}

  to {
  transform: translateY(25px);
to {
transform: translateY(25px);
}
}

@media (update: fast) {
  p {
  animation: 1s jiggle linear alternate infinite;
  }
p {
animation: 1s jiggle linear alternate infinite;
}
}</pre>

<h3 id="Result">Result</h3>
Expand All @@ -57,22 +57,7 @@ <h3 id="Result">Result</h3>

<h2 id="Specifications">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('CSS4 Media Queries', '#update', 'update')}}</td>
<td>{{Spec2('CSS4 Media Queries')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
{{Specifications}}

<h2 id="Browser_compatibility">Browser compatibility</h2>

Expand All @@ -81,6 +66,6 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
<h2 id="See_also">See also</h2>

<ul>
<li><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using Media Queries</a></li>
<li><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using Media Queries</a></li>
<li><a href="/en-US/docs/Web/CSS/@media">@media</a></li>
</ul>
27 changes: 6 additions & 21 deletions files/en-us/web/css/_colon_current/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
---
<p>{{CSSRef}}</p>

<p>The <strong><code>:current</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> selector is a time-dimensional pseudo-class that represents the element, or an ancestor of the element, that is currently being displayed. For example in a video with captions which are being displayed by <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a>.</p>
<p>The <strong><code>:current</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> selector is a time-dimensional pseudo-class that represents the element, or an ancestor of the element, that is currently being displayed. For example in a video with captions which are being displayed by <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a>.</p>

<pre class="brush: css">:current(p, span) {
background-color: yellow;
Expand All @@ -20,18 +20,18 @@ <h2 id="Examples">Examples</h2>
<h3 id="CSS">CSS</h3>

<pre class="brush: css">:current(p, span) {
  background-color: yellow;
background-color: yellow;
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;video controls preload="metadata"&gt;
&lt;source src="video.mp4" type="video/mp4" /&gt;
  &lt;source src="video.webm" type="video/webm" /&gt;
  &lt;track label="English" kind="subtitles" srclang="en" src="subtitles.vtt" default&gt;
&lt;source src="video.webm" type="video/webm" /&gt;
&lt;track label="English" kind="subtitles" srclang="en" src="subtitles.vtt" default&gt;
&lt;/video&gt;</pre>

<h3 id="WebVTT">WebVTT </h3>
<h3 id="WebVTT">WebVTT</h3>

<pre>WEBVTT FILE

Expand All @@ -50,22 +50,7 @@ <h3 id="WebVTT">WebVTT </h3>

<h2 id="Specifications">Specifications</h2>

<table>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS4 Selectors", "#the-current-pseudo", ":current")}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
{{Specifications}}

<h2 id="Browser_compatibility">Browser compatibility</h2>

Expand Down
19 changes: 2 additions & 17 deletions files/en-us/web/css/_colon_local-link/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
---
<p>{{ CSSRef }}</p>

<p>The <strong><code>:local-link</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> represents a link to the same document. Therefore an element that is the source anchor of a hyperlink whose target’s absolute URL matches the element’s own document URL.</p>
<p>The <strong><code>:local-link</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> represents a link to the same document. Therefore an element that is the source anchor of a hyperlink whose target’s absolute URL matches the element's own document URL.</p>

<pre>/* Selects any &lt;a&gt; that links to the current document */
a:local-link {
Expand Down Expand Up @@ -38,22 +38,7 @@ <h3 id="Result">Result</h3>

<h2 id="Specifications">Specifications</h2>

<table>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#the-local-link-pseudo', ':local-link') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
{{Specifications}}

<h2 id="Browser_compatibility">Browser compatibility</h2>

Expand Down
37 changes: 11 additions & 26 deletions files/en-us/web/css/_colon_nth-col/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
---
<p>{{CSSRef}}{{SeeCompatTable}}</p>

<p>The <strong><code>:nth-col()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> is designed for tables and grids. It accepts the An+B notation such as used with the {{Cssxref(":nth-child")}} selector, using this to target every nth column. The values odd and even are also valid. </p>
<p>The <strong><code>:nth-col()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> is designed for tables and grids. It accepts the An+B notation such as used with the {{Cssxref(":nth-child")}} selector, using this to target every nth column. The values odd and even are also valid.</p>

<pre class="brush: css">/* Selects every odd column in a table */
:nth-col(odd) {
Expand All @@ -14,7 +14,7 @@

<h2 id="Syntax">Syntax</h2>

<p>The <code>nth-col</code> pseudo-class is specified with a single argument, which represents the pattern for matching elements.</p>
<p>The <code>nth-col</code> pseudo-class is specified with a single argument, which represents the pattern for matching elements.</p>

<p>See {{Cssxref(":nth-child")}} for a more detailed explanation of its syntax.</p>

Expand All @@ -31,16 +31,16 @@ <h4 id="HTML">HTML</h4>
<pre class="brush: html">&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;one&lt;/td&gt;
  &lt;td&gt;two&lt;/td&gt;
  &lt;td&gt;three&lt;/td&gt;
  &lt;td&gt;four&lt;/td&gt;
  &lt;/tr&gt;
&lt;td&gt;two&lt;/td&gt;
&lt;td&gt;three&lt;/td&gt;
&lt;td&gt;four&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;one&lt;/td&gt;
  &lt;td&gt;two&lt;/td&gt;
  &lt;td&gt;three&lt;/td&gt;
  &lt;td&gt;four&lt;/td&gt;
  &lt;/tr&gt;
&lt;td&gt;two&lt;/td&gt;
&lt;td&gt;three&lt;/td&gt;
&lt;td&gt;four&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;</pre>

<h4 id="CSS">CSS</h4>
Expand All @@ -62,22 +62,7 @@ <h4 id="Result">Result</h4>

<h2 id="Specifications">Specifications</h2>

<table>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Selectors', '#the-nth-col-pseudo', ':nth-col')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
{{Specifications}}

<h2 id="Browser_compatibility">Browser compatibility</h2>

Expand Down
37 changes: 11 additions & 26 deletions files/en-us/web/css/_colon_nth-last-col/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
---
<p>{{CSSRef}}{{SeeCompatTable}}</p>

<p>The <strong><code>:nth-last-col()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> is designed for tables and grids. It accepts the An+B notation such as used with the {{Cssxref(":nth-child")}} selector, using this to target every nth column before it, therefore counting back from the end of the set of columns. The values odd and even are also valid. </p>
<p>The <strong><code>:nth-last-col()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> is designed for tables and grids. It accepts the An+B notation such as used with the {{Cssxref(":nth-child")}} selector, using this to target every nth column before it, therefore counting back from the end of the set of columns. The values odd and even are also valid.</p>

<pre class="brush: css">/* Selects every odd column in a table */
:nth-last-col(odd) {
Expand All @@ -14,7 +14,7 @@

<h2 id="Syntax">Syntax</h2>

<p>The <code>nth-last-col</code> pseudo-class is specified with a single argument, which represents the pattern for matching elements.</p>
<p>The <code>nth-last-col</code> pseudo-class is specified with a single argument, which represents the pattern for matching elements.</p>

<p>See {{Cssxref(":nth-child")}} for a more detailed explanation of its syntax.</p>

Expand All @@ -31,16 +31,16 @@ <h4 id="HTML">HTML</h4>
<pre class="brush: html">&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;one&lt;/td&gt;
  &lt;td&gt;two&lt;/td&gt;
  &lt;td&gt;three&lt;/td&gt;
  &lt;td&gt;four&lt;/td&gt;
  &lt;/tr&gt;
&lt;td&gt;two&lt;/td&gt;
&lt;td&gt;three&lt;/td&gt;
&lt;td&gt;four&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;one&lt;/td&gt;
  &lt;td&gt;two&lt;/td&gt;
  &lt;td&gt;three&lt;/td&gt;
  &lt;td&gt;four&lt;/td&gt;
  &lt;/tr&gt;
&lt;td&gt;two&lt;/td&gt;
&lt;td&gt;three&lt;/td&gt;
&lt;td&gt;four&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;</pre>

<h4 id="CSS">CSS</h4>
Expand All @@ -62,22 +62,7 @@ <h4 id="Result">Result</h4>

<h2 id="Specifications">Specifications</h2>

<table>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Selectors', '#the-nth-last-col-pseudo', ':nth-last-col')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
{{Specifications}}

<h2 id="Browser_compatibility">Browser compatibility</h2>

Expand Down
21 changes: 3 additions & 18 deletions files/en-us/web/css/_colon_paused/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
---
<p>{{CSSRef}}{{SeeCompatTable}}</p>

<p>The <strong><code>:paused</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> selector is a resource state pseudo-class that will match an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “paused”. </p>
<p>The <strong><code>:paused</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> selector is a resource state pseudo-class that will match an audio, video, or similar resource that is capable of being "played" or "paused", when that element is "paused".</p>

<p>A resource is paused either due to being in an non-activated state, or due to the user explicitly paused it.</p>

Expand All @@ -27,28 +27,13 @@ <h2 id="Examples">Examples</h2>
<h3 id="CSS">CSS</h3>

<pre class="brush: css">:paused {
  border: 5px solid orange;
border: 5px solid orange;
}
</pre>

<h2 id="Specifications">Specifications</h2>

<table>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS4 Selectors", "#selectordef-paused", ":paused")}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
{{Specifications}}

<h2 id="Browser_compatibility">Browser compatibility</h2>

Expand Down
17 changes: 1 addition & 16 deletions files/en-us/web/css/_colon_picture-in-picture/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,22 +52,7 @@ <h3 id="CSS">CSS</h3>

<h2 id="Specifications">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('Picture-in-Picture', '#:picture-in-picture-pseudo-class', ':picture-in-picture')}}</td>
<td>{{Spec2('Picture-in-Picture')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
{{Specifications}}

<h2 id="Browser_compatibility">Browser compatibility</h2>

Expand Down
Loading

0 comments on commit bec20b2

Please sign in to comment.