Skip to content
This repository was archived by the owner on Oct 17, 2025. It is now read-only.

Remove CSS example id attributes #556

Merged
wbamberg merged 1 commit into from
Feb 7, 2018
Merged

Remove CSS example id attributes #556

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
16 changes: 8 additions & 8 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Inside this newly created file, copy and paste the following code:
<section id="example-choice-list" class="example-choice-list large" data-property="border-radius">

<div class="example-choice" initial-choice="true">
<pre><code id="example_one" class="language-css">Your CSS goes here</code></pre>
<pre><code class="language-css">Your CSS goes here</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
Expand Down Expand Up @@ -96,21 +96,21 @@ Next, let's add the example CSS choices. Think of a few different ways that `bor
<section id="example-choice-list" class="example-choice-list large" data-property="border-radius">

<div class="example-choice" initial-choice="true">
<pre><code id="example_one" class="language-css">border-radius: 10px;</code></pre>
<pre><code class="language-css">border-radius: 10px;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_two" class="language-css">border-radius: 10px 50%;</code></pre>
<pre><code class="language-css">border-radius: 10px 50%;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_three" class="language-css">border-radius: 10px 5px 6em / 20px 25px 30%;</code></pre>
<pre><code class="language-css">border-radius: 10px 5px 6em / 20px 25px 30%;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
Expand All @@ -121,29 +121,29 @@ Next, let's add the example CSS choices. Think of a few different ways that `bor

The first thing to note is that the `section` element has a `data-property` attribute whose value is the name of the property, `border-radius` in this case. The editor uses this to test whether the user's browser supports the property. If it doesn't, then an interactive example won't work, and we just display the CSS options without their output. If you know that the example property has good cross-browser support, you can omit this attribute (for example, the `border-radius` example could certainly omit it).

Next, we have three `div` elements, one for each example CSS choice. Note that each choice gets its own ID: `example_one`, `example_two`, `example_three` and so on. You can choose which option will be shown at first by setting the `initial-choice` attribute to `true` (only one choice should have this).
Next, we have three `div` elements, one for each example CSS choice. You can choose which option will be shown at first by setting the `initial-choice` attribute to `true` (only one choice should have this).

Now we've finished writing the HTML for the example. The final version of `border-radius.html` should look like this:

```
<section id="example-choice-list" class="example-choice-list large" data-property="border-radius">

<div class="example-choice" initial-choice="true">
<pre><code id="example_one" class="language-css">border-radius: 10px;</code></pre>
<pre><code class="language-css">border-radius: 10px;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_two" class="language-css">border-radius: 10px 50%;</code></pre>
<pre><code class="language-css">border-radius: 10px 50%;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_three" class="language-css">border-radius: 10px 5px 6em / 20px 25px 30%;</code></pre>
<pre><code class="language-css">border-radius: 10px 5px 6em / 20px 25px 30%;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
Expand Down
8 changes: 4 additions & 4 deletions live-examples/css-examples/animation/animation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
<section id="example-choice-list" class="example-choice-list" data-property="animation">
<div class="example-choice">
<pre><code id="example_one" class="language-css">animation: slidein 3s ease-in 1s infinite reverse both running;</code></pre>
<pre><code class="language-css">animation: slidein 3s ease-in 1s infinite reverse both running;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_two" class="language-css">animation: slidein 3s linear 1s infinite running;</code></pre>
<pre><code class="language-css">animation: slidein 3s linear 1s infinite running;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_three" class="language-css">animation: slidein 3s linear 1s infinite alternate;</code></pre>
<pre><code class="language-css">animation: slidein 3s linear 1s infinite alternate;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_four" class="language-css">animation: slidein .5s linear 1s infinite alternate;</code></pre>
<pre><code class="language-css">animation: slidein .5s linear 1s infinite alternate;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
Expand Down
8 changes: 4 additions & 4 deletions live-examples/css-examples/backgrounds-and-borders/background-clip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
<section id="example-choice-list" class="example-choice-list" data-property="backgroundClip">
<div class="example-choice">
<pre><code id="example_one" class="language-css">background-clip: border-box;</code></pre>
<pre><code class="language-css">background-clip: border-box;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_two" class="language-css">background-clip: padding-box;</code></pre>
<pre><code class="language-css">background-clip: padding-box;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_three" class="language-css">background-clip: content-box;</code></pre>
<pre><code class="language-css">background-clip: content-box;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_four" class="language-css">background-clip: text;
<pre><code class="language-css">background-clip: text;
-webkit-background-clip: text;
color: transparent;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
Expand Down
12 changes: 6 additions & 6 deletions live-examples/css-examples/backgrounds-and-borders/background-color.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
<section id="example-choice-list" class="example-choice-list large" data-property="backgroundColor">
<div class="example-choice">
<pre><code id="example_one" class="language-css">background-color: brown;</code></pre>
<pre><code class="language-css">background-color: brown;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_two" class="language-css">background-color: #74992e;</code></pre>
<pre><code class="language-css">background-color: #74992e;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_three" class="language-css">background-color: rgb(255, 255, 128);</code></pre>
<pre><code class="language-css">background-color: rgb(255, 255, 128);</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_four" class="language-css">background-color: rgba(255, 255, 128, .5);</code></pre>
<pre><code class="language-css">background-color: rgba(255, 255, 128, .5);</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_five" class="language-css">background-color: hsl(50, 33%, 25%);</code></pre>
<pre><code class="language-css">background-color: hsl(50, 33%, 25%);</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_six" class="language-css">background-color: hsla(50, 33%, 25%, .75);</code></pre>
<pre><code class="language-css">background-color: hsla(50, 33%, 25%, .75);</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
Expand Down
8 changes: 4 additions & 4 deletions live-examples/css-examples/backgrounds-and-borders/background-image.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
<section id="example-choice-list" class="example-choice-list large" data-property="backgroundImage">
<div class="example-choice">
<pre><code id="example_one" class="language-css">background-image: url("../../media/examples/lizard.png");</code></pre>
<pre><code class="language-css">background-image: url("../../media/examples/lizard.png");</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_two" class="language-css">background-image: url("../../media/examples/lizard.png"),
<pre><code class="language-css">background-image: url("../../media/examples/lizard.png"),
url("../../media/examples/star.png");</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_three" class="language-css">background-image: url("../../media/examples/star.png"),
<pre><code class="language-css">background-image: url("../../media/examples/star.png"),
url("../../media/examples/lizard.png");</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice" initial-choice="true">
<pre><code id="example_four" class="language-css">background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
<pre><code class="language-css">background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
url("../../media/examples/lizard.png");</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
Expand Down
10 changes: 5 additions & 5 deletions live-examples/css-examples/backgrounds-and-borders/background-position-x.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
<section id="example-choice-list" class="example-choice-list large" data-property="backgroundPositionX">
<div class="example-choice">
<pre><code id="example_one" class="language-css">background-position-x: left;</code></pre>
<pre><code class="language-css">background-position-x: left;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_two" class="language-css">background-position-x: center;</code></pre>
<pre><code class="language-css">background-position-x: center;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_three" class="language-css">background-position-x: 25%;</code></pre>
<pre><code class="language-css">background-position-x: 25%;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_four" class="language-css">background-position-x: 2rem;</code></pre>
<pre><code class="language-css">background-position-x: 2rem;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_five" class="language-css">background-position-x: right 32px;</code></pre>
<pre><code class="language-css">background-position-x: right 32px;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
Expand Down
10 changes: 5 additions & 5 deletions live-examples/css-examples/backgrounds-and-borders/background-position-y.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
<section id="example-choice-list" class="example-choice-list large" data-property="backgroundPositionY">
<div class="example-choice">
<pre><code id="example_one" class="language-css">background-position-y: top;</code></pre>
<pre><code class="language-css">background-position-y: top;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_two" class="language-css">background-position-y: center;</code></pre>
<pre><code class="language-css">background-position-y: center;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_three" class="language-css">background-position-y: 25%;</code></pre>
<pre><code class="language-css">background-position-y: 25%;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_four" class="language-css">background-position-y: 2rem;</code></pre>
<pre><code class="language-css">background-position-y: 2rem;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_five" class="language-css">background-position-y: bottom 32px;</code></pre>
<pre><code class="language-css">background-position-y: bottom 32px;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
Expand Down
12 changes: 6 additions & 6 deletions live-examples/css-examples/backgrounds-and-borders/background-position.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
<section id="example-choice-list" class="example-choice-list large" data-property="backgroundPosition">
<div class="example-choice">
<pre><code id="example_one" class="language-css">background-position: top;</code></pre>
<pre><code class="language-css">background-position: top;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_two" class="language-css">background-position: left;</code></pre>
<pre><code class="language-css">background-position: left;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_three" class="language-css">background-position: center;</code></pre>
<pre><code class="language-css">background-position: center;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_four" class="language-css">background-position: 25% 75%;</code></pre>
<pre><code class="language-css">background-position: 25% 75%;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_five" class="language-css">background-position: bottom 50px right 100px;</code></pre>
<pre><code class="language-css">background-position: bottom 50px right 100px;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
</div>

<div class="example-choice">
<pre><code id="example_six" class="language-css">background-position: right 35% bottom 45%;</code></pre>
<pre><code class="language-css">background-position: right 35% bottom 45%;</code></pre>
<button type="button" class="copy hidden" aria-hidden="true">
<span class="visually-hidden">Copy to Clipboard</span>
</button>
Expand Down
Loading