Skip to content

Fix live sample IDs for CSS docs #7732

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 9, 2021
Merged

Fix live sample IDs for CSS docs #7732

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions files/en-us/web/css/_colon_user-invalid/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ <h2 id="Syntax">Syntax</h2>

<h2 id="Examples">Examples</h2>

<h3 id="Setting_invalid">Setting a color and symbol on :user-invalid</h3>
<h3>Setting a color and symbol on :user-invalid</h3>

<p>In the following example, the red border and ❌ only display once the user has interacted with the field.
Try typing something other than an email address to see it in action.</p>
Expand All @@ -45,7 +45,7 @@ <h3 id="Setting_invalid">Setting a color and symbol on :user-invalid</h3>
color: red;
}</pre>

<p>{{EmbedLiveSample("Setting_invalid", 140, 100)}}</p>
<p>{{EmbedLiveSample("Setting_a_color_and_symbol_on_user-invalid", 140, 100)}}</p>

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

Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/css/_colon_user-valid/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ <h2 id="Syntax">Syntax</h2>

<h2 id="Examples">Examples</h2>

<h3 id="Setting_valid">Setting a color and symbol on :user-valid</h3>
<h3>Setting a color and symbol on :user-valid</h3>

<p>In the following example, the green border and ✅ only display once the user has interacted with the field.
Try changing the email address to another valid email to see it in action.</p>
Expand All @@ -54,7 +54,7 @@ <h3 id="Setting_valid">Setting a color and symbol on :user-valid</h3>
color: green;
}</pre>

<p>{{EmbedLiveSample("Setting_valid", 140, 100)}}</p>
<p>{{EmbedLiveSample("Setting_a_color_and_symbol_on_user-valid", 140, 100)}}</p>

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

Expand Down
8 changes: 4 additions & 4 deletions files/en-us/web/css/_doublecolon_file-selector-button/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h2 id="Syntax">Syntax</h2>

<h2 id="Examples">Examples</h2>

<h3 id="basic_example">Basic example</h3>
<h3>Basic example</h3>

<h4 id="HTML">HTML</h4>

Expand Down Expand Up @@ -63,13 +63,13 @@ <h4 id="CSS">CSS</h4>

<h4>Result</h4>

<p>{{EmbedLiveSample("basic_example", "100%", 150)}}</p>
<p>{{EmbedLiveSample("Basic_example", "100%", 150)}}</p>

<p>Example with fallback for older browsers supporting the <code>-webkit</code> and <code>-ms</code> prefixes. Note that as a selector you will need to write out the whole code block twice, as an unrecognized selector invalidates the whole list.</p>

<p>Note that <code>::file-selector-button</code> is a whole element, and as such matches the rules from the UA stylesheet. In particular, fonts and colors won't necessarily inherit from the <code>input</code> element.</p>

<h3 id="fallback_example">Fallback example</h3>
<h3>Fallback example</h3>
<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;form&gt;
Expand Down Expand Up @@ -127,7 +127,7 @@ <h4 id="CSS_2">CSS</h4>

<h4>Result</h4>

<p>{{EmbedLiveSample("fallback_example", "100%", 150)}}</p>
<p>{{EmbedLiveSample("Fallback_example", "100%", 150)}}</p>

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

Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/css/background-size/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ <h2 id="Formal_syntax">Formal syntax</h2>

<h2 id="Examples">Examples</h2>

<h3 id="tiling_a_large_image">Tiling a large image</h3>
<h3>Tiling a large image</h3>

<p>Let's consider a large image, a 2982x2808 Firefox logo image. We want to tile four copies of this image into a 300x300-pixel element. To do this, we can use a fixed <code>background-size</code> value of 150 pixels.</p>

Expand All @@ -175,7 +175,7 @@ <h4 id="CSS">CSS</h4>

<h4 id="Result">Result</h4>

<p>{{EmbedLiveSample("tiling_a_large_image", 340, 340)}}</p>
<p>{{EmbedLiveSample("Tiling_a_large_image", 340, 340)}}</p>

<p>See <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Scaling background images</a> for more examples.</p>

Expand Down
16 changes: 8 additions & 8 deletions files/en-us/web/css/border-bottom-left-radius/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ <h2 id="Formal_syntax">Formal syntax</h2>

<h2 id="Examples">Examples</h2>

<h3 id="arc_of_a_circle">Arc of a circle</h3>
<h3>Arc of a circle</h3>

<p>A single <code>&lt;length&gt;</code> value produces an arc of a circle.</p>

Expand All @@ -98,9 +98,9 @@ <h3 id="arc_of_a_circle">Arc of a circle</h3>
}
</pre>

{{EmbedLiveSample("arc_of_a_circle")}}
{{EmbedLiveSample("Arc_of_a_circle")}}

<h3 id="arc_of_an_ellipse">Arc of an ellipse</h3>
<h3>Arc of an ellipse</h3>

<p>Two different <code>&lt;length&gt;</code> values produce an arc of an ellipse.</p>

Expand All @@ -116,9 +116,9 @@ <h3 id="arc_of_an_ellipse">Arc of an ellipse</h3>
}
</pre>

{{EmbedLiveSample("arc_of_an_ellipse")}}
{{EmbedLiveSample("Arc_of_an_ellipse")}}

<h3 id="square_element_with_percentage_radius">Square element with percentage radius</h3>
<h3>Square element with percentage radius</h3>

<p>A square element with a single <code>&lt;percentage&gt;</code> value produces an arc of a circle.</p>

Expand All @@ -134,9 +134,9 @@ <h3 id="square_element_with_percentage_radius">Square element with percentage ra
}
</pre>

{{EmbedLiveSample("square_element_with_percentage_radius")}}
{{EmbedLiveSample("Square_element_with_percentage_radius")}}

<h3 id="non_square_element_with_percentage_radius">Non-square element with percentage radius</h3>
<h3>Non-square element with percentage radius</h3>

<p>A non-square element with a single <code>&lt;percentage&gt;</code> value produces an arc of an ellipse.</p>

Expand All @@ -152,7 +152,7 @@ <h3 id="non_square_element_with_percentage_radius">Non-square element with perce
}
</pre>

{{EmbedLiveSample("non_square_element_with_percentage_radius")}}
{{EmbedLiveSample("Non-square_element_with_percentage_radius")}}

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

Expand Down
16 changes: 8 additions & 8 deletions files/en-us/web/css/border-bottom-right-radius/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ <h2 id="Formal_syntax">Formal syntax</h2>

<h2 id="Examples">Examples</h2>

<h3 id="arc_of_a_circle">Arc of a circle</h3>
<h3>Arc of a circle</h3>

<p>A single <code>&lt;length&gt;</code> value produces an arc of a circle.</p>

Expand All @@ -92,9 +92,9 @@ <h3 id="arc_of_a_circle">Arc of a circle</h3>
}
</pre>

{{EmbedLiveSample("arc_of_a_circle")}}
{{EmbedLiveSample("Arc_of_a_circle")}}

<h3 id="arc_of_an_ellipse">Arc of an ellipse</h3>
<h3>Arc of an ellipse</h3>

<p>Two different <code>&lt;length&gt;</code> values produce an arc of an ellipse.</p>

Expand All @@ -110,9 +110,9 @@ <h3 id="arc_of_an_ellipse">Arc of an ellipse</h3>
}
</pre>

{{EmbedLiveSample("arc_of_an_ellipse")}}
{{EmbedLiveSample("Arc_of_an_ellipse")}}

<h3 id="square_element_with_percentage_radius">Square element with percentage radius</h3>
<h3>Square element with percentage radius</h3>

<p>A square element with a single <code>&lt;percentage&gt;</code> value produces an arc of a circle.</p>

Expand All @@ -128,9 +128,9 @@ <h3 id="square_element_with_percentage_radius">Square element with percentage ra
}
</pre>

{{EmbedLiveSample("square_element_with_percentage_radius")}}
{{EmbedLiveSample("Square_element_with_percentage_radius")}}

<h3 id="non_square_element_with_percentage_radius">Non-square element with percentage radius</h3>
<h3>Non-square element with percentage radius</h3>

<p>A non-square element with a single <code>&lt;percentage&gt;</code> value produces an arc of an ellipse.</p>

Expand All @@ -146,7 +146,7 @@ <h3 id="non_square_element_with_percentage_radius">Non-square element with perce
}
</pre>

{{EmbedLiveSample("non_square_element_with_percentage_radius")}}
{{EmbedLiveSample("Non-square_element_with_percentage_radius")}}

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

Expand Down
5 changes: 2 additions & 3 deletions files/en-us/web/css/border-radius/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@

<div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div>


<p>The radius applies to the whole {{cssxref("background")}}, even if the element has no border; the exact position of the clipping is defined by the {{cssxref("background-clip")}} property.</p>

<p>The <code>border-radius</code> property does not apply to table elements when {{cssxref("border-collapse")}} is <code>collapse</code>.</p>
Expand Down Expand Up @@ -154,7 +153,7 @@ <h2 id="Formal_syntax">Formal syntax</h2>

{{csssyntax}}

<h2 id="examples">Examples</h2>
<h2>Examples</h2>

<pre class="brush: html hidden">
&lt;pre id="example-1"&gt;
Expand Down Expand Up @@ -241,7 +240,7 @@ <h2 id="examples">Examples</h2>
}
</pre>

{{EmbedLiveSample("examples", "200", "1150")}}
{{EmbedLiveSample("Examples", "200", "1150")}}

<h3 id="Live_Samples">Live Samples</h3>

Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/css/border-style/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ <h2 id="Formal_syntax">Formal syntax</h2>

<h2 id="Examples">Examples</h2>

<h3 id="all_property_values">All property values</h3>
<h3>All property values</h3>

<p>Here is an example of all the property values.</p>

Expand Down Expand Up @@ -183,7 +183,7 @@ <h4 id="CSS">CSS</h4>

<h4 id="Result">Result</h4>

<div>{{EmbedLiveSample('all_property_values', "1200", 450)}}</div>
<div>{{EmbedLiveSample('All_property_values', "1200", 450)}}</div>

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

Expand Down
16 changes: 8 additions & 8 deletions files/en-us/web/css/border-top-left-radius/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ <h2 id="Formal_syntax">Formal syntax</h2>

<h2 id="Examples">Examples</h2>

<h3 id="arc_of_a_circle">Arc of a circle</h3>
<h3>Arc of a circle</h3>

<p>A single <code>&lt;length&gt;</code> value produces an arc of a circle.</p>

Expand All @@ -90,9 +90,9 @@ <h3 id="arc_of_a_circle">Arc of a circle</h3>
}
</pre>

{{EmbedLiveSample("arc_of_a_circle")}}
{{EmbedLiveSample("Arc_of_a_circle")}}

<h3 id="arc_of_an_ellipse">Arc of an ellipse</h3>
<h3>Arc of an ellipse</h3>

<p>Two different <code>&lt;length&gt;</code> values produce an arc of an ellipse.</p>

Expand All @@ -108,9 +108,9 @@ <h3 id="arc_of_an_ellipse">Arc of an ellipse</h3>
}
</pre>

{{EmbedLiveSample("arc_of_an_ellipse")}}
{{EmbedLiveSample("Arc_of_an_ellipse")}}

<h3 id="square_element_with_percentage_radius">Square element with percentage radius</h3>
<h3>Square element with percentage radius</h3>

<p>A square element with a single <code>&lt;percentage&gt;</code> value produces an arc of a circle.</p>

Expand All @@ -126,9 +126,9 @@ <h3 id="square_element_with_percentage_radius">Square element with percentage ra
}
</pre>

{{EmbedLiveSample("square_element_with_percentage_radius")}}
{{EmbedLiveSample("Square_element_with_percentage_radius")}}

<h3 id="non_square_element_with_percentage_radius">Non-square element with percentage radius</h3>
<h3>Non-square element with percentage radius</h3>

<p>A non-square element with a single <code>&lt;percentage&gt;</code> value produces an arc of an ellipse.</p>

Expand All @@ -144,7 +144,7 @@ <h3 id="non_square_element_with_percentage_radius">Non-square element with perce
}
</pre>

{{EmbedLiveSample("non_square_element_with_percentage_radius")}}
{{EmbedLiveSample("Non-square_element_with_percentage_radius")}}

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

Expand Down
16 changes: 8 additions & 8 deletions files/en-us/web/css/border-top-right-radius/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ <h2 id="Formal_syntax">Formal syntax</h2>

<h2 id="Examples">Examples</h2>

<h3 id="arc_of_a_circle">Arc of a circle</h3>
<h3>Arc of a circle</h3>

<p>A single <code>&lt;length&gt;</code> value produces an arc of a circle.</p>

Expand All @@ -90,9 +90,9 @@ <h3 id="arc_of_a_circle">Arc of a circle</h3>
}
</pre>

{{EmbedLiveSample("arc_of_a_circle")}}
{{EmbedLiveSample("Arc_of_a_circle")}}

<h3 id="arc_of_an_ellipse">Arc of an ellipse</h3>
<h3>Arc of an ellipse</h3>

<p>Two different <code>&lt;length&gt;</code> values produce an arc of an ellipse.</p>

Expand All @@ -108,9 +108,9 @@ <h3 id="arc_of_an_ellipse">Arc of an ellipse</h3>
}
</pre>

{{EmbedLiveSample("arc_of_an_ellipse")}}
{{EmbedLiveSample("Arc_of_an_ellipse")}}

<h3 id="square_element_with_percentage_radius">Square element with percentage radius</h3>
<h3>Square element with percentage radius</h3>

<p>A square element with a single <code>&lt;percentage&gt;</code> value produces an arc of a circle.</p>

Expand All @@ -126,9 +126,9 @@ <h3 id="square_element_with_percentage_radius">Square element with percentage ra
}
</pre>

{{EmbedLiveSample("square_element_with_percentage_radius")}}
{{EmbedLiveSample("Square_element_with_percentage_radius")}}

<h3 id="non_square_element_with_percentage_radius">Non-square element with percentage radius</h3>
<h3>Non-square element with percentage radius</h3>

<p>A non-square element with a single <code>&lt;percentage&gt;</code> value produces an arc of an ellipse.</p>

Expand All @@ -144,7 +144,7 @@ <h3 id="non_square_element_with_percentage_radius">Non-square element with perce
}
</pre>

{{EmbedLiveSample("non_square_element_with_percentage_radius")}}
{{EmbedLiveSample("Non-square_element_with_percentage_radius")}}

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

Expand Down
12 changes: 6 additions & 6 deletions files/en-us/web/css/clear/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ <h2 id="Formal_syntax">Formal syntax</h2>

<h2 id="Examples">Examples</h2>

<h3 id="clear-left">clear: left</h3>
<h3>clear: left</h3>

<h4 id="HTML">HTML</h4>

Expand Down Expand Up @@ -115,9 +115,9 @@ <h4 id="CSS">CSS</h4>
}
</pre>

<p>{{ EmbedLiveSample('clear-left','100%','250') }}</p>
<p>{{ EmbedLiveSample('clear_left','100%','250') }}</p>

<h3 id="clear-right">clear: right</h3>
<h3>clear: right</h3>

<h4 id="HTML_2">HTML</h4>

Expand Down Expand Up @@ -155,9 +155,9 @@ <h4 id="CSS_2">CSS</h4>
width: 50%;
}</pre>

<p>{{ EmbedLiveSample('clear-right','100%','250') }}</p>
<p>{{ EmbedLiveSample('clear_right','100%','250') }}</p>

<h3 id="clear-both">clear: both</h3>
<h3>clear: both</h3>

<h4 id="HTML_3">HTML</h4>

Expand Down Expand Up @@ -195,7 +195,7 @@ <h4 id="CSS_3">CSS</h4>
width: 45%;
}</pre>

<p>{{ EmbedLiveSample('clear-both','100%','300') }}</p>
<p>{{ EmbedLiveSample('clear_both','100%','300') }}</p>

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

Expand Down
Loading