Fixed counter
CSS
-<ul> + +<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>-
@counter-style circled-digits {
system: fixed;
@@ -159,8 +156,8 @@ Symbolic counter
CSS
-
-<ul>
+
+<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
@@ -170,7 +167,6 @@ CSS
<li>Seven</li>
<li>Eight</li>
</ul>
-
@counter-style abc {
system: symbolic;
@@ -201,8 +197,7 @@ Alphabetic counter
CSS
-
-<ul>
+<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
@@ -213,7 +208,6 @@ CSS
<li>Eight</li>
</ul>
-
@counter-style abc {
system: alphabetic;
@@ -248,8 +242,8 @@ Numeric counter
CSS
-
-<ul>
+
+<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
@@ -259,7 +253,6 @@ CSS
<li>Seven</li>
<li>Eight</li>
</ul>
-
@counter-style abc {
system: numeric;
@@ -281,8 +274,8 @@ Numeric counter with numeric symbo
CSS
-
-<ul class="list">
+
+<ul class="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
@@ -294,7 +287,6 @@ CSS
<li>Nine</li>
<li>Ten</li>
</ul>
-
@counter-style numbers {
system: numeric;
diff --git a/files/en-us/web/css/@media/aspect-ratio/index.html b/files/en-us/web/css/@media/aspect-ratio/index.html
index e2e62b65e9bc31d..14d35e00949483c 100644
--- a/files/en-us/web/css/@media/aspect-ratio/index.html
+++ b/files/en-us/web/css/@media/aspect-ratio/index.html
@@ -54,14 +54,9 @@ CSS
}
-
-_Example
+
-used iframe and DataURL to enable this iframe could resize
-
-HTML
-
-<label id="wf" for="w">width:165</label>
+<label id="wf" for="w">width:165</label>
<input id="w" name="w" type="range" min="100" max="250" step="5" value="165">
<label id="hf" for="w">height:165</label>
<input id="h" name="h" type="range" min="100" max="250" step="5" value="165">
diff --git a/files/en-us/web/css/@media/prefers-reduced-motion/index.html b/files/en-us/web/css/@media/prefers-reduced-motion/index.html
index 27945e8ece21d3a..d62af0559b1189c 100644
--- a/files/en-us/web/css/@media/prefers-reduced-motion/index.html
+++ b/files/en-us/web/css/@media/prefers-reduced-motion/index.html
@@ -67,8 +67,7 @@ CSS
}
-
-.animation {
+.animation {
background-color: #306;
color: #fff;
font: 1.2em sans-serif;
@@ -92,7 +91,6 @@ CSS
100% { opacity: 1; }
}
-
Result
diff --git a/files/en-us/web/css/_colon_empty/index.html b/files/en-us/web/css/_colon_empty/index.html
index 12fd24c899ea59a..3f8414d16a81386 100644
--- a/files/en-us/web/css/_colon_empty/index.html
+++ b/files/en-us/web/css/_colon_empty/index.html
@@ -44,12 +44,10 @@ HTML
CSS
-
-body {
+body {
display: flex;
justify-content: space-around;
}
-
.box {
background: pink;
diff --git a/files/en-us/web/css/_doublecolon_file-selector-button/index.html b/files/en-us/web/css/_doublecolon_file-selector-button/index.html
index 91951e7894918b2..35bd156766320f6 100644
--- a/files/en-us/web/css/_doublecolon_file-selector-button/index.html
+++ b/files/en-us/web/css/_doublecolon_file-selector-button/index.html
@@ -40,14 +40,12 @@ HTML
CSS
-
-form {
+form {
display: flex;
gap: 1em;
align-items: center;
}
-
input[type=file]::file-selector-button {
border: 2px solid #6c5ce7;
@@ -81,14 +79,12 @@ HTML
CSS
-
-form {
+form {
display: flex;
gap: 1em;
align-items: center;
}
-
input[type=file]::-ms-browse {
border: 2px solid #6c5ce7;
diff --git a/files/en-us/web/css/_doublecolon_selection/index.html b/files/en-us/web/css/_doublecolon_selection/index.html
index 42e035fd501dfd2..93fade747059165 100644
--- a/files/en-us/web/css/_doublecolon_selection/index.html
+++ b/files/en-us/web/css/_doublecolon_selection/index.html
@@ -48,8 +48,7 @@ HTML
CSS
-
-::-moz-selection {
+::-moz-selection {
color: gold;
background-color: red;
}
@@ -58,7 +57,6 @@ CSS
color: white;
background-color: blue;
}
-
/* Make selected text gold on a red background */
::selection {
diff --git a/files/en-us/web/css/align-content/index.html b/files/en-us/web/css/align-content/index.html
index 1b9611cb0adff81..06b61cfa28a84c8 100644
--- a/files/en-us/web/css/align-content/index.html
+++ b/files/en-us/web/css/align-content/index.html
@@ -226,10 +226,7 @@ HTML
</div>
-
-JavaScript
-
-var values = document.getElementById('values');
+var values = document.getElementById('values');
var display = document.getElementById('display');
var container = document.getElementById('container');
@@ -241,7 +238,6 @@ JavaScript
container.className = evt.target.value;
});
-
Result
diff --git a/files/en-us/web/css/align-items/index.html b/files/en-us/web/css/align-items/index.html
index 5e123c3b4e1ab36..d414929cb5609de 100644
--- a/files/en-us/web/css/align-items/index.html
+++ b/files/en-us/web/css/align-items/index.html
@@ -210,10 +210,7 @@ HTML
</div>
-
-JavaScript
-
-var values = document.getElementById('values');
+var values = document.getElementById('values');
var display = document.getElementById('display');
var container = document.getElementById('container');
@@ -225,7 +222,6 @@ JavaScript
container.className = evt.target.value;
});
-
Result
diff --git a/files/en-us/web/css/animation-timing-function/index.html b/files/en-us/web/css/animation-timing-function/index.html
index cc72104f77a60d7..2f40fc55e170d49 100644
--- a/files/en-us/web/css/animation-timing-function/index.html
+++ b/files/en-us/web/css/animation-timing-function/index.html
@@ -116,8 +116,7 @@ Examples
Cubic-Bezier examples
-
-<div class="parent">
+<div class="parent">
<div class="ease">ease</div>
<div class="easein">ease-in</div>
<div class="easeout">ease-out</div>
@@ -126,7 +125,7 @@ Cubic-Bezier examples
<div class="cb">cubic-bezier(0.2,-2,0.8,2)</div>
</div>
-.parent > div[class] {
+.parent > div[class] {
animation-name: changeme;
animation-duration: 10s;
animation-iteration-count: infinite;
@@ -149,7 +148,6 @@ Cubic-Bezier examples
}
}
-
.ease {
animation-timing-function: ease;
@@ -176,8 +174,7 @@ Cubic-Bezier examples
Step examples
-
-<div class="parent">
+<div class="parent">
<div class="jump-start">jump-start</div>
<div class="jump-end">jump-end</div>
<div class="jump-both">jump-both</div>
@@ -188,7 +185,7 @@ Step examples
<div class="step-end">step-end</div>
</div>
-.parent > div[class] {
+.parent > div[class] {
animation-name: changeme;
animation-duration: 10s;
animation-iteration-count: infinite;
@@ -211,7 +208,6 @@ Step examples
}
}
-
.jump-start {
animation-timing-function: steps(5, jump-start);
diff --git a/files/en-us/web/css/attr()/index.html b/files/en-us/web/css/attr()/index.html
index 37cbb309a9aeb73..d1dabbf9eaba59b 100644
--- a/files/en-us/web/css/attr()/index.html
+++ b/files/en-us/web/css/attr()/index.html
@@ -168,11 +168,9 @@ HTML
CSS
-
-.background {
+.background {
height: 100vh;
}
-
.background {
background-color: red;
diff --git a/files/en-us/web/css/border-image-repeat/index.html b/files/en-us/web/css/border-image-repeat/index.html
index 06fb32ec44614b9..71254ab4a1a998c 100644
--- a/files/en-us/web/css/border-image-repeat/index.html
+++ b/files/en-us/web/css/border-image-repeat/index.html
@@ -77,10 +77,7 @@ CSS
}
-
-HTML
-
-<div id="bordered">You can try out various border repetition rules on me!</div>
+<div id="bordered">You can try out various border repetition rules on me!</div>
<select id="repetition">
<option value="stretch">stretch</option>
@@ -92,14 +89,11 @@ HTML
</select>
-JavaScript
-
-var repetition = document.getElementById("repetition");
+var repetition = document.getElementById("repetition");
repetition.addEventListener("change", function (evt) {
document.getElementById("bordered").style.borderImageRepeat = evt.target.value;
});
-
Results
diff --git a/files/en-us/web/css/clip-path/index.html b/files/en-us/web/css/clip-path/index.html
index 8bf206fe31a01e8..9d0c65e44eab6d6 100644
--- a/files/en-us/web/css/clip-path/index.html
+++ b/files/en-us/web/css/clip-path/index.html
@@ -100,8 +100,7 @@ Examples
Comparison of HTML and SVG
-
-<svg class="defs">
+<svg class="defs">
<defs>
<clipPath id="myPath" clipPathUnits="objectBoundingBox">
<path d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" />
@@ -518,7 +517,6 @@ Comparison of HTML and SVG
svg text.em {
font-style: italic;
}
-
{{EmbedLiveSample("Comparison_of_HTML_and_SVG", "100%", 800, "", "", "example-outcome-frame")}}
@@ -556,15 +554,11 @@ CSS
}
-
-JavaScript
-
-const clipPathSelect = document.getElementById("clipPath");
+const clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", function (evt) {
document.getElementById("clipped").style.clipPath = evt.target.value;
});
-
Result
diff --git a/files/en-us/web/css/color_value/color-mix()/index.html b/files/en-us/web/css/color_value/color-mix()/index.html
index 36263d7a1d91c96..b0fb12d174b1c45 100644
--- a/files/en-us/web/css/color_value/color-mix()/index.html
+++ b/files/en-us/web/css/color_value/color-mix()/index.html
@@ -41,8 +41,7 @@ HTML
</ul>
CSS
-
- ul {
+ ul {
display: flex;
list-style-type: none;
font-size: 150%;
@@ -55,7 +54,6 @@ CSS
padding: 10px;
}
-
li:nth-child(1) {
background-color: color-mix(in srgb, #34c9eb 10%, white);
diff --git a/files/en-us/web/css/color_value/index.html b/files/en-us/web/css/color_value/index.html
index 6747b27702f2246..d84ee3779c7dba7 100644
--- a/files/en-us/web/css/color_value/index.html
+++ b/files/en-us/web/css/color_value/index.html
@@ -1274,10 +1274,7 @@ CSS
height: 200px;
}
-
-JavaScript
-
-const inputElem = document.querySelector('input');
+const inputElem = document.querySelector('input');
const divElem = document.querySelector('div');
function validTextColor(stringToTest) {
@@ -1303,7 +1300,6 @@ JavaScript
divElem.textContent = 'Invalid color value';
}
});
-
Result
diff --git a/files/en-us/web/css/contain/index.html b/files/en-us/web/css/contain/index.html
index b96b9fab829bcdf..361565d620956eb 100644
--- a/files/en-us/web/css/contain/index.html
+++ b/files/en-us/web/css/contain/index.html
@@ -133,8 +133,7 @@ Float interference
<p>More content here.</p>
</article>
-
-img {
+img {
float: left;
border: 3px solid black;
}
@@ -142,7 +141,6 @@ Float interference
article {
border: 1px solid black;
}
-
As you can see, because of the way floats work, the first image ends up inside the area of the second article:
@@ -152,8 +150,7 @@ Fixing with contain
If we give each article the contain property with a value of content, when new elements are inserted the browser understands it only needs to recalculate the containing element's subtree, and not anything outside it:
-
-<h1>My blog</h1>
+<h1>My blog</h1>
<article>
<h2>Heading of a nice article</h2>
<p>Content here.</p>
@@ -164,7 +161,6 @@ Fixing with contain
<img src="graphic.jpg" alt="photo">
<p>More content here.</p>
</article>
-
img {
float: left;
diff --git a/files/en-us/web/css/containing_block/index.html b/files/en-us/web/css/containing_block/index.html
index 4f521e57b1456ec..7debb9984b4da5a 100644
--- a/files/en-us/web/css/containing_block/index.html
+++ b/files/en-us/web/css/containing_block/index.html
@@ -84,14 +84,12 @@ Example 1
In this example, the paragraph is statically positioned, so its containing block is {{HTMLElement("section")}} because it's the nearest ancestor that is a block container.
-
-<body>
+<body>
<section>
<p>This is a paragraph!</p>
</section>
</body>
-
body {
background: beige;
@@ -119,14 +117,12 @@ Example 2
In this example, the paragraph's containing block is the {{HTMLElement("body")}} element, because <section> is not a block container (because of display: inline) and doesn’t establish a formatting context.
-
-<body>
+<body>
<section>
<p>This is a paragraph!</p>
</section>
</body>
-
body {
background: beige;
@@ -150,14 +146,12 @@ Example 3
In this example, the paragraph's containing block is <section> because the latter's position is absolute. The paragraph's percentage values are affected by the padding of its containing block, though if the containing block's {{cssxref("box-sizing")}} value were border-box this would not be the case.
-
-<body>
+<body>
<section>
<p>This is a paragraph!</p>
</section>
</body>
-
body {
background: beige;
@@ -189,14 +183,12 @@ Example 4
In this example, the paragraph's position is fixed, so its containing block is the initial containing block (on screens, the viewport). Thus, the paragraph's dimensions change based on the size of the browser window.
-
-<body>
+<body>
<section>
<p>This is a paragraph!</p>
</section>
</body>
-
body {
background: beige;
@@ -226,14 +218,12 @@ Example 5
In this example, the paragraph's position is absolute, so its containing block is <section>, which is the nearest ancestor with a {{cssxref("transform")}} property that isn't none.
-
-<body>
+<body>
<section>
<p>This is a paragraph!</p>
</section>
</body>
-
body {
background: beige;
diff --git a/files/en-us/web/css/css_animations/tips/index.html b/files/en-us/web/css/css_animations/tips/index.html
index c3ee359eee8c7fb..7f9029aac6a67a2 100644
--- a/files/en-us/web/css/css_animations/tips/index.html
+++ b/files/en-us/web/css/css_animations/tips/index.html
@@ -31,8 +31,7 @@ CSS content
Now we'll define the animation itself using CSS. Some CSS that's not important (the style of the "Run" button itself) isn't shown here, for brevity.
-
-.runButton {
+.runButton {
cursor: pointer;
width: 300px;
border: 1px solid black;
@@ -45,7 +44,6 @@ CSS content
background-color: darkgreen;
font: 14px "Open Sans", "Arial", sans-serif;
}
-
@keyframes colorchange {
0% { background: yellow }
diff --git a/files/en-us/web/css/css_background_and_borders/border-image_generator/index.html b/files/en-us/web/css/css_background_and_borders/border-image_generator/index.html
index e72eda53cc43e77..19e16ddeb34881b 100644
--- a/files/en-us/web/css/css_background_and_borders/border-image_generator/index.html
+++ b/files/en-us/web/css/css_background_and_borders/border-image_generator/index.html
@@ -7,12 +7,8 @@
---
This tool can be used to generate CSS3 {{cssxref("border-image")}} values.
-
-Border Image Generator
-
-HTML Content
-
- <div id="container">
+
+ <div id="container">
<div id="gallery">
<div id="image-gallery">
@@ -153,9 +149,7 @@ HTML Content
</div>
</div>
-CSS Content
-
-/* GRID OF TWELVE
+/* GRID OF TWELVE
* ========================================================================== */
.span_12 {
@@ -1205,9 +1199,7 @@ CSS Content
-JavaScript Content
-
-'use strict';
+'use strict';
/**
* UI-SlidersManager
diff --git a/files/en-us/web/css/css_background_and_borders/border-radius_generator/index.html b/files/en-us/web/css/css_background_and_borders/border-radius_generator/index.html
index 8205b2754f335ef..61d7925cbdec39b 100644
--- a/files/en-us/web/css/css_background_and_borders/border-radius_generator/index.html
+++ b/files/en-us/web/css/css_background_and_borders/border-radius_generator/index.html
@@ -8,12 +8,9 @@
---
This tool can be used to generate CSS3 {{cssxref("border-radius")}} effects.
-
-border-radius
+
-HTML Content
-
-<div id="container">
+<div id="container">
<div class="group section">
<div id="preview" class="col span_12">
<div id="subject">
@@ -102,9 +99,7 @@ HTML Content
</div>
-CSS Content
-
-/* GRID OF TEN
+/* GRID OF TEN
* ========================================================================== */
.span_12 {
@@ -808,9 +803,7 @@ CSS Content
-JavaScript Content
-
-'use strict';
+'use strict';
/**
* UI-InputSliderManager
diff --git a/files/en-us/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/en-us/web/css/css_background_and_borders/box-shadow_generator/index.html
index ec999486c3d1bde..31dbb81f4aa4944 100644
--- a/files/en-us/web/css/css_background_and_borders/box-shadow_generator/index.html
+++ b/files/en-us/web/css/css_background_and_borders/box-shadow_generator/index.html
@@ -8,12 +8,9 @@
---
This tool lets you construct CSS {{cssxref("box-shadow")}} effects, to add box shadow effects to your CSS objects.
-
-box-shadow generator
+
-HTML Content
-
-<div id="container">
+<div id="container">
<div class="group section">
<div id="layer_manager">
<div class="group section">
@@ -212,9 +209,7 @@ HTML Content
</div>
-CSS Content
-
-/* GRID OF TWELVE
+/* GRID OF TWELVE
* ========================================================================== */
.span_12 {
@@ -1155,9 +1150,7 @@ CSS Content
-JavaScript Content
-
-
+
'use strict';
diff --git a/files/en-us/web/css/css_colors/color_picker_tool/index.html b/files/en-us/web/css/css_colors/color_picker_tool/index.html
index 63b3c7708423625..27b169d335ee367 100644
--- a/files/en-us/web/css/css_colors/color_picker_tool/index.html
+++ b/files/en-us/web/css/css_colors/color_picker_tool/index.html
@@ -14,12 +14,10 @@
- color
- colors
---
-
-ColorPicker tool
-HTML
+
- <div id="container">
+ <div id="container">
<div id="palette" class="block">
<div id="color-palette"></div>
<div id="color-info">
@@ -46,9 +44,7 @@ HTML
-CSS
-
-/*
+/*
* COLOR PICKER TOOL
*/
@@ -1047,9 +1043,7 @@ CSS
-JavaScript Content
-
-'use strict';
+'use strict';
var UIColorPicker = (function UIColorPicker() {
diff --git a/files/en-us/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/en-us/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html
index 39e7727d5248769..72e2d5d99c459a7 100644
--- a/files/en-us/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html
+++ b/files/en-us/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html
@@ -14,8 +14,7 @@ Default placement
If you give the items no placement information they will position themselves on the grid, one in each grid cell.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -31,7 +30,7 @@ Default placement
color: #d9480f;
}
-
+
.wrapper {
display: grid;
@@ -62,8 +61,7 @@ Sizing rows in the implicit grid
You can however control the size of these rows with the property grid-auto-rows. To cause all created rows to be 100 pixels tall for example you would use:
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -79,7 +77,6 @@ Sizing rows in the implicit grid
color: #d9480f;
}
-
<div class="wrapper">
<div>One</div>
@@ -104,8 +101,7 @@ Sizing rows using minmax()
You can use {{cssxref("minmax()","minmax()")}} in your value for {{cssxref("grid-auto-rows")}} enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -121,7 +117,6 @@ Sizing rows using minmax()
color: #d9480f;
}
-
<div class="wrapper">
<div>One</div>
@@ -152,8 +147,7 @@ Sizing rows using a track listing
You can also pass in a track listing, this will repeat. The following track listing will create an initial implicit row track as 100 pixels and a second as 200px. This will continue for as long as content is added to the implicit grid.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -169,7 +163,6 @@ Sizing rows using a track listing
-
<div class="wrapper">
<div>One</div>
@@ -208,8 +201,7 @@ Auto-placement by column
}
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -225,7 +217,6 @@ Auto-placement by column
color: #d9480f;
}
-
<div class="wrapper">
<div>One</div>
@@ -253,8 +244,8 @@ Items with placement properties
The first thing grid will do is place any items that have a position. In the example below I have 12 grid items. Item 2 and item 5 have been placed using line based placement on the grid. You can see how those items are placed and the other items then auto-place in the spaces. The auto-placed items will place themselves before the placed items in DOM order, they don’t start after the position of a placed item that comes before them.
-
-* {box-sizing: border-box;}
+
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -270,7 +261,6 @@ Items with placement properties
color: #d9480f;
}
-
<div class="wrapper">
<div>One</div>
@@ -312,8 +302,8 @@ Deal with items that span tracks
You can see how this then leaves gaps in the grid, as for the auto-placed items if grid comes across an item that doesn’t fit into a track, it will move to the next row until it finds a space the item can fit in.
-
-* {box-sizing: border-box;}
+
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
@@ -328,7 +318,6 @@ Deal with items that span tracks
color: #d9480f;
}
-
<div class="wrapper">
<div>One</div>
@@ -377,8 +366,8 @@ Filling in the gaps
Having done this, grid will now backfill the gaps, as it moves through the grid it leaves gaps as before, but then if it finds an item that will fit in a previous gap it will pick it up and take it out of DOM order to place it in the gap. As with any other reordering in grid this does not change the logical order. Tab order for example, will still follow the document order. We will take a look at the potential accessibility issues of Grid Layout in a later guide, but you should take care when creating this disconnect between the visual order and display order.
-
-* {box-sizing: border-box;}
+
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
@@ -393,7 +382,6 @@ Filling in the gaps
color: #d9480f;
}
-
<div class="wrapper">
<div>One</div>
@@ -458,8 +446,7 @@ Use cases for auto-placement
Auto-placement can also help you lay out interface items which do have logical order. An example is the definition list in this next example. Definition lists are an interesting challenge to style as they are flat, there is nothing wrapping the groups of dt and dd items. In my example I am allowing auto-placement to place the items, however I have classes that start a dt in column 1, and dd in column 2, this ensure that terms go on one side and definitions on the other - no matter how many of each we have.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -467,7 +454,6 @@ Use cases for auto-placement
background-color: #fff4e6;
}
-
<div class="wrapper">
<dl>
diff --git a/files/en-us/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/en-us/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
index da6c58426176b8d..812ba36103a7a6c 100644
--- a/files/en-us/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
+++ b/files/en-us/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
@@ -59,8 +59,7 @@ The Grid container
}
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -76,7 +75,6 @@ The Grid container
color: #d9480f;
}
-
{{ EmbedLiveSample('The_Grid_container', '200', '330') }}
@@ -115,8 +113,8 @@ Basic example
}
-
-* {box-sizing: border-box;}
+
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -132,7 +130,6 @@ Basic example
color: #d9480f;
}
-
{{ EmbedLiveSample('basic_example', '610', '140') }}
@@ -155,8 +152,7 @@ The fr unit
}
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -173,7 +169,6 @@ The fr unit
}
-
{{ EmbedLiveSample('the_fr_unit', '220', '140') }}
@@ -196,8 +191,7 @@ Unequal fractions
}
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -214,7 +208,6 @@ Unequal fractions
}
-
{{ EmbedLiveSample('unequal_fractions', '220', '140') }}
@@ -237,8 +230,7 @@ Mixing fractions and absolute sizes
}
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -255,7 +247,6 @@ Mixing fractions and absolute sizes
}
-
{{ EmbedLiveSample('mixing_fractions_and_absolute_sizes', '220', '140') }}
@@ -319,8 +310,7 @@ The implicit and explicit grid
}
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -336,7 +326,6 @@ The implicit and explicit grid
color: #d9480f;
}
-
{{ EmbedLiveSample('The_implicit_and_explicit_grid', '230', '420') }}
@@ -353,8 +342,7 @@ Track sizing and minmax
}
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -370,7 +358,6 @@ Track sizing and minmax
color: #d9480f;
}
-
<div class="wrapper">
<div>One</div>
@@ -431,8 +418,7 @@ Positioning items against lines
}
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -448,7 +434,7 @@ Positioning items against lines
color: #d9480f;
}
-
+
{{ EmbedLiveSample('Positioning_items_against_lines', '230', '420') }}
@@ -493,8 +479,7 @@ Gutters
</div>
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
column-gap: 10px;
@@ -512,7 +497,6 @@ Gutters
color: #d9480f;
}
-
{{ EmbedLiveSample('Gutters') }}
@@ -538,8 +522,7 @@ Nesting without subgrid
}
-
- <div class="wrapper">
+<div class="wrapper">
<div class="box box1">
<div class="nested">a</div>
<div class="nested">b</div>
@@ -550,7 +533,7 @@ Nesting without subgrid
<div class="box box4">Four</div>
<div class="box box5">Five</div>
</div>
-
+
* {box-sizing: border-box;}
@@ -644,8 +627,7 @@ Overlapping without z-index
}
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -661,7 +643,6 @@ Overlapping without z-index
color: #d9480f;
}
-
{{ EmbedLiveSample('overlapping_without_z-index', '230', '460') }}
@@ -693,8 +674,7 @@ Controlling the order
}
-
-<div class="wrapper">
+<div class="wrapper">
<div class="box box1">One</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
@@ -703,7 +683,7 @@ Controlling the order
</div>
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -719,7 +699,6 @@ Controlling the order
color: #d9480f;
}
-
{{ EmbedLiveSample('Controlling_the_order', '230', '460') }}
diff --git a/files/en-us/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/en-us/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
index d402795ebd2b24d..ef5077678ebee7b 100644
--- a/files/en-us/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
+++ b/files/en-us/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
@@ -49,8 +49,7 @@ Using align-items
last baseline* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -66,7 +65,6 @@ Using align-items
color: #d9480f;
}
-
.wrapper {
display: grid;
@@ -112,8 +110,7 @@ Using align-self
In this next example, I am using the align-self property, to demonstrate the different alignment values. The first area, is showing the default behavior of align-self, which is to stretch. The second item, has an align-self value of start, the third end and the fourth center.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -129,7 +126,6 @@ Using align-self
color: #d9480f;
}
-
.wrapper {
display: grid;
@@ -195,8 +191,7 @@ Justifying Items on the Inline Axis
Once again the default is stretch, other than for items with an intrinsic aspect ratio. This means that by default, grid items will cover their grid area, unless you change that by setting alignment. The first item in the example demonstrates this default alignment:
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -212,7 +207,6 @@ Justifying Items on the Inline Axis
color: #d9480f;
}
-
.wrapper {
display: grid;
@@ -266,8 +260,7 @@ Center an item in the area
By combining the align and justify properties we can easily center an item inside a grid area.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -283,7 +276,6 @@ Center an item in the area
color: #d9480f;
}
-
.wrapper {
display: grid;
@@ -334,7 +326,6 @@ Default alignment
The default behavior in grid layout is start, which is why our grid tracks are in the top left corner of the grid, aligned against the start grid lines:
-
* {box-sizing: border-box;}
.wrapper {
@@ -393,8 +384,7 @@ Setting align-content: end
If I add align-content to my container, with a value of end, the tracks all move to the end line of the grid container in the block dimension:
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -410,7 +400,6 @@ Setting align-content: end
color: #d9480f;
}
-
.wrapper {
display: grid;
@@ -453,8 +442,7 @@ Setting align-content: space-betweenWe can also use values for this property that you may be familiar with from flexbox; the space distribution values of space-between, space-around and space-evenly. If we update {{cssxref("align-content")}} to space-between, you can see how the elements on our grid space out:
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -470,7 +458,6 @@ Setting align-content: space-between
-
.wrapper {
display: grid;
@@ -521,8 +508,7 @@ Justifying the grid track
Using the same example, I am setting {{cssxref("justify-content")}} to space-around. This once again causes tracks which span more than one column track to gain extra space:
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -538,7 +524,6 @@ Justifying the grid track
color: #d9480f;
}
-
.wrapper {
display: grid;
@@ -584,8 +569,7 @@ Alignment and auto margins
In this next example, I have given item 1 a left margin of auto. You can see how the content is now pushed over to the right side of the area, as the auto margin takes up remaining space, after room for the content of that item has been assigned:
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -601,7 +585,6 @@ Alignment and auto margins
color: #d9480f;
}
-
.wrapper {
display: grid;
diff --git a/files/en-us/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html b/files/en-us/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html
index 8035dfad0e2f08d..99a97548417f5ee 100644
--- a/files/en-us/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html
+++ b/files/en-us/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html
@@ -105,8 +105,7 @@ A more complex example
In this next example, I have a set of floated cards. I have given the cards a {{cssxref("width")}}, in order to {{cssxref("float")}} them. To create gaps between the cards, I use a {{cssxref("margin")}} on the items, and then a negative margin on the container:
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -123,7 +122,6 @@ A more complex example
color: #d9480f;
}
-
.wrapper ul {
overflow: hidden;
@@ -191,8 +189,7 @@ A solution using feature queries
I use an @supports rule to check for support of display: grid. I then do my grid code on the {{HTMLElement("ul")}}, set my width and {{cssxref("min-height")}} on the {{HTMLElement("li")}} to auto. I also remove the margins and negative margins, and replace the spacing with the {{cssxref("gap")}} property. This means I don’t get a final margin on the last row of boxes. The layout now works, even if there is more content in one of the cards, than the others:
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -209,7 +206,6 @@ A solution using feature queries
color: #d9480f;
}
-
.wrapper ul {
overflow: hidden;
@@ -270,8 +266,7 @@ Overwriting other values of d
Once again I can use feature queries to overwrite a layout that uses display: inline-block, and again I don’t need to overwrite everything. An item that is set to inline-block becomes a grid item, and so the behavior of inline-block no longer applies. I have used the {{cssxref("vertical-align")}} property on my item when in the inline-block display mode, but this property does not apply to grid items and, therefore, is ignored once the item becomes a grid item:
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -289,7 +284,6 @@ Overwriting other values of d
color: #d9480f;
}
-
.wrapper ul {
margin: 0 -10px;
diff --git a/files/en-us/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html b/files/en-us/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html
index 93908e618cf96c4..e78c064789d5763 100644
--- a/files/en-us/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html
+++ b/files/en-us/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html
@@ -41,8 +41,7 @@ Visual not logical re-ordering
In this example I have used grid to lay out a set of boxes that contain links. I have used the line-based placement properties to position box 1 on the second row of the grid. Visually it now appears as the fourth item in the list. However, if I tab from link to link the tab order still begins with box 1, as it comes first in the source.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -58,7 +57,6 @@ Visual not logical re-ordering
color: #d9480f;
}
-
.wrapper {
display: grid;
diff --git a/files/en-us/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/en-us/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
index cc7f95a9c31aaa7..e4803bb5c8aa79c 100644
--- a/files/en-us/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
+++ b/files/en-us/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
@@ -67,8 +67,7 @@ writing-mode
The value horizontal-tb is the default for text on the web. It is the direction in which you are reading this guide. The other properties will change the way that text flows in our document, matching the different writing modes found around the world. Again, for full details of these see Jen’s article. As a simple example, I have two paragraphs below. The first uses the default horizontal-tb, and the second uses vertical-rl. In the mode text still runs left to right, however the direction of the text is vertical - inline text now runs down the page, from top to bottom.
-
-.wrapper > p {
+.wrapper > p {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
@@ -78,7 +77,6 @@ writing-mode
max-width: 300px;
}
-
<div class="wrapper">
<p style="writing-mode: horizontal-tb">I have writing mode set to the default <code>horizontal-tb</code></p>
@@ -96,8 +94,7 @@ Default writing mode
The grid in this example has three columns and two row tracks. This means there are three tracks running down the block axis. In default writing mode, grid auto-places items starting at the top left, moving along to the right, filling up the three cells on the inline axis. It then moves onto the next line, creating a new Row track, and fills in more items:
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -113,7 +110,6 @@ Default writing mode
color: #d9480f;
}
-
.wrapper {
display: grid;
@@ -138,8 +134,7 @@ Setting writing mode
If we add writing-mode: vertical-lr to the grid container, we can see that the block and inline Axis are now running in a different direction. The block or column axis now runs across the page from left to right, Inline runs down the page, creating rows from top to bottom.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -155,7 +150,6 @@ Setting writing mode
color: #d9480f;
}
-
.wrapper {
writing-mode: vertical-lr;
@@ -185,8 +179,7 @@ Logical values for alignment
In this next example, I am using alignment to align items inside a grid that is set to writing-mode: vertical-lr. The start and end properties work in exactly the same way that they do in the default writing mode, and remain logical in a way that using left and right, top and bottom to align items would not do. This occurs once we've flipped the grid onto the side, like this:
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -202,7 +195,6 @@ Logical values for alignment
color: #d9480f;
}
-
.wrapper {
writing-mode: vertical-lr;
@@ -260,8 +252,7 @@ Line-based placement with
Item 3 starts at column line 1, spanning to column line 3.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -277,7 +268,6 @@ Line-based placement with
color: #d9480f;
}
-
.wrapper {
display: grid;
@@ -310,8 +300,7 @@ Line-based placement with
If I now add the {{cssxref("direction")}} property with a value of rtl to the grid container, line 1 becomes the right hand side of the grid, and line -1 on the left.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -327,7 +316,6 @@ Line-based placement with
color: #d9480f;
}
-
.wrapper {
direction: rtl;
diff --git a/files/en-us/web/css/css_grid_layout/grid_template_areas/index.html b/files/en-us/web/css/css_grid_layout/grid_template_areas/index.html
index 49c07b117424bdd..21eb83bf148a688 100644
--- a/files/en-us/web/css/css_grid_layout/grid_template_areas/index.html
+++ b/files/en-us/web/css/css_grid_layout/grid_template_areas/index.html
@@ -63,8 +63,7 @@ Naming a grid area
}
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -82,7 +81,6 @@ Naming a grid area
color: #d9480f;
}
-
<div class="wrapper">
<div class="header">Header</div>
@@ -113,8 +111,7 @@ Leaving a grid cell empty
}
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -132,7 +129,6 @@ Leaving a grid cell empty
color: #d9480f;
}
-
.wrapper {
display: grid;
@@ -176,8 +172,7 @@ Spanning multiple cells
}
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -195,7 +190,6 @@ Spanning multiple cells
color: #d9480f;
}
-
.wrapper {
display: grid;
@@ -208,14 +202,12 @@ Spanning multiple cells
}
-
-<div class="wrapper">
+<div class="wrapper">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
-
{{ EmbedLiveSample('Spanning_multiple_cells', '300', '330') }}
@@ -229,8 +221,7 @@ Redefining the grid using media
For our layout above, we might like to have a very simple layout at narrow widths, defining a single column grid and stacking up our items.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -248,7 +239,6 @@ Redefining the grid using media
color: #d9480f;
}
-
.header {
grid-area: hd;
@@ -295,14 +285,13 @@ Redefining the grid using media
}
-
-<div class="wrapper">
+
+<div class="wrapper">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
-
{{ EmbedLiveSample('Redefining_the_grid_using_media_queries', '550', '330') }}
diff --git a/files/en-us/web/css/css_grid_layout/index.html b/files/en-us/web/css/css_grid_layout/index.html
index c2f8f95cf47e226..04d974dc6fb6e98 100644
--- a/files/en-us/web/css/css_grid_layout/index.html
+++ b/files/en-us/web/css/css_grid_layout/index.html
@@ -20,8 +20,7 @@ Basic example
The example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. Items have been placed onto the grid using line-based placement.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
max-width: 940px;
margin: 0 auto;
@@ -34,7 +33,6 @@ Basic example
padding: 1em;
color: #d9480f;
}
-
HTML
diff --git a/files/en-us/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/en-us/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
index 70a7bf01264587b..dbb05d80c6652a5 100644
--- a/files/en-us/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
+++ b/files/en-us/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
@@ -14,8 +14,7 @@ Naming lines when defining a grid
You can assign some or all of the lines in your grid a name when you define your grid with the grid-template-rows and grid-template-columns properties. To demonstrate I’ll use the simple layout created in the guide on line-based placement. This time I’ll create the grid using named lines.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -31,7 +30,6 @@ Naming lines when defining a grid
-
When defining the grid, I name my lines inside square brackets. Those names can be anything you like. I have defined a name for the start and end of the container, both for rows and columns. Then defined the centre block of the grid as content-start and content-end again, both for columns and rows although you do not need to name all of the lines on your grid. You might choose to name just some key lines for your layout.
@@ -90,8 +88,7 @@ Implicit grid areas from named lin
While you can choose any name, if you append -start and -end to the lines around an area, as I have in the example above, grid will create you a named area of the main name used. Taking the above example, I have content-start and content-end both for rows and for columns. This means I get a grid area named content, and could place something in that area should I wish to.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -107,7 +104,6 @@ Implicit grid areas from named lin
color: #d9480f;
}
-
I’m using the same grid definitions as above, however this time I am going to place a single item into the named area content.
@@ -162,8 +158,7 @@ Implicit Grid lines from named are
To position overlay using these implicit named lines is the same as positioning an item using lines that we have named.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -179,7 +174,6 @@ Implicit Grid lines from named are
color: #d9480f;
}
-
.wrapper {
display: grid;
@@ -239,8 +233,7 @@ 12-column grid using repeat()
In this next example I am creating a grid with twelve equal width columns. Before defining the 1fr size of the column track I am also defining a line name of [col-start]. This means that we will end up with a grid that has 12 column lines all named col-start before a 1fr width column.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -256,7 +249,6 @@ 12-column grid using repeat()
color: #d9480f;
}
-
.wrapper {
display: grid;
@@ -315,8 +307,7 @@ Defining named lines with a trac
If you have used a track list then you can use the span keyword not just to span a number of lines but also to span a number of lines of a certain name.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -332,7 +323,6 @@ Defining named lines with a trac
color: #d9480f;
}
-
.wrapper {
display: grid;
@@ -372,8 +362,7 @@ 12-column grid framework
We can then use that framework to layout our page. For example, to create a three column layout with a header and footer, I might have the following markup.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -389,7 +378,6 @@ 12-column grid framework
color: #d9480f;
}
-
<div class="wrapper">
<header class="main-header">I am the header</header>
diff --git a/files/en-us/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/en-us/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
index 0bc60260b60b057..d9e9994c6ed42a4 100644
--- a/files/en-us/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
+++ b/files/en-us/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
@@ -18,8 +18,7 @@ A basic example
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -35,7 +34,6 @@ A basic example
color: #d9480f;
}
-
.wrapper {
display: grid;
@@ -70,8 +68,7 @@ Positioning items by line number
Addressing each item individually we can place all four items spanning row and column tracks. Note that we can leave cells empty if we wish. One of the very nice things about Grid Layout is this ability to have white space in our designs without having to push things around using margins to prevent floats from rising up into the space we have left.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -90,7 +87,6 @@ Positioning items by line number
color: #d9480f;
}
-
<div class="wrapper">
<div class="box1">One</div>
@@ -132,8 +128,7 @@ The grid-column an
We have quite a lot of code here to position each item. It should come as no surprise to know there is a {{glossary("shorthand properties", "shorthand")}}. The {{cssxref("grid-column-start")}} and {{cssxref("grid-column-end")}} properties can be combined into {{cssxref("grid-column")}}, {{cssxref("grid-row-start")}} and {{cssxref("grid-row-end")}} into {{cssxref("grid-row")}}.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -152,7 +147,6 @@ The grid-column an
color: #d9480f;
}
-
<div class="wrapper">
<div class="box1">One</div>
@@ -191,8 +185,7 @@ Default spans with longhand place
This means that our initial, long-hand, example would look like this:
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -211,7 +204,6 @@ Default spans with longhand place
color: #d9480f;
}
-
<div class="wrapper">
<div class="box1">One</div>
@@ -248,8 +240,7 @@ Default spans with shorthand pla
Our shorthand would look like the following code, with no forward slash and second value for the items spanning one track only.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -268,7 +259,6 @@ Default spans with shorthand pla
color: #d9480f;
}
-
<div class="wrapper">
<div class="box1">One</div>
@@ -309,8 +299,7 @@ The grid-area property
grid-column-end
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -329,7 +318,6 @@ The grid-area property
color: #d9480f;
}
-
<div class="wrapper">
<div class="box1">One</div>
@@ -374,8 +362,7 @@ Counting backwards
In this next example I have flipped the layout we were working with by working from the right and bottom of our grid when placing the items.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -394,7 +381,6 @@ Counting backwards
color: #d9480f;
}
-
<div class="wrapper">
<div class="box1">One</div>
@@ -453,8 +439,7 @@ Gutters or Alleys
Gaps only appear between tracks of the grid, they do not add space to the top and bottom, left or right of the container. We can add gaps to our earlier example by using these properties on the grid container.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -473,7 +458,6 @@ Gutters or Alleys
color: #d9480f;
}
-
<div class="wrapper">
<div class="box1">One</div>
@@ -528,8 +512,7 @@ Using the span keyword
In addition to specifying the start and end lines by number, you can specify a start line and then the number of tracks you would like the area to span.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -548,7 +531,6 @@ Using the span keyword
color: #d9480f;
}
-
<div class="wrapper">
<div class="box1">One</div>
diff --git a/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
index 904b3e1823de487..2ee819406b44eb1 100644
--- a/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
+++ b/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
@@ -20,8 +20,7 @@ My mark-up is a container with elements inside for a header, footer, main content, navigation, sidebar, and a block into which I am intending to place advertising.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
max-width: 1024px;
margin: 0 auto;
@@ -41,7 +40,6 @@
-
<div class="wrapper">
<header class="main-head">The header</header>
@@ -148,8 +146,7 @@ A flexible 12-column layout
If you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. We can create this type of system using CSS Grid Layout. As a simple example, I am creating a 12-column flexible grid that has 12 1fr-unit column tracks, they all have a start line named col-start. This means that we will have twelve grid lines named col-start.
-
-.wrapper {
+.wrapper {
max-width: 1024px;
margin: 0 auto;
font: 1.2em Helvetica, arial, sans-serif;
@@ -161,7 +158,6 @@ A flexible 12-column layout
padding: 10px;
}
-
.wrapper {
display: grid;
@@ -213,8 +209,7 @@ Building a layout using th
To see how this layout method works in practice, we can create the same layout that we created with {{cssxref("grid-template-areas")}}, this time using the 12-column grid system. I am starting with the same markup as used for the grid template areas example.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
max-width: 1024px;
margin: 0 auto;
@@ -234,7 +229,6 @@ Building a layout using th
padding: 0;
}
-
<div class="wrapper">
<header class="main-head">The header</header>
@@ -390,8 +384,7 @@ A product listing with auto-place
</ul>
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
img {max-width: 100%; display: block;}
body {
font: 1.2em Helvetica, arial, sans-serif;
@@ -409,7 +402,6 @@ A product listing with auto-place
padding: 20px;
}
-
We are going to create a grid with a flexible number of flexible columns. I want them never to become smaller than 200 pixels, and then to share any available remaining space equally – so we always get equal width column tracks. We achieve this with the minmax() function in our repeat notation for track sizing.
@@ -455,8 +447,7 @@ Preventing gaps with the dense k
I can cause a grid to backfill those gaps by setting {{cssxref("grid-auto-flow")}}: dense on the grid container. Take care when doing this however as it does take items away from their logical source order. You should only do this if your items do not have a set order – and be aware of the issues of the tab order following the source and not your reordered display.
-
-<ul class="listing">
+<ul class="listing">
<li>
<h2>Item One</h2>
<div class="body"><p>The content of this listing item goes here.</p></div>
@@ -488,7 +479,7 @@ Preventing gaps with the dense k
</ul>
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
img {max-width: 100%; display: block;}
body {
font: 1.2em Helvetica, arial, sans-serif;
@@ -522,7 +513,6 @@ Preventing gaps with the dense k
padding: 10px;
}
-
.listing {
list-style: none;
diff --git a/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout/index.html
index b4426abdbaaff10..c989c7cb28e5144 100644
--- a/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout/index.html
+++ b/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -22,8 +22,7 @@ One-dimensional versus tw
I have also set the {{cssxref("flex-wrap")}} property to wrap, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -39,7 +38,6 @@ One-dimensional versus tw
color: #d9480f;
}
-
<div class="wrapper">
<div>One</div>
@@ -70,8 +68,7 @@ The same layout with CSS grids
In this next example, I create the same layout using Grid. This time we have three 1fr column tracks. We do not need to set anything on the items themselves; they will lay themselves out one into each cell of the created grid. As you can see they stay in a strict grid, lining up in rows and columns. With five items, we get a gap on the end of row two.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -87,7 +84,6 @@ The same layout with CSS grids
color: #d9480f;
}
-
<div class="wrapper">
<div>One</div>
@@ -131,8 +127,7 @@ Box alignment
In the first example, which uses flexbox, I have a container with three items inside. The wrapper {{cssxref("min-height")}} is set, so it defines the height of the flex container. I have set {{cssxref("align-items")}} on the flex container to flex-end so the items will line up at the end of the flex container. I have also set the {{cssxref("align-self")}} property on box1 so it will override the default and stretch to the height of the container and on box2 so it aligns to the start of the flex container.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -148,7 +143,6 @@ Box alignment
color: #d9480f;
}
-
<div class="wrapper">
<div class="box1">One</div>
@@ -176,8 +170,7 @@ Alignment in CSS Grids
This second example uses a grid to create the same layout. This time we are using the box alignment properties as they apply to a grid layout. So we align to start and end rather than flex-start and flex-end. In the case of a grid layout, we are aligning the items inside their grid area. In this case that is a single grid cell, but it could be an area made up of several grid cells.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -193,7 +186,6 @@ Alignment in CSS Grids
color: #d9480f;
}
-
<div class="wrapper">
<div class="box1">One</div>
@@ -232,8 +224,7 @@ Auto-filling grid tracks
In this next example, I have used the auto-fill keyword in place of an integer in the repeat notation and set the track listing to 200 pixels. This means that grid will create as many 200 pixels column tracks as will fit in the container.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -249,7 +240,6 @@ Auto-filling grid tracks
color: #d9480f;
}
-
<div class="wrapper">
<div>One</div>
@@ -270,8 +260,7 @@ A flexible number of tracks
This isn’t quite the same as flexbox. In the flexbox example, the items are larger than the 200 pixel basis before wrapping. We can achieve the same in grid by combining auto-fit and the {{cssxref("minmax()", "minmax()")}} function. In this next example, I create auto filled tracks with minmax. I want my tracks to be a minimum of 200 pixels, so I set the maximum to be 1fr. Once the browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will treat the 1fr maximum as an instruction to share out the remaining space between the items.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -287,7 +276,6 @@ A flexible number of tracks
color: #d9480f;
}
-
<div class="wrapper">
<div>One</div>
@@ -316,8 +304,7 @@ A grid container as containing blo
In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has position: relative and so becomes the positioning context of this item.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -333,7 +320,6 @@ A grid container as containing blo
color: #d9480f;
}
-
<div class="wrapper">
<div class="box1">One</div>
@@ -383,8 +369,7 @@ With a grid area as the parent
I have given .box3 position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -400,7 +385,6 @@ With a grid area as the parent
color: #d9480f;
}
-
<div class="wrapper">
<div class="box1">One</div>
@@ -454,8 +438,7 @@ Grid layout with nested child el
In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don’t become part of the grid layout and so display using regular block layout.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -477,7 +460,6 @@ Grid layout with nested child el
padding: 1em;
}
-
<div class="wrapper">
<div class="box box1">
@@ -510,8 +492,7 @@ Using display_contents
If I now add display: contents to the rules for box1, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -533,7 +514,6 @@ Using display_contents
padding: 1em;
}
-
<div class="wrapper">
<div class="box box1">
diff --git a/files/en-us/web/css/css_images/using_css_gradients/index.html b/files/en-us/web/css/css_images/using_css_gradients/index.html
index 597564de6174731..3c97b36181649d3 100644
--- a/files/en-us/web/css/css_images/using_css_gradients/index.html
+++ b/files/en-us/web/css/css_images/using_css_gradients/index.html
@@ -27,14 +27,12 @@ A basic linear gradient
To create the most basic type of gradient, all you need is to specify two colors. These are called color stops. You must have at least two, but you can have as many as you want.
-
-<div class="simple-linear"></div>
+<div class="simple-linear"></div>
-div {
+div {
width: 120px;
height: 120px;
}
-
.simple-linear {
background: linear-gradient(blue, pink);
@@ -48,14 +46,13 @@ Changing the direction
By default, linear gradients run from top to bottom. You can change their rotation by specifying a direction.
-
-<div class="horizontal-gradient"></div>
-div {
+<div class="horizontal-gradient"></div>
+
+div {
width: 120px;
height: 120px;
}
-
.horizontal-gradient {
background: linear-gradient(to right, blue, pink);
@@ -70,14 +67,12 @@ Diagonal gradients
You can even make the gradient run diagonally, from corner to corner.
-
-<div class="diagonal-gradient"></div>
+<div class="diagonal-gradient"></div>
-div {
+div {
width: 200px;
height: 100px;
}
-
.diagonal-gradient {
background: linear-gradient(to bottom right, blue, pink);
@@ -92,14 +87,12 @@ Using angles
If you want more control over its direction, you can give the gradient a specific angle.
-
-<div class="angled-gradient"></div>
+<div class="angled-gradient"></div>
-div {
+div {
width: 120px;
height: 120px;
}
-
.angled-gradient {
background: linear-gradient(70deg, blue, pink);
@@ -122,15 +115,13 @@ Using more than two colors
You don't have to limit yourself to two colors—you may use as many as you like! By default, colors are evenly spaced along the gradient.
-
-<div class="auto-spaced-linear-gradient"></div>
+<div class="auto-spaced-linear-gradient"></div>
-div {
+div {
width: 120px;
height: 120px;
}
-
.auto-spaced-linear-gradient {
background: linear-gradient(red, yellow, blue, orange);
@@ -145,15 +136,13 @@ Positioning color stops
You don't have to leave your color stops at their default positions. To fine-tune their locations, you can give each one zero, one, or two percentage or, for radial and linear gradients, absolute length values. If you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want. If you leave a location unspecified, the position of that particular color stop will be automatically calculated for you, with the first color stop being at 0% and the last color stop being at 100%, and any other color stops being half way between their adjacent color stops.
-
-<div class="multicolor-linear"></div>
+<div class="multicolor-linear"></div>
-div {
+div {
width: 120px;
height: 120px;
}
-
.multicolor-linear {
background: linear-gradient(to left, lime 28px, red 77%, cyan);
@@ -168,15 +157,13 @@ Creating hard lines
To create a hard line between two colors, creating a stripe instead of a gradual transition, adjacent color stops can be set to the same location. In this example, the colors share a color stop at the 50% mark, halfway through the gradient:
-
-<div class="striped"></div>
+<div class="striped"></div>
-div {
+div {
width: 120px;
height: 120px;
}
-
.striped {
background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
@@ -190,15 +177,13 @@ Gradient hints
By default, the gradient transitions evenly from one color to the next. You can include a color-hint to move the midpoint of the transition value to a certain point along the gradient. In this example, we've moved the midpoint of the transition from the 50% mark to the 10% mark.
-
-<div class="color-hint"></div>
+<div class="color-hint"></div>
<div class="simple-linear"></div>
-div {
+div {
width: 120px;
height: 120px; float: left; margin-right: 10px;
}
-
.color-hint {
background: linear-gradient(blue, 10%, pink);
@@ -215,17 +200,15 @@ Creating color bands & stripes
To include a solid, non-transitioning color area within a gradient, include two positions for the color stop. Color stops can have two positions, which is equivalent to two consecutive color stops with the same color at different positions. The color will reach full saturation at the first color stop, maintain that saturation through to the second color stop, and transition to the adjacent color stop's color through the adjacent color stop's first position.
-
-<div class="multiposition-stops"></div>
+<div class="multiposition-stops"></div>
<div class="multiposition-stop2"></div>
-div {
+div {
width: 120px;
height: 120px;
float: left; margin-right: 10px; box-sizing: border-box;
}
-
.multiposition-stops {
background: linear-gradient(to left,
@@ -255,17 +238,15 @@ Controlling the progression o
By default, a gradient evenly progresses between the colors of two adjacent color stops, with the midpoint between those two color stops being the midpoint color value. You can control the interpolation, or progression, between two color stops by including a color hint location. In this example, the color reaches the midpoint between lime and cyan 20% of the way through the gradient rather than 50% of the way through. The second example does not contain the hint to highlight the difference the color hint can make:
-
-<div class="colorhint-gradient"></div> <div class="regular-progression"></div>
+<div class="colorhint-gradient"></div> <div class="regular-progression"></div>
-div {
+div {
width: 120px;
height: 120px;
float: left; margin-right: 10px; box-sizing: border-box;
}
-
.colorhint-gradient {
background: linear-gradient(to top, black, 20%, cyan);
@@ -282,15 +263,13 @@ Overlaying gradients
Gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects. The backgrounds are stacked from top to bottom, with the first specified being on top.
-
-<div class="layered-image"></div>
+<div class="layered-image"></div>
-div {
+div {
width: 300px;
height: 150px;
}
-
.layered-image {
background: linear-gradient(to right, transparent, mistyrose),
@@ -304,15 +283,13 @@ Stacked gradients
You can even stack gradients with other gradients. As long as the top gradients aren't entirely opaque, the gradients below will still be visible.
-
-<div class="stacked-linear"></div>
+<div class="stacked-linear"></div>
-div {
+div {
width: 200px;
height: 200px;
}
-
.stacked-linear {
background:
@@ -332,15 +309,13 @@ A basic radial gradient
As with linear gradients, all you need to create a radial gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of it's box:
-
-<div class="simple-radial"></div>
+<div class="simple-radial"></div>
-div {
+div {
width: 240px;
height: 120px;
}
-
.simple-radial {
background: radial-gradient(red, blue);
@@ -353,15 +328,13 @@ Positioning radial color stops
Again like linear gradients, you can position each radial color stop with a percentage or absolute length.
-
-<div class="radial-gradient"></div>
+<div class="radial-gradient"></div>
-div {
+div {
width: 120px;
height: 120px;
}
-
.radial-gradient {
background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
@@ -374,15 +347,13 @@ Positioning the center of the gr
You can position the center of the gradient with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top.
-
-<div class="radial-gradient"></div>
+<div class="radial-gradient"></div>
-div {
+div {
width: 120px;
height: 240px;
}
-
.radial-gradient {
background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
@@ -399,15 +370,13 @@ Example: closest-side for ellipsesThis example uses the closest-side size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.
-
-<div class="radial-ellipse-side"></div>
+<div class="radial-ellipse-side"></div>
-div {
+div {
width: 240px;
height: 100px;
}
-
.radial-ellipse-side {
background: radial-gradient(ellipse closest-side,
@@ -421,15 +390,13 @@ Example: farthest-corner for ellip
This example is similar to the previous one, except that its size is specified as farthest-corner, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.
-
-<div class="radial-ellipse-far"></div>
+<div class="radial-ellipse-far"></div>
-div {
+div {
width: 240px;
height: 100px;
}
-
.radial-ellipse-far {
background: radial-gradient(ellipse farthest-corner at 90% 90%,
@@ -443,15 +410,13 @@ Example: closest-side for circles
This example uses closest-side, which makes the circle's size to be the distance between the starting point (the center) and the closest side. The circle's radius is the distance between the center of the gradient and the closest edge, which due to the positioning of the 25% from the top and 25% from the bottom, is closest to the bottom, since the height in this case is narrower than the width.
-
-<div class="radial-circle-close"></div>
+<div class="radial-circle-close"></div>
-div {
+div {
width: 240px;
height: 120px;
}
-
.radial-circle-close {
background: radial-gradient(circle closest-side at 25% 75%,
@@ -465,15 +430,13 @@ Example: length or percentage
For ellipses only, you can size the ellipse using a length or percentage. The first value represents the horizontal radius, the second the vertical radius, where you use a percentage this corresponds to the size of the box in that dimension. In the below example I have used a percentage for the horizontal radius.
-
-<div class="radial-ellipse-size"></div>
+<div class="radial-ellipse-size"></div>
-div {
+div {
width: 240px;
height: 120px;
}
-
.radial-ellipse-size {
background: radial-gradient(ellipse 50% 50px,
@@ -487,15 +450,13 @@ Example: length for circles
For circles the size may be given as a <length>, which is the size of the circle.
-
-<div class="radial-circle-size"></div>
+<div class="radial-circle-size"></div>
-div {
+div {
width: 240px;
height: 120px;
}
-
.radial-circle-size {
background: radial-gradient(circle 50px,
@@ -509,15 +470,13 @@ Stacked radial gradients
Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.
-
-<div class="stacked-radial"></div>
+<div class="stacked-radial"></div>
-div {
+div {
width: 200px;
height: 200px;
}
-
.stacked-radial {
background:
@@ -549,15 +508,13 @@ A basic conic gradient
As with linear and radial gradients, all you need to create a conic gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, with the start of the gradient facing up:
-
-<div class="simple-conic"></div>
+<div class="simple-conic"></div>
-div {
+div {
width: 120px;
height: 120px;
}
-
.simple-conic {
background: conic-gradient(red, blue);
@@ -572,15 +529,13 @@ Positioning the conic center
Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"
-
-<div class="conic-gradient"></div>
+<div class="conic-gradient"></div>
-div {
+div {
width: 120px;
height: 120px;
}
-
.conic-gradient {
background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
@@ -595,15 +550,13 @@ Changing the angle
By default, the different color stops you specify are spaced equidistantly around the circle. You can position the starting angle of the conic gradient using the "from" keyword at the beginning followed by an angle or a length, and you can specify different positions for the colors stops by including an angle or length after them.
-
-<div class="conic-gradient"></div>
+<div class="conic-gradient"></div>
-div {
+div {
width: 120px;
height: 120px;
}
-
.conic-gradient {
background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green);
@@ -624,15 +577,13 @@ Repeating linear gradients
This example uses {{cssxref("repeating-linear-gradient()")}} to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the gradient line is 10px long.
-
-<div class="repeating-linear"></div>
+<div class="repeating-linear"></div>
-div {
+div {
width: 120px;
height: 120px;
}
-
.repeating-linear {
background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
@@ -649,15 +600,13 @@ Multiple repeating linear gradients
In this case the gradient lines are 300px, 230px, and 300px long.
-
-<div class="multi-repeating-linear"></div>
+<div class="multi-repeating-linear"></div>
-div {
+div {
width: 600px;
height: 400px;
}
-
.multi-repeating-linear {
background:
@@ -684,14 +633,12 @@ Plaid gradient
To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:
-
-<div class="plaid-gradient"></div>
+<div class="plaid-gradient"></div>
-div {
+div {
width: 200px;
height: 200px;
}
-
.plaid-gradient {
background:
@@ -738,15 +685,13 @@ Repeating radial gradients
This example uses {{cssxref("repeating-radial-gradient()")}} to create a gradient that radiates repeatedly from a central point. The colors get cycled over and over as the gradient repeats.
-
-<div class="repeating-radial"></div>
+<div class="repeating-radial"></div>
-div {
+div {
width: 120px;
height: 120px;
}
-
.repeating-radial {
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
@@ -757,15 +702,13 @@ Repeating radial gradients
Multiple repeating radial gradients
-
-<div class="multi-target"></div>
+<div class="multi-target"></div>
-div {
+div {
width: 250px;
height: 150px;
}
-
.multi-target {
background:
diff --git a/files/en-us/web/css/css_transitions/using_css_transitions/index.html b/files/en-us/web/css/css_transitions/using_css_transitions/index.html
index 8fa186d99553511..2d546a167c9b965 100644
--- a/files/en-us/web/css/css_transitions/using_css_transitions/index.html
+++ b/files/en-us/web/css/css_transitions/using_css_transitions/index.html
@@ -74,14 +74,10 @@ Simple example
Multiple animated properties example
-
-HTML Content
-
-<body>
+<body>
<p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.</p>
<div class="box">Sample</div>
</body>
-
CSS Content
diff --git a/files/en-us/web/css/flex/index.html b/files/en-us/web/css/flex/index.html
index 64d90f553573bd6..66e633cfe8da53a 100644
--- a/files/en-us/web/css/flex/index.html
+++ b/files/en-us/web/css/flex/index.html
@@ -232,15 +232,14 @@ CSS
}
-
-var flex = document.getElementById("flex");
+var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function() {
raw.style.display = raw.style.display == "none" ? "block" : "none";
});
-#flex-container {
+#flex-container {
width: 100%;
font-family: Consolas, Arial, sans-serif;
}
@@ -254,7 +253,6 @@ CSS
border: 1px solid #000;
}
-
Result
diff --git a/files/en-us/web/css/font-family/index.html b/files/en-us/web/css/font-family/index.html
index 629dfce8542ad46..374eaf3b2b64b1e 100644
--- a/files/en-us/web/css/font-family/index.html
+++ b/files/en-us/web/css/font-family/index.html
@@ -199,8 +199,7 @@ Some common font families
}
-
-<div class="serif">
+<div class="serif">
This is an example of a serif font.
</div>
@@ -231,7 +230,6 @@ Some common font families
<div class="fangsong">
This is an example of a fangsong font.
</div>
-
{{EmbedLiveSample("Some_common_font_families", 600, 220)}}
diff --git a/files/en-us/web/css/font-style/index.html b/files/en-us/web/css/font-style/index.html
index 4fb83402541dd9c..7da07e821ea1d7c 100644
--- a/files/en-us/web/css/font-style/index.html
+++ b/files/en-us/web/css/font-style/index.html
@@ -100,8 +100,7 @@ CSS
-
-html, body {
+html, body {
max-height: 100vh;
max-width: 100vw;
overflow: hidden;
@@ -125,7 +124,6 @@ CSS
margin-bottom: 0;
}
-
JavaScript
@@ -165,12 +163,10 @@ Examples
Font styles
-
-<p class="normal">This paragraph is normal.</p>
+<p class="normal">This paragraph is normal.</p>
<p class="italic">This paragraph is italic.</p>
<p class="oblique">This paragraph is oblique.</p>
-
.normal {
font-style: normal;
diff --git a/files/en-us/web/css/font-weight/index.html b/files/en-us/web/css/font-weight/index.html
index 027d2a93c22a017..e7196d07833f9b7 100644
--- a/files/en-us/web/css/font-weight/index.html
+++ b/files/en-us/web/css/font-weight/index.html
@@ -251,8 +251,7 @@ CSS
}
-
-html, body {
+html, body {
max-height: 100vh;
max-width: 100vw;
overflow: hidden;
@@ -276,7 +275,6 @@ CSS
margin-bottom: 0;
}
-
JavaScript
diff --git a/files/en-us/web/css/font/index.html b/files/en-us/web/css/font/index.html
index 5eb06d92777e5d3..57dfe11f0f986ef 100644
--- a/files/en-us/web/css/font/index.html
+++ b/files/en-us/web/css/font/index.html
@@ -134,10 +134,7 @@ Setting font properties
Live sample
-
-HTML
-
-<p>
+<p>
Change the radio buttons below to see the generated shorthand and its effect.
</p>
<form action="createShortHand()">
@@ -231,9 +228,7 @@ HTML
<br/><br/><br/><br/><br/><br/>
-CSS
-
-body, input {
+body, input {
font: 14px arial;
overflow: hidden;
}
@@ -284,9 +279,7 @@ CSS
display: inline-block;
}
-JavaScript
-
-var textAreas = document.getElementsByClassName("curCss"),
+var textAreas = document.getElementsByClassName("curCss"),
shortText = "",
getCheckedValue,
setCss,
diff --git a/files/en-us/web/css/gradient/conic-gradient()/index.html b/files/en-us/web/css/gradient/conic-gradient()/index.html
index 8da8fd7cfb32158..931be5599723615 100644
--- a/files/en-us/web/css/gradient/conic-gradient()/index.html
+++ b/files/en-us/web/css/gradient/conic-gradient()/index.html
@@ -126,15 +126,13 @@ Examples
Gradient at 40-degrees
-
-div {
+div {
width: 100px;
height: 100px;
}
-<div></div>
+<div></div>
-
div {
background-image:
@@ -146,15 +144,13 @@ Gradient at 40-degrees
Off-centered gradient
-
-div {
+div {
width: 100px;
height: 100px;
}
-<div></div>
+<div></div>
-
div {
background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
@@ -166,15 +162,13 @@ Gradient pie-chart
This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.
-
-div {
+div {
width: 100px;
height: 100px;
}
-<div></div>
+<div></div>
-
div {
background: conic-gradient(
@@ -186,15 +180,13 @@ Gradient pie-chart
Checkerboard
-
-div {
+div {
width: 100px;
height: 100px;
}
-<div></div>
+<div></div>
-
div {
background:
diff --git a/files/en-us/web/css/gradient/index.html b/files/en-us/web/css/gradient/index.html
index 2950695bc65a46e..e64b372bf18e823 100644
--- a/files/en-us/web/css/gradient/index.html
+++ b/files/en-us/web/css/gradient/index.html
@@ -58,15 +58,13 @@ Linear gradient example
A simple linear gradient.
-
-<div class="linear-gradient">Linear gradient</div>
+<div class="linear-gradient">Linear gradient</div>
-div {
+div {
width: 240px;
height: 80px;
}
-
.linear-gradient {
background: linear-gradient(to right,
@@ -79,15 +77,13 @@ Radial gradient example
A simple radial gradient.
-
-<div class="radial-gradient">Radial gradient</div>
+<div class="radial-gradient">Radial gradient</div>
-div {
+div {
width: 240px;
height: 80px;
}
-
.radial-gradient {
background: radial-gradient(red, yellow, rgb(30, 144, 255));
@@ -100,17 +96,15 @@ Repeating gradient examples
Simple repeating linear and radial gradient examples.
-
-<div class="linear-repeat">Repeating linear gradient</div>
+<div class="linear-repeat">Repeating linear gradient</div>
<br>
<div class="radial-repeat">Repeating radial gradient</div>
-div {
+div {
width: 240px;
height: 80px;
}
-
.linear-repeat {
background: repeating-linear-gradient(to top left,
@@ -127,15 +121,13 @@ Conic gradient example
A simple conic gradient example. Note that this isn't supported widely across browser as of yet.
-
-<div class="conic-gradient">Conic gradient</div>
+<div class="conic-gradient">Conic gradient</div>
-div {
+div {
width: 200px;
height: 200px;
}
-
.conic-gradient {
background: conic-gradient(lightpink, white, powderblue);
diff --git a/files/en-us/web/css/gradient/linear-gradient()/index.html b/files/en-us/web/css/gradient/linear-gradient()/index.html
index 2292da4fe2e1e8e..0ff110f354bdb69 100644
--- a/files/en-us/web/css/gradient/linear-gradient()/index.html
+++ b/files/en-us/web/css/gradient/linear-gradient()/index.html
@@ -116,12 +116,10 @@ Examples
Gradient at a 45-degree angle
-
-body {
+body {
width: 100vw;
height: 100vh;
}
-
body {
background: linear-gradient(45deg, red, blue);
@@ -132,12 +130,10 @@ Gradient at a 45-degree angle
Gradient that starts at 60% of the gradient line
-
-body {
+body {
width: 100vw;
height: 100vh;
}
-
body {
background: linear-gradient(135deg, orange 60%, cyan);
@@ -149,12 +145,11 @@ Gradient with multi-position c
This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.
-
-body {
+body {
width: 100vw;
height: 100vh;
}
-
+
body {
background: linear-gradient(to right,
diff --git a/files/en-us/web/css/gradient/radial-gradient()/index.html b/files/en-us/web/css/gradient/radial-gradient()/index.html
index 938e648db7a52cd..b176731fb58130f 100644
--- a/files/en-us/web/css/gradient/radial-gradient()/index.html
+++ b/files/en-us/web/css/gradient/radial-gradient()/index.html
@@ -96,15 +96,13 @@ Examples
Simple gradient
-
-<div class="radial-gradient"></div>
+<div class="radial-gradient"></div>
-.radial-gradient {
+.radial-gradient {
width: 240px;
height: 120px;
}
-
.radial-gradient {
background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
@@ -114,15 +112,13 @@ Simple gradient
Non-centered gradient
-
-<div class="radial-gradient"></div>
+<div class="radial-gradient"></div>
-.radial-gradient {
+.radial-gradient {
width: 240px;
height: 120px;
}
-
.radial-gradient {
background-image: radial-gradient(farthest-corner at 40px 40px,
diff --git a/files/en-us/web/css/gradient/repeating-conic-gradient()/index.html b/files/en-us/web/css/gradient/repeating-conic-gradient()/index.html
index 9d0a67ec38561d2..9b40116a198321f 100644
--- a/files/en-us/web/css/gradient/repeating-conic-gradient()/index.html
+++ b/files/en-us/web/css/gradient/repeating-conic-gradient()/index.html
@@ -113,15 +113,13 @@ Examples
Black and white starburst
-
-div {
+div {
width: 200px;
height: 200px;
}
-<div></div>
+<div></div>
-
div {
background-image:
@@ -135,15 +133,13 @@ Off-centered gradient
This gradient repeats 18 times, but since we only see the right half, we only see 9 repeats.
-
-div {
+div {
width: 200px;
height: 200px;
}
-<div></div>
+<div></div>
-
div {
background: repeating-conic-gradient(
diff --git a/files/en-us/web/css/gradient/repeating-linear-gradient()/index.html b/files/en-us/web/css/gradient/repeating-linear-gradient()/index.html
index dd62cfc0a304496..1566d9a249bd0fd 100644
--- a/files/en-us/web/css/gradient/repeating-linear-gradient()/index.html
+++ b/files/en-us/web/css/gradient/repeating-linear-gradient()/index.html
@@ -83,12 +83,10 @@ Examples
Zebra stripes
-
-body {
+body {
width: 100vw;
height: 100vh;
}
-
body {
background-image: repeating-linear-gradient(-45deg,
@@ -107,12 +105,10 @@ Zebra stripes
Ten repeating horizontal bars
-
-body {
+body {
width: 100vw;
height: 100vh;
}
-
body {
background-image: repeating-linear-gradient(to bottom,
diff --git a/files/en-us/web/css/gradient/repeating-radial-gradient()/index.html b/files/en-us/web/css/gradient/repeating-radial-gradient()/index.html
index 654879541fa79ef..8e5d9ae5a4839eb 100644
--- a/files/en-us/web/css/gradient/repeating-radial-gradient()/index.html
+++ b/files/en-us/web/css/gradient/repeating-radial-gradient()/index.html
@@ -103,15 +103,13 @@ Examples
Black and white gradient
-
-<div class="radial-gradient"></div>
+<div class="radial-gradient"></div>
-.radial-gradient {
+.radial-gradient {
width: 120px;
height: 120px;
}
-
.radial-gradient {
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
@@ -122,15 +120,13 @@ Black and white gradient
Farthest-corner
-
-<div class="radial-gradient"></div>
+<div class="radial-gradient"></div>
-.radial-gradient {
+.radial-gradient {
width: 240px;
height: 120px;
}
-
.radial-gradient {
background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%,
diff --git a/files/en-us/web/css/grid-column-end/index.html b/files/en-us/web/css/grid-column-end/index.html
index 4cc6af21cbfaffa..ff81d496daf1825 100644
--- a/files/en-us/web/css/grid-column-end/index.html
+++ b/files/en-us/web/css/grid-column-end/index.html
@@ -113,8 +113,7 @@ CSS
}
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -137,7 +136,6 @@ CSS
padding: 1em;
}
-
Result
diff --git a/files/en-us/web/css/grid-column-start/index.html b/files/en-us/web/css/grid-column-start/index.html
index 59696238871b515..2e23cd69f63466f 100644
--- a/files/en-us/web/css/grid-column-start/index.html
+++ b/files/en-us/web/css/grid-column-start/index.html
@@ -123,8 +123,7 @@ CSS
}
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -147,7 +146,6 @@ CSS
padding: 1em;
}
-
Result
diff --git a/files/en-us/web/css/grid-row-end/index.html b/files/en-us/web/css/grid-row-end/index.html
index 7e8e89dc249a49d..cb94501c938bcc5 100644
--- a/files/en-us/web/css/grid-row-end/index.html
+++ b/files/en-us/web/css/grid-row-end/index.html
@@ -112,8 +112,7 @@ CSS
}
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -136,7 +135,6 @@ CSS
padding: 1em;
}
-
Result
diff --git a/files/en-us/web/css/grid-row-start/index.html b/files/en-us/web/css/grid-row-start/index.html
index 941edcbcb468166..8ccfc4edf2dd4bd 100644
--- a/files/en-us/web/css/grid-row-start/index.html
+++ b/files/en-us/web/css/grid-row-start/index.html
@@ -121,8 +121,7 @@ CSS
}
-
-* {box-sizing: border-box;}
+* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -145,7 +144,6 @@ CSS
padding: 1em;
}
-
Result
diff --git a/files/en-us/web/css/image-orientation/index.html b/files/en-us/web/css/image-orientation/index.html
index 10de20d5828d3d6..0d33eac924b83b7 100644
--- a/files/en-us/web/css/image-orientation/index.html
+++ b/files/en-us/web/css/image-orientation/index.html
@@ -78,10 +78,7 @@ CSS
}
-
-HTML
-
-<img id="image" src="mdn.svg"
+<img id="image" src="mdn.svg"
alt="Orientation taken from the image">
<select id="imageOrientation">
<option value="from-image">from-image</option>
@@ -89,14 +86,11 @@ HTML
</select>
-JavaScript
-
-var imageOrientation = document.getElementById("imageOrientation");
+var imageOrientation = document.getElementById("imageOrientation");
imageOrientation.addEventListener("change", function (evt) {
document.getElementById("image").style.imageOrientation = evt.target.value;
});
-
Result
diff --git a/files/en-us/web/css/image-rendering/index.html b/files/en-us/web/css/image-rendering/index.html
index 6c38ccf80aac532..ddfe4b7c3bfb1fc 100644
--- a/files/en-us/web/css/image-rendering/index.html
+++ b/files/en-us/web/css/image-rendering/index.html
@@ -64,21 +64,17 @@ Setting image scaling algorithms
In practical use, the pixelated and crisp-edges rules can be combined to provide some fallback for each other. (Just prepend the actual rules with the fallback.) The Canvas API can provide a fallback solution for pixelated through manual image data manipulation or with imageSmoothingEnabled.
-
-<div>
+<div>
<img class="auto" alt="auto" src="blumen.jpg" />
<img class="pixelated" alt="pixelated" src="blumen.jpg" />
<img class="crisp-edges" alt="crisp-edges" src="blumen.jpg" />
</div>
-
-
-img {
+img {
height: 200px;
}
-
CSS
diff --git a/files/en-us/web/css/image/image()/index.html b/files/en-us/web/css/image/image()/index.html
index 5c32e11641cb0f5..432fa8235259fb3 100644
--- a/files/en-us/web/css/image/image()/index.html
+++ b/files/en-us/web/css/image/image()/index.html
@@ -106,9 +106,7 @@ Displaying a section of th
Putting color on top of a background image
-
-.quarterlogo {height: 200px; width: 200px; border: 1px solid;}
-
+.quarterlogo {height: 200px; width: 200px; border: 1px solid;}
.quarterlogo {
background-image:
diff --git a/files/en-us/web/css/justify-content/index.html b/files/en-us/web/css/justify-content/index.html
index 1cfaf27e17ba1a9..25cba2abfff7d52 100644
--- a/files/en-us/web/css/justify-content/index.html
+++ b/files/en-us/web/css/justify-content/index.html
@@ -132,10 +132,7 @@ CSS
}
-
-HTML
-
-<div id="container">
+<div id="container">
<div></div>
<div></div>
<div></div>
@@ -157,15 +154,12 @@ HTML
<option value="stretch">stretch</option>
</select>
-JavaScript
-
-var justifyContent = document.getElementById("justifyContent");
+var justifyContent = document.getElementById("justifyContent");
justifyContent.addEventListener("change", function (evt) {
document.getElementById("container").style.justifyContent =
evt.target.value;
});
-
Result
diff --git a/files/en-us/web/css/mix-blend-mode/index.html b/files/en-us/web/css/mix-blend-mode/index.html
index 251706954b000c4..444785604e6f307 100644
--- a/files/en-us/web/css/mix-blend-mode/index.html
+++ b/files/en-us/web/css/mix-blend-mode/index.html
@@ -62,8 +62,8 @@ Examples
Effect of different mix-blend-mode values
-
-<div class="grid">
+
+<div class="grid">
<div class="col">
<div class="note">Blending in isolation (no blending with the background)</div>
<div class="row isolate">
@@ -473,7 +473,7 @@ Effect of different mix-blend
</div>
</div>
-html,body {
+html,body {
height: 100%;
box-sizing: border-box;
background: #EEE;
diff --git a/files/en-us/web/css/place-content/index.html b/files/en-us/web/css/place-content/index.html
index 3525809c4114fca..30fd72e45da6207 100644
--- a/files/en-us/web/css/place-content/index.html
+++ b/files/en-us/web/css/place-content/index.html
@@ -118,8 +118,7 @@ HTML
</div>
-
-<code>writing-mode:</code><select id="writingMode">
+<code>writing-mode:</code><select id="writingMode">
<option value="horizontal-tb" selected>horizontal-tb</option>
<option value="vertical-rl">vertical-rl</option>
<option value="vertical-lr">vertical-lr</option>
@@ -165,7 +164,7 @@ HTML
</select><code>;</code>
-var update = function () {
+var update = function () {
document.getElementById("container").style.placeContent = document.getElementById("alignContentAlignment").value + " " + document.getElementById("justifyContentAlignment").value;
}
@@ -184,7 +183,6 @@ HTML
document.getElementById("container").style.direction = evt.target.value;
});
-
CSS
diff --git a/files/en-us/web/css/place-items/index.html b/files/en-us/web/css/place-items/index.html
index 9d451b3d4cd41fa..bce0cd17be99349 100644
--- a/files/en-us/web/css/place-items/index.html
+++ b/files/en-us/web/css/place-items/index.html
@@ -111,8 +111,7 @@ Examples
Placing items in a flex container
-
-div > div {
+div > div {
box-sizing: border-box;
border: 2px solid #8c8c8c;
width: 50px;
@@ -160,9 +159,7 @@ Placing items in a flex container
-HTML
-
-<div id="container" class="flex">
+<div id="container" class="flex">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
@@ -206,9 +203,7 @@ HTML
</div>
-JavaScript
-
-var values = document.getElementById('values');
+var values = document.getElementById('values');
var display = document.getElementById('display');
var container = document.getElementById('container');
@@ -220,7 +215,6 @@ JavaScript
container.className = evt.target.value;
});
-
CSS
diff --git a/files/en-us/web/css/rotate/index.html b/files/en-us/web/css/rotate/index.html
index bf53f228cae744f..ef32d30b71eddb8 100644
--- a/files/en-us/web/css/rotate/index.html
+++ b/files/en-us/web/css/rotate/index.html
@@ -73,8 +73,7 @@ HTML
CSS
-
-* {
+* {
box-sizing: border-box;
}
@@ -96,7 +95,6 @@ CSS
text-align: center;
}
-
.rotate {
transition: rotate 1s;
diff --git a/files/en-us/web/css/specificity/index.html b/files/en-us/web/css/specificity/index.html
index 577e45416dd7c0c..b8edf2b7fd4401f 100644
--- a/files/en-us/web/css/specificity/index.html
+++ b/files/en-us/web/css/specificity/index.html
@@ -186,8 +186,7 @@ The :where() exception {{Experimental_Inline}}
}
-
-#no-where-support {
+#no-where-support {
margin: 0.5em;
border: 1px solid red;
}
@@ -196,16 +195,13 @@ The :where() exception {{Experimental_Inline}}
display: none !important;
}
-
... when used with the following HTML ...
-
-<div id="no-where-support">
+<div id="no-where-support">
⚠️ Your browser doesn't support the <code><a href="https://developer.mozilla.org/docs/Web/CSS/:where" target="_top">:where()</a></code> pseudo-class.
</div>
-
<div class="outer">
<p>This is in the outer div.</p>
diff --git a/files/en-us/web/css/text-align-last/index.html b/files/en-us/web/css/text-align-last/index.html
index a8b98d53e101c71..f457e9930864a7a 100644
--- a/files/en-us/web/css/text-align-last/index.html
+++ b/files/en-us/web/css/text-align-last/index.html
@@ -65,10 +65,8 @@ Examples
Justifying the last line
-
-<p>Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.</p>
+<p>Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.</p>
-
CSS
diff --git a/files/en-us/web/css/text-justify/index.html b/files/en-us/web/css/text-justify/index.html
index 149c5c61763c329..a2f963a028fe57e 100644
--- a/files/en-us/web/css/text-justify/index.html
+++ b/files/en-us/web/css/text-justify/index.html
@@ -55,13 +55,11 @@ Examples
Demonstration of the different values of text-justify
-
-<p class="none"><code>text-justify: none</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
+<p class="none"><code>text-justify: none</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="auto"><code>text-justify: auto</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="dist"><code>text-justify: distribute</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="word"><code>text-justify: inter-word</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="char"><code>text-justify: inter-character</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
-
p {
font-size: 1.5em;
diff --git a/files/en-us/web/css/tools/linear-gradient_generator/index.html b/files/en-us/web/css/tools/linear-gradient_generator/index.html
index 268ab2c38ecb7e0..544c158e8e92c74 100644
--- a/files/en-us/web/css/tools/linear-gradient_generator/index.html
+++ b/files/en-us/web/css/tools/linear-gradient_generator/index.html
@@ -6,12 +6,10 @@
- Guide
- Tools
---
-
-linear-gradient generator
-HTML Content
+linear-gradient generator
- <div id="container">
+ <div id="container">
<div id="gradient-container" data-alpha="true">
</div>
@@ -64,9 +62,7 @@ HTML Content
</div>
</div>
-CSS Content
-
-/*
+/*
* COLOR PICKER TOOL
*/
@@ -1056,9 +1052,7 @@ CSS Content
-JavaScript Content
-
-var UIColorPicker = (function UIColorPicker() {
+var UIColorPicker = (function UIColorPicker() {
'use strict';
function getElemById(id) {
diff --git a/files/en-us/web/css/transition-timing-function/index.html b/files/en-us/web/css/transition-timing-function/index.html
index 7aa524617142997..92bfa8891fec742 100644
--- a/files/en-us/web/css/transition-timing-function/index.html
+++ b/files/en-us/web/css/transition-timing-function/index.html
@@ -116,8 +116,7 @@ Examples
Cubic-Bezier examples
-
-<div class="parent">
+<div class="parent">
<div class="ease">ease</div>
<div class="easein">ease-in</div>
<div class="easeout">ease-out</div>
@@ -126,7 +125,7 @@ Cubic-Bezier examples
<div class="cb">cubic-bezier(0.2,-2,0.8,2)</div>
</div>
-.parent {}
+.parent {}
.parent > div[class] {
width: 12em;
min-width: 12em;
@@ -148,7 +147,7 @@ Cubic-Bezier examples
}
-function updateTransition() {
+function updateTransition() {
var els = document.querySelectorAll(".parent > div[class]");
for(var c = els.length, i = 0; i < c; i++) {
els[i].classList.toggle("box1");
@@ -157,7 +156,6 @@ Cubic-Bezier examples
var intervalID = window.setInterval(updateTransition, 10000);
-
.ease {
transition-timing-function: ease;
@@ -182,8 +180,8 @@ Cubic-Bezier examples
Step examples
-
-<div class="parent">
+
+<div class="parent">
<div class="jump-start">jump-start</div>
<div class="jump-end">jump-end</div>
<div class="jump-both">jump-both</div>
@@ -192,7 +190,7 @@ Step examples
<div class="step-end">step-end</div>
</div>
-.parent {}
+.parent {}
.parent > div[class] {
width: 12em;
min-width: 12em;
@@ -214,7 +212,7 @@ Step examples
}
-function updateTransition() {
+function updateTransition() {
var els = document.querySelectorAll(".parent > div[class]");
for(var c = els.length, i = 0; i < c; i++) {
els[i].classList.toggle("box1");
@@ -223,7 +221,6 @@ Step examples
var intervalID = window.setInterval(updateTransition, 10000);
-
.jump-start {
transition-timing-function: steps(5, jump-start);
diff --git a/files/en-us/web/css/url()/index.html b/files/en-us/web/css/url()/index.html
index dc6623ae4c4c560..4b3fa4118295acc 100644
--- a/files/en-us/web/css/url()/index.html
+++ b/files/en-us/web/css/url()/index.html
@@ -135,11 +135,9 @@ HTML
CSS
-
-.background {
+.background {
height: 100vh;
}
-
.background {
background: yellow;
diff --git a/files/en-us/web/css/using_css_custom_properties/index.html b/files/en-us/web/css/using_css_custom_properties/index.html
index 0f35fb1b2200eab..88f3ce5ad7adede 100644
--- a/files/en-us/web/css/using_css_custom_properties/index.html
+++ b/files/en-us/web/css/using_css_custom_properties/index.html
@@ -142,15 +142,13 @@ First steps with custom properties
-
-<div>
+<div>
<div class="one"></div>
<div class="two">Text <span class="five">- more text</span></div>
<input class="three">
<textarea class="four">Lorem Ipsum</textarea>
</div>
-
diff --git a/files/en-us/web/css/white-space/index.html b/files/en-us/web/css/white-space/index.html
index 46e68c966a5442e..c813c8a0c3cca9c 100644
--- a/files/en-us/web/css/white-space/index.html
+++ b/files/en-us/web/css/white-space/index.html
@@ -173,8 +173,7 @@ In action
HTML
-
-<div id="css-code" class="box">
+<div id="css-code" class="box">
p { white-space:
<select>
<option>normal</option>
@@ -195,7 +194,7 @@ HTML
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
-.box {
+.box {
width: 300px;
padding: 16px;
border-radius: 10px;
@@ -219,12 +218,12 @@ HTML
font-size: 14px;
}
-var select = document.querySelector("#css-code select");
+var select = document.querySelector("#css-code select");
var results = document.querySelector("#results p");
select.addEventListener("change", function(e) {
results.setAttribute("style", "white-space: "+e.target.value);
})
-
+
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
diff --git a/files/en-us/web/css/writing-mode/index.html b/files/en-us/web/css/writing-mode/index.html
index 047bc615126a476..8cff95ef8c72812 100644
--- a/files/en-us/web/css/writing-mode/index.html
+++ b/files/en-us/web/css/writing-mode/index.html
@@ -125,10 +125,7 @@ HTML
CSS
-
-Some preparatory CSS just to make things look a little better:
-
-table {
+table {
border-collapse:collapse;
}
td, th {
@@ -141,7 +138,6 @@ CSS
height:75px;
width:75px;
}
-
The CSS that adjusts the directionality of the content looks like this: