Run Prettier on CSS code fences, part 13 (#20651)

Adding to #20633 The PR focuses only on CSS code fences. Pulling only simple changes. Idea is to gradually prettify all the CSS code fences before the full automation.
mdn · Sep 13, 2022 · 78e760f · 78e760f
1 parent d7dd974
commit 78e760f
Show file tree

Hide file tree

Showing 66 changed files with 613 additions and 397 deletions.
diff --git a/files/en-us/web/css/padding-inline-end/index.md b/files/en-us/web/css/padding-inline-end/index.md
@@ -81,7 +81,7 @@ div {
 .exampleText {
   writing-mode: vertical-lr;
   padding-inline-end: 20px;
-  background-color: #C8C800;
+  background-color: #c8c800;
 }
 ```
 

diff --git a/files/en-us/web/css/place-items/index.md b/files/en-us/web/css/place-items/index.md
@@ -175,7 +175,7 @@ values.addEventListener('change', (evt) => {
 
 ```css
 #container {
-  height:200px;
+  height: 200px;
   width: 240px;
   place-items: stretch; /* You can change this value by selecting another option in the list */
   background-color: #8c8c8c;
@@ -287,7 +287,7 @@ values.addEventListener('change', (evt) => {
 
 ```css
 #gridcontainer {
-  height:200px;
+  height: 200px;
   width: 240px;
   place-items: stretch; /* You can change this value by selecting another option in the list */
   background-color: #8c8c8c;

diff --git a/files/en-us/web/css/place-self/index.md b/files/en-us/web/css/place-self/index.md
@@ -148,7 +148,8 @@ article span {
   text-align: center;
 }
 
-article, span {
+article,
+span {
   padding: 10px;
   border-radius: 7px;
 }

diff --git a/files/en-us/web/css/pointer-events/index.md b/files/en-us/web/css/pointer-events/index.md
@@ -116,7 +116,8 @@ This example disables pointer events on the link to `http://example.com`.
 #### CSS
 
 ```css
-a[href="http://example.com"] {
+a[href="http://example.com"]
+{
   pointer-events: none;
 }
 ```

diff --git a/files/en-us/web/css/position/index.md b/files/en-us/web/css/position/index.md
@@ -258,7 +258,10 @@ Fixed positioning is similar to absolute positioning, with the exception that th
 Sticky positioning can be thought of as a hybrid of relative and fixed positioning when its nearest scrolling ancestor is the viewport. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. For example:
 
 ```css
-#one { position: sticky; top: 10px; }
+#one {
+  position: sticky;
+  top: 10px;
+}
 ```
 
 The above CSS rule would position the element with id _one_ relatively until the viewport was scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top.
@@ -310,15 +313,15 @@ You must specify a threshold with at least one of `top`, `right`, `bottom`, or `
 }
 
 dl > div {
-  background: #FFF;
+  background: #fff;
   padding: 24px 0 0 0;
 }
 
 dt {
-  background: #B8C1C8;
-  border-bottom: 1px solid #989EA4;
-  border-top: 1px solid #717D85;
-  color: #FFF;
+  background: #b8c1c8;
+  border-bottom: 1px solid #989ea4;
+  border-top: 1px solid #717d85;
+  color: #fff;
   font: bold 18px/21px Helvetica, Arial, sans-serif;
   margin: 0;
   padding: 2px 0 0 12px;
@@ -335,7 +338,7 @@ dd {
 }
 
 dd + dd {
-  border-top: 1px solid #CCC;
+  border-top: 1px solid #ccc;
 }
 ```
 

diff --git a/files/en-us/web/css/print-color-adjust/index.md b/files/en-us/web/css/print-color-adjust/index.md
@@ -82,7 +82,10 @@ For whatever reason, this is the desired appearance in any rendering environment
 ```css
 .my-box {
   background-color: black;
-  background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5));
+  background-image: linear-gradient(
+    rgba(0, 0, 180, 0.5),
+    rgba(70, 140, 220, 0.5)
+  );
   color: #900;
   width: 15rem;
   height: 6rem;

diff --git a/files/en-us/web/css/ratio/index.md b/files/en-us/web/css/ratio/index.md
@@ -30,7 +30,9 @@ In Media Queries Level 4, the `<ratio>` date type is updated to consist of a str
 ### Use in a media query
 
 ```css
-@media screen and (min-aspect-ratio: 16/9) { /* … */ }
+@media screen and (min-aspect-ratio: 16/9) {
+  /* … */
+}
 ```
 
 ### Common aspect ratios

diff --git a/files/en-us/web/css/repeat/index.md b/files/en-us/web/css/repeat/index.md
@@ -74,8 +74,9 @@ Then if a property declaration uses `<auto-repeat>`, it is only allowed to use `
 
 ```css example-bad
 .wrapper {
-  grid-template-columns:  repeat(auto-fill, 10px)
-                          repeat(2, minmax(min-content, max-content));
+  grid-template-columns:
+    repeat(auto-fill, 10px)
+    repeat(2, minmax(min-content, max-content));
 }
 ```
 

diff --git a/files/en-us/web/css/resolution/index.md b/files/en-us/web/css/resolution/index.md
@@ -39,7 +39,9 @@ The `<resolution>` data type consists of a strictly positive {{cssxref("&lt;numb
 ### Use in a media query
 
 ```css
-@media print and (min-resolution: 300dpi) { /* … */ }
+@media print and (min-resolution: 300dpi) {
+  /* … */
+}
 ```
 
 ### Valid resolutions

diff --git a/files/en-us/web/css/revert/index.md b/files/en-us/web/css/revert/index.md
@@ -119,9 +119,15 @@ Reverting effectively removes the value for the element you select with some rul
 #### CSS
 
 ```css
-section { color: darkgreen }
-p { color: red }
-section.with-revert { color: revert }
+section {
+  color: darkgreen;
+}
+p {
+  color: red;
+}
+section.with-revert {
+  color: revert;
+}
 ```
 
 Notice how paragraph still has a red color even though a color property for the section was reverted. Also note that both the header and plain text node are black. This is exactly the same as if `section { color: darkgreen }` would not exist for the second section.

diff --git a/files/en-us/web/css/right/index.md b/files/en-us/web/css/right/index.md
@@ -96,7 +96,7 @@ When both {{cssxref("left")}} and `right` are defined, if not prevented from doi
 #relative {
   width: 100px;
   height: 100px;
-  background-color: #FFC7E4;
+  background-color: #ffc7e4;
   position: relative;
   top: 20px;
   left: 20px;
@@ -105,7 +105,7 @@ When both {{cssxref("left")}} and `right` are defined, if not prevented from doi
 #absolute {
   width: 100px;
   height: 100px;
-  background-color: #FFD7C2;
+  background-color: #ffd7c2;
   position: absolute;
   bottom: 10px;
   right: 20px;
@@ -133,18 +133,18 @@ When both `left` and `right` are declared, the element will stretch to meet both
 
 ```css
 div {
-  outline: 1px solid #CCCCCC;
+  outline: 1px solid #cccccc;
 }
 #parent {
   width: 200px;
   height: 200px;
-  background-color: #FFC7E4;
+  background-color: #ffc7e4;
   position: relative;
 }
 /* declare both a left and a right */
 #width,
 #noWidth {
-  background-color: #C2FFD7;
+  background-color: #c2ffd7;
   position: absolute;
   left: 0;
   right: 0;

diff --git a/files/en-us/web/css/ruby-position/index.md b/files/en-us/web/css/ruby-position/index.md
@@ -69,7 +69,7 @@ ruby-position: unset;
 
 ```css
 ruby {
-    ruby-position:over;
+  ruby-position: over;
 }
 ```
 
@@ -92,7 +92,7 @@ ruby {
 
 ```css
 ruby {
-    ruby-position:under;
+  ruby-position: under;
 }
 ```
 
@@ -116,7 +116,7 @@ ruby {
 
 ```css
 ruby {
-    ruby-position: alternate; /* this is also the initial value */
+  ruby-position: alternate; /* this is also the initial value */
 }
 ```
 

diff --git a/files/en-us/web/css/scroll-behavior/index.md b/files/en-us/web/css/scroll-behavior/index.md
@@ -79,7 +79,8 @@ a {
   width: 50px;
   text-decoration: none;
 }
-nav, .scroll-container {
+nav,
+.scroll-container {
   display: block;
   margin: 0 auto;
   text-align: center;

diff --git a/files/en-us/web/css/scroll-margin-block/index.md b/files/en-us/web/css/scroll-margin-block/index.md
@@ -30,7 +30,7 @@ This property is a shorthand for the following CSS properties:
 ```css
 /* <length> values */
 scroll-margin-block: 10px;
-scroll-margin-block: 1em .5em ;
+scroll-margin-block: 1em 0.5em;
 
 /* Global values */
 scroll-margin-block: inherit;

diff --git a/files/en-us/web/css/scroll-margin-inline/index.md b/files/en-us/web/css/scroll-margin-inline/index.md
@@ -30,7 +30,7 @@ This property is a shorthand for the following CSS properties:
 ```css
 /* <length> values */
 scroll-margin-inline: 10px;
-scroll-margin-inline: 1em .5em ;
+scroll-margin-inline: 1em 0.5em;
 
 /* Global values */
 scroll-margin-inline: inherit;

diff --git a/files/en-us/web/css/scroll-margin/index.md b/files/en-us/web/css/scroll-margin/index.md
@@ -33,7 +33,7 @@ This property is a shorthand for the following CSS properties:
 ```css
 /* <length> values */
 scroll-margin: 10px;
-scroll-margin: 1em .5em 1em 1em;
+scroll-margin: 1em 0.5em 1em 1em;
 
 /* Global values */
 scroll-margin: inherit;

diff --git a/files/en-us/web/css/scroll-padding-block/index.md b/files/en-us/web/css/scroll-padding-block/index.md
@@ -36,7 +36,7 @@ scroll-padding-block: auto;
 
 /* <length> values */
 scroll-padding-block: 10px;
-scroll-padding-block: 1em .5em;
+scroll-padding-block: 1em 0.5em;
 scroll-padding-block: 10%;
 
 /* Global values */

diff --git a/files/en-us/web/css/scroll-padding-inline/index.md b/files/en-us/web/css/scroll-padding-inline/index.md
@@ -36,7 +36,7 @@ scroll-padding-inline: auto;
 
 /* <length> values */
 scroll-padding-inline: 10px;
-scroll-padding-inline: 1em .5em;
+scroll-padding-inline: 1em 0.5em;
 scroll-padding-inline: 10%;
 
 /* Global values */

diff --git a/files/en-us/web/css/scroll-padding/index.md b/files/en-us/web/css/scroll-padding/index.md
@@ -34,7 +34,7 @@ scroll-padding: auto;
 
 /* <length> values */
 scroll-padding: 10px;
-scroll-padding: 1em .5em 1em 1em;
+scroll-padding: 1em 0.5em 1em 1em;
 scroll-padding: 10%;
 
 /* Global values */

diff --git a/files/en-us/web/css/scroll-snap-destination/index.md b/files/en-us/web/css/scroll-snap-destination/index.md
@@ -88,7 +88,7 @@ scroll-snap-destination =
   display: flex;
 }
 
-#container > div:nth-child(-n+2) {
+#container > div:nth-child(-n + 2) {
   margin-right: 20px;
 }
 
@@ -124,11 +124,11 @@ scroll-snap-destination =
 }
 
 .scrollContainer > div:nth-child(even) {
-  background-color: #87EA87;
+  background-color: #87ea87;
 }
 
 .scrollContainer > div:nth-child(odd) {
-  background-color: #87CCEA;
+  background-color: #87ccea;
 }
 ```
 

diff --git a/files/en-us/web/css/scroll-snap-points-y/index.md b/files/en-us/web/css/scroll-snap-points-y/index.md
@@ -86,11 +86,11 @@ scroll-snap-points-y =
 }
 
 #container > div:nth-child(even) {
-  background-color: #87EA87;
+  background-color: #87ea87;
 }
 
 #container > div:nth-child(odd) {
-  background-color: #87CCEA;
+  background-color: #87ccea;
 }
 ```
 

diff --git a/files/en-us/web/css/scroll-snap-stop/index.md b/files/en-us/web/css/scroll-snap-stop/index.md
@@ -164,11 +164,11 @@ div > div {
 
 /* coloration */
 div > div:nth-child(even) {
-  background-color: #87EA87;
+  background-color: #87ea87;
 }
 
 div > div:nth-child(odd) {
-  background-color: #87CCEA;
+  background-color: #87ccea;
 }
 ```
 

diff --git a/files/en-us/web/css/scroll-snap-type/index.md b/files/en-us/web/css/scroll-snap-type/index.md
@@ -149,7 +149,9 @@ scroll-snap-type: unset;
 
 ```css
 /* setup */
-html, body, .holster {
+html,
+body,
+.holster {
   height: 100%;
 }
 .holster {
@@ -221,11 +223,11 @@ html, body, .holster {
 }
 /* coloration */
 .container > div:nth-child(even) {
-  background-color: #87EA87;
+  background-color: #87ea87;
 }
 
 .container > div:nth-child(odd) {
-  background-color: #87CCEA;
+  background-color: #87ccea;
 }
 ```
 

diff --git a/files/en-us/web/css/scrollbar-color/index.md b/files/en-us/web/css/scrollbar-color/index.md
@@ -26,7 +26,7 @@ The **thumb** refers to the moving part of the scrollbar, which usually floats o
 scrollbar-color: auto;
 
 /* <color> values */
-scrollbar-color: rebeccapurple green;   /* Two valid colors.
+scrollbar-color: rebeccapurple green; /* Two valid colors.
 The first applies to the thumb of the scrollbar, the second to the track. */
 
 /* Global values */