Run Prettier on CSS code fences, part 12 (#20650)

* Run Prettier on CSS code fences, part 12 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. * Update files/en-us/web/css/page-break-before/index.md Co-authored-by: Jean-Yves Perrier <[email protected]>
mdn · Sep 13, 2022 · d7dd974 · d7dd974
1 parent e5fe73d
commit d7dd974
Show file tree

Hide file tree

Showing 60 changed files with 474 additions and 211 deletions.
diff --git a/files/en-us/web/css/inheritance/index.md b/files/en-us/web/css/inheritance/index.md
@@ -27,7 +27,9 @@ When no value for an **inherited property** has been specified on an element, th
 A typical example of an inherited property is the {{ Cssxref("color") }} property. Consider the following style rules and the markup:
 
 ```css
-p { color: green; }
+p {
+  color: green;
+}
 ```
 
 ```html
@@ -43,7 +45,9 @@ When no value for a **non-inherited property** has been specified on an element,
 A typical example of a non-inherited property is the {{ Cssxref("border") }} property. Consider the following style rules and the markup:
 
 ```css
- p { border: medium solid; }
+p {
+  border: medium solid;
+}
 ```
 
 ```html

diff --git a/files/en-us/web/css/initial-letter/index.md b/files/en-us/web/css/initial-letter/index.md
@@ -24,8 +24,8 @@ initial-letter: normal;
 
 /* Numeric values */
 initial-letter: 1.5;    /* Initial letter occupies 1.5 lines */
-initial-letter: 3.0;    /* Initial letter occupies 3 lines */
-initial-letter: 3.0 2;  /* Initial letter occupies 3 lines and
+initial-letter: 3;      /* Initial letter occupies 3 lines */
+initial-letter: 3 2;    /* Initial letter occupies 3 lines and
                            sinks 2 lines */
 
 /* Global values */
@@ -83,8 +83,8 @@ The keyword value `normal`, or a `<number>` optionally followed by an `<integer>
 }
 
 .three::first-letter {
-  -webkit-initial-letter: 3.0;
-  initial-letter: 3.0;
+  -webkit-initial-letter: 3;
+  initial-letter: 3;
 }
 ```
 

diff --git a/files/en-us/web/css/isolation/index.md b/files/en-us/web/css/isolation/index.md
@@ -72,7 +72,7 @@ The `isolation` property is specified as one of the keyword values listed below.
 
 ```css
 .a {
-  background-color: rgb(0,255,0);
+  background-color: rgb(0, 255, 0);
 }
 #b {
   width: 200px;

diff --git a/files/en-us/web/css/justify-items/index.md b/files/en-us/web/css/justify-items/index.md
@@ -155,7 +155,8 @@ article {
   justify-items: stretch;
 }
 
-article:hover, article:focus {
+article:hover,
+article:focus {
   justify-items: center;
 }
 
@@ -166,7 +167,8 @@ article span {
   text-align: center;
 }
 
-article, span {
+article,
+span {
   padding: 10px;
   border-radius: 7px;
 }

diff --git a/files/en-us/web/css/justify-self/index.md b/files/en-us/web/css/justify-self/index.md
@@ -161,11 +161,11 @@ span:nth-child(2) {
 }
 
 span:nth-child(3) {
-justify-self: center;
+  justify-self: center;
 }
 
 span:nth-child(4) {
-justify-self: end;
+  justify-self: end;
 }
 
 article span {
@@ -175,7 +175,8 @@ article span {
   text-align: center;
 }
 
-article, span {
+article,
+span {
   padding: 10px;
   border-radius: 7px;
 }

diff --git a/files/en-us/web/css/justify-tracks/index.md b/files/en-us/web/css/justify-tracks/index.md
@@ -23,7 +23,7 @@ The **`justify-tracks`** CSS property sets the alignment in the masonry axis for
 justify-tracks: start;
 justify-tracks: space-between;
 justify-tracks: center;
-justify-tracks: start,center,end;
+justify-tracks: start, center, end;
 
 /* Global values */
 justify-tracks: inherit;

diff --git a/files/en-us/web/css/left/index.md b/files/en-us/web/css/left/index.md
@@ -139,7 +139,7 @@ When both `left` and {{cssxref("right")}} are defined, and width constraints don
 #wrap {
   width: 700px;
   margin: 0 auto;
-  background: #5C5C5C;
+  background: #5c5c5c;
 }
 
 pre {
@@ -155,7 +155,7 @@ pre {
   position: absolute;
   left: 20px;
   top: 20px;
-  background-color: #D8F5FF;
+  background-color: #d8f5ff;
 }
 
 #example_2 {
@@ -164,32 +164,31 @@ pre {
   position: relative;
   top: 0;
   right: 0;
-  background-color: #C1FFDB;
-
+  background-color: #c1ffdb;
 }
 #example_3 {
   width: 600px;
   height: 400px;
   position: relative;
   top: 20px;
   left: 20px;
-  background-color: #FFD7C2;
+  background-color: #ffd7c2;
 }
 
 #example_4 {
-  width:200px;
-  height:200px;
-  position:absolute;
-  bottom:10px;
-  right:20px;
-  background-color:#FFC7E4;
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+  background-color: #ffc7e4;
 }
 #example_5 {
   position: absolute;
   right: 0;
   left: 0;
   top: 100px;
-  background-color: #D7FFC2;
+  background-color: #d7ffc2;
 }
 ```
 

diff --git a/files/en-us/web/css/length/index.md b/files/en-us/web/css/length/index.md
@@ -207,14 +207,14 @@ html {
 .inner {
   height: 50px;
   background-color: #999;
-  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
-              inset -3px -3px 5px rgba(0,0,0,0.5);
+  box-shadow: inset 3px 3px 5px rgba(255, 255, 255, 0.5), inset -3px -3px 5px
+      rgba(0, 0, 0, 0.5);
 }
 
 .result {
   height: 20px;
-  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
-              inset -3px -3px 5px rgba(0,0,0,0.5);
+  box-shadow: inset 3px 3px 5px rgba(255, 255, 255, 0.5), inset -3px -3px 5px
+      rgba(0, 0, 0, 0.5);
   background-color: orange;
   display: flex;
   align-items: center;

diff --git a/files/en-us/web/css/letter-spacing/index.md b/files/en-us/web/css/letter-spacing/index.md
@@ -26,7 +26,7 @@ letter-spacing: normal;
 /* <length> values */
 letter-spacing: 0.3em;
 letter-spacing: 3px;
-letter-spacing: .3px;
+letter-spacing: 0.3px;
 
 /* Global values */
 letter-spacing: inherit;
@@ -83,11 +83,21 @@ Some written languages should not have any letter spacing applied. For instance,
 #### CSS
 
 ```css
-.normal   { letter-spacing: normal; }
-.em-wide  { letter-spacing: 0.4em; }
-.em-wider { letter-spacing: 1em; }
-.em-tight { letter-spacing: -0.05em; }
-.px-wide  { letter-spacing: 6px; }
+.normal {
+  letter-spacing: normal;
+}
+.em-wide {
+  letter-spacing: 0.4em;
+}
+.em-wider {
+  letter-spacing: 1em;
+}
+.em-tight {
+  letter-spacing: -0.05em;
+}
+.px-wide {
+  letter-spacing: 6px;
+}
 ```
 
 #### Result

diff --git a/files/en-us/web/css/line-break/index.md b/files/en-us/web/css/line-break/index.md
@@ -80,12 +80,28 @@ See whether the text is wrapped before "々", "ぁ" and "。".
 #### CSS
 
 ```css
-.wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; }
-.auto { line-break: auto; }
-.loose { line-break: loose; }
-.normal { line-break: normal; }
-.strict { line-break: strict; }
-.anywhere { line-break: anywhere; }
+.wrapbox {
+  width: 10em;
+  margin: 0.5em;
+  white-space: normal;
+  vertical-align: top;
+  display: inline-block;
+}
+.auto {
+  line-break: auto;
+}
+.loose {
+  line-break: loose;
+}
+.normal {
+  line-break: normal;
+}
+.strict {
+  line-break: strict;
+}
+.anywhere {
+  line-break: anywhere;
+}
 ```
 
 #### Result

diff --git a/files/en-us/web/css/line-height/index.md b/files/en-us/web/css/line-height/index.md
@@ -86,10 +86,28 @@ Use a minimum value of `1.5` for `line-height` for main paragraph content. This
 ```css
 /* All rules below have the same resultant line height */
 
-div { line-height: 1.2;   font-size: 10pt; }   /* number/unitless */
-div { line-height: 1.2em; font-size: 10pt; }   /* length */
-div { line-height: 120%;  font-size: 10pt; }   /* percentage */
-div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif; } /* font shorthand */
+/* number/unitless */
+div {
+  line-height: 1.2;
+  font-size: 10pt;
+}
+
+/* length */
+div {
+  line-height: 1.2em;
+  font-size: 10pt;
+}
+
+/* percentage */
+div {
+  line-height: 120%;
+  font-size: 10pt;
+}
+
+/* font shorthand */
+div {
+  font: 10pt/1.2 Georgia, "Bitstream Charter", serif;
+}
 ```
 
 It is often more convenient to set `line-height` by using the {{cssxref("font")}} shorthand as shown above, but this requires the `font-family` property to be specified as well.

diff --git a/files/en-us/web/css/list-style-image/index.md b/files/en-us/web/css/list-style-image/index.md
@@ -27,7 +27,7 @@ It is often more convenient to use the shorthand {{ cssxref("list-style") }}.
 list-style-image: none;
 
 /* <url> values */
-list-style-image: url('starsolid.gif');
+list-style-image: url("starsolid.gif");
 
 /* valid image values */
 list-style-image: linear-gradient(to left bottom, red, blue);

diff --git a/files/en-us/web/css/list-style-type/index.md b/files/en-us/web/css/list-style-type/index.md
@@ -33,7 +33,7 @@ list-style-type: trad-chinese-informal;
 list-style-type: kannada;
 
 /* <string> value */
-list-style-type: '-';
+list-style-type: "-";
 
 /* Identifier matching an @counter-style rule */
 list-style-type: custom-counter-style;
@@ -550,7 +550,7 @@ label {
 }
 
 input {
-  margin: .4rem;
+  margin: 0.4rem;
 }
 ```
 

diff --git a/files/en-us/web/css/list-style/index.md b/files/en-us/web/css/list-style/index.md
@@ -33,7 +33,7 @@ This property is a shorthand for the following CSS properties:
 list-style: square;
 
 /* image */
-list-style: url('../img/shape.png');
+list-style: url("../img/shape.png");
 
 /* position */
 list-style: inside;
@@ -42,7 +42,7 @@ list-style: inside;
 list-style: georgian inside;
 
 /* type | image | position */
-list-style: lower-roman url('../img/shape.png') outside;
+list-style: lower-roman url("../img/shape.png") outside;
 
 /* Keyword value */
 list-style: none;
@@ -89,13 +89,15 @@ ul li::before {
 A second approach is to apply a url value to the list-style property:
 
 ```css
-nav ol, nav ul {
+nav ol,
+nav ul {
   list-style: none;
 }
 
 /* becomes */
 
-nav ol, nav ul {
+nav ol,
+nav ul {
   list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
 }
 ```

diff --git a/files/en-us/web/css/margin-bottom/index.md b/files/en-us/web/css/margin-bottom/index.md
@@ -77,31 +77,31 @@ CSS for divs to set margin-bottom and height
 
 ```css
 .box0 {
-    margin-bottom:1em;
-    height:3em;
+  margin-bottom: 1em;
+  height: 3em;
 }
 .box1 {
-    margin-bottom:-1.5em;
-    height:4em;
+  margin-bottom: -1.5em;
+  height: 4em;
 }
 .box2 {
-    border:1px dashed black;
-    border-width:1px 0;
-    margin-bottom:2em;
+  border: 1px dashed black;
+  border-width: 1px 0;
+  margin-bottom: 2em;
 }
 ```
 
 Some definitions for container and divs so margins' effects can be seen more clearly
 
 ```css
 .container {
-    background-color:orange;
-    width:320px;
-    border:1px solid black;
+  background-color: orange;
+  width: 320px;
+  border: 1px solid black;
 }
 div {
-    width:320px;
-    background-color:gold;
+  width: 320px;
+  background-color: gold;
 }
 ```
-Original file line number
+Diff line change
@@ Expand Up @@
     ```css
     .a {
-      background-color: rgb(0,255,0);
+      background-color: rgb(0, 255, 0);
     }
     #b {
       width: 200px;
@@ Expand Down @@