style(prettier): run yarn prettier -w .

files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md

@@ -45,7 +45,8 @@ The CSS {{cssxref("background")}} property is a shorthand for a number of backgr
         105deg,
         rgb(255 255 255 / 20%) 39%,
         rgb(51 56 57 / 100%) 96%
-      ) center center / 400px 200px no-repeat,
+      )
+      center center / 400px 200px no-repeat,
     url(big-star.png) center no-repeat,
     rebeccapurple;
 }

files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md

@@ -144,7 +144,8 @@ Next, let's look at our button icons:
   font-family: "HeydingsControlsRegular";
   src: url("fonts/heydings_controls-webfont.eot");
   src:
-    url("fonts/heydings_controls-webfont.eot?#iefix") format("embedded-opentype"),
+    url("fonts/heydings_controls-webfont.eot?#iefix")
+      format("embedded-opentype"),
     url("fonts/heydings_controls-webfont.woff") format("woff"),
     url("fonts/heydings_controls-webfont.ttf") format("truetype");
   font-weight: normal;

files/en-us/web/api/web_authentication_api/index.md

@@ -232,9 +232,9 @@ const createCredentialDefaultArgs = {
     timeout: 60000,
     challenge: new Uint8Array([
       // must be a cryptographically random number sent from a server
-      0x8c, 0x0a, 0x26, 0xff, 0x22, 0x91, 0xc1, 0xe9, 0xb9, 0x4e, 0x2e, 0x17, 0x1a,
-      0x98, 0x6a, 0x73, 0x71, 0x9d, 0x43, 0x48, 0xd5, 0xa7, 0x6a, 0x15, 0x7e, 0x38,
-      0x94, 0x52, 0x77, 0x97, 0x0f, 0xef,
+      0x8c, 0x0a, 0x26, 0xff, 0x22, 0x91, 0xc1, 0xe9, 0xb9, 0x4e, 0x2e, 0x17,
+      0x1a, 0x98, 0x6a, 0x73, 0x71, 0x9d, 0x43, 0x48, 0xd5, 0xa7, 0x6a, 0x15,
+      0x7e, 0x38, 0x94, 0x52, 0x77, 0x97, 0x0f, 0xef,
     ]).buffer,
   },
 };
@@ -246,9 +246,9 @@ const getCredentialDefaultArgs = {
     // allowCredentials: [newCredential] // see below
     challenge: new Uint8Array([
       // must be a cryptographically random number sent from a server
-      0x79, 0x50, 0x68, 0x71, 0xda, 0xee, 0xee, 0xb9, 0x94, 0xc3, 0xc2, 0x15, 0x67,
-      0x65, 0x26, 0x22, 0xe3, 0xf3, 0xab, 0x3b, 0x78, 0x2e, 0xd5, 0x6f, 0x81, 0x26,
-      0xe2, 0xa6, 0x01, 0x7d, 0x74, 0x50,
+      0x79, 0x50, 0x68, 0x71, 0xda, 0xee, 0xee, 0xb9, 0x94, 0xc3, 0xc2, 0x15,
+      0x67, 0x65, 0x26, 0x22, 0xe3, 0xf3, 0xab, 0x3b, 0x78, 0x2e, 0xd5, 0x6f,
+      0x81, 0x26, 0xe2, 0xa6, 0x01, 0x7d, 0x74, 0x50,
     ]).buffer,
   },
 };

files/en-us/web/css/@import/index.md

@@ -101,8 +101,8 @@ The `@import` rules in the above examples show media-dependent conditions that w
 
 ```css
 @import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
-@import url("flexy.css") supports((not (display: grid)) and (display: flex)) screen
-  and (max-width: 400px);
+@import url("flexy.css") supports((not (display: grid)) and (display: flex))
+  screen and (max-width: 400px);
 ```
 
 The `@import` rules above illustrate how you might import a layout that uses a grid if `display: grid` is supported, and otherwise imports CSS that uses `display: flex`.
@@ -114,8 +114,8 @@ You can also specify CSS functions in `supports()`, and it will evaluate to `tru
 For example, the code below shows an `@import` that is conditional on both [child combinators](/en-US/docs/Web/CSS/Child_combinator) (`selector()`) and the `font-tech()` function:
 
 ```css
-@import url("whatever.css") supports((selector(h2 > p)) and
-    (font-tech(color-COLRv1)));
+@import url("whatever.css")
+supports((selector(h2 > p)) and (font-tech(color-COLRv1)));
 ```
 
 ### Importing CSS rules into a cascade layer

files/en-us/web/css/@media/prefers-reduced-data/index.md

@@ -58,9 +58,9 @@ In this example the `montserrat-regular.woff2` font file will neither be preload
       local("Montserrat Regular"),
       local("Montserrat-Regular"),
       url("fonts/montserrat-regular.woff2") format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
-      U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
-      U+2212, U+2215, U+FEFF, U+FFFD;
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
 }
 

files/en-us/web/css/@supports/index.md

@@ -260,7 +260,8 @@ If a browser doesn't support the font technology, a fallback font (`Bungee-fallb
 @font-face {
   font-family: "Bungee Spice";
   src:
-    url("https://fonts.googleapis.com/css2?family=Bungee+Spice") tech(color-COLRv1),
+    url("https://fonts.googleapis.com/css2?family=Bungee+Spice")
+      tech(color-COLRv1),
     url("Bungee-fallback.otf") format("opentype");
 }
 ```

files/en-us/web/css/background-image/index.md

@@ -26,7 +26,8 @@ background-image: linear-gradient(
     to bottom,
     rgb(255 255 0 / 50%),
     rgb(0 0 255 / 50%)
-  ), url("catfront.png");
+  ),
+  url("catfront.png");
 
 /* Global values */
 background-image: inherit;

files/en-us/web/css/background-origin/index.md

@@ -95,7 +95,8 @@ In this example the box has a thick dotted border. The first gradient uses the `
       rgb(131 58 180 / 100%) 0%,
       rgb(253 29 29 / 60%) 60%,
       rgb(252 176 69 / 100%) 100%
-    ), radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(0 0 0 / 100%) 28%);
+    ),
+    radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(0 0 0 / 100%) 28%);
   border: 20px dashed black;
   padding: 20px;
   width: 400px;

files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md

@@ -37,8 +37,8 @@ In this example, three backgrounds are stacked: the Firefox logo, an image of bu
 .multi-bg-example {
   width: 100%;
   height: 400px;
-  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgb(30
-          75 115 / 100%), rgb(255 255 255 / 0%));
+  background-image: url(firefox.png), url(bubbles.png),
+    linear-gradient(to right, rgb(30 75 115 / 100%), rgb(255 255 255 / 0%));
   background-repeat: no-repeat, no-repeat, no-repeat;
   background-position:
     bottom right,

files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md

@@ -53,7 +53,8 @@ div {
       to right,
       black 0px 1px,
       transparent 1px 20px
-    ), repeating-linear-gradient(black 0px 1px, transparent 1px 20px);
+    ),
+    repeating-linear-gradient(black 0px 1px, transparent 1px 20px);
   background-size:
     181px 5px,
     5px 121px;

files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md

@@ -111,7 +111,8 @@ For example, the `selector()` function can be used to import a stylesheet for br
 
 ```css
 /* A `selector()` query within a `supports()` function */
-@import `/css/webkitShadowStyles.css` supports(selector(::-webkit-inner-spin-button));
+@import `/css/webkitShadowStyles.css`
+  supports(selector(::-webkit-inner-spin-button));
 ```
 
 ## Examples

files/en-us/web/css/css_filter_effects/using_filter_effects/index.md

@@ -169,12 +169,10 @@ img {
 
 ```css nolint
 img {
-  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%)) drop-shadow(
-      -2px -2px 0 hsl(210deg 100% 50%)
-    )
-    drop-shadow(2px 2px 0 hsl(120deg 100% 50%)) drop-shadow(
-      -2px -2px 0 hsl(30deg 100% 50%)
-    );
+  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%))
+    drop-shadow(-2px -2px 0 hsl(210deg 100% 50%))
+    drop-shadow(2px 2px 0 hsl(120deg 100% 50%))
+    drop-shadow(-2px -2px 0 hsl(30deg 100% 50%));
 }
 img + img {
   filter: none;

files/en-us/web/css/css_images/using_css_gradients/index.md

@@ -355,7 +355,8 @@ div {
       217deg,
       rgb(255 0 0 / 80%),
       rgb(255 0 0 / 0%) 70.71%
-    ), linear-gradient(127deg, rgb(0 255 0 / 80%), rgb(0 255 0 / 0%) 70.71%),
+    ),
+    linear-gradient(127deg, rgb(0 255 0 / 80%), rgb(0 255 0 / 0%) 70.71%),
     linear-gradient(336deg, rgb(0 0 255 / 80%), rgb(0 0 255 / 0%) 70.71%);
 }
 ```
@@ -385,7 +386,8 @@ div {
 
 ```css
 div {
-  background: linear-gradient(to top, red, blue), linear-gradient(to right, #5500ff, #00ff55);
+  background: linear-gradient(to top, red, blue),
+    linear-gradient(to right, #5500ff, #00ff55);
 }
 
 .screen {
@@ -651,7 +653,8 @@ div {
         circle at 93.3% 75%,
         rgb(0 255 0 / 50%),
         rgb(0 255 0 / 0%) 70.71%
-      ) beige;
+      )
+      beige;
   border-radius: 50%;
 }
 ```
@@ -799,7 +802,8 @@ div {
       rgb(75 0 130 / 50%) 240px,
       rgb(238 130 238 / 50%) 280px,
       rgb(255 0 0 / 50%) 300px
-    ), repeating-linear-gradient(
+    ),
+    repeating-linear-gradient(
       -190deg,
       rgb(255 0 0 / 50%) 30px,
       rgb(255 153 0 / 50%) 60px,
@@ -809,8 +813,18 @@ div {
       rgb(75 0 130 / 50%) 180px,
       rgb(238 130 238 / 50%) 210px,
       rgb(255 0 0 / 50%) 230px
-    ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
-        200px, blue 250px, indigo 300px, violet 350px, red 370px);
+    ),
+    repeating-linear-gradient(
+      23deg,
+      red 50px,
+      orange 100px,
+      yellow 150px,
+      green 200px,
+      blue 250px,
+      indigo 300px,
+      violet 350px,
+      red 370px
+    );
 }
 ```
 
@@ -847,7 +861,8 @@ div {
       transparent 116px,
       rgb(255 206 0 / 25%) 116px,
       rgb(255 206 0 / 25%) 166px
-    ), repeating-linear-gradient(
+    ),
+    repeating-linear-gradient(
       0deg,
       transparent,
       transparent 50px,
@@ -861,15 +876,21 @@ div {
       transparent 116px,
       rgb(255 206 0 / 25%) 116px,
       rgb(255 206 0 / 25%) 166px
-    ), repeating-linear-gradient(
+    ),
+    repeating-linear-gradient(
       -45deg,
       transparent,
       transparent 5px,
       rgb(143 77 63 / 25%) 5px,
       rgb(143 77 63 / 25%) 10px
-    ), repeating-linear-gradient(45deg, transparent, transparent 5px, rgb(
-          143 77 63 / 25%
-        ) 5px, rgb(143 77 63 / 25%) 10px);
+    ),
+    repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 5px,
+      rgb(143 77 63 / 25%) 5px,
+      rgb(143 77 63 / 25%) 10px
+    );
 
   background: repeating-linear-gradient(
       90deg,
@@ -879,20 +900,26 @@ div {
       rgb(255 127 0 / 25%) 63px 69px,
       transparent 69px 116px,
       rgb(255 206 0 / 25%) 116px 166px
-    ), repeating-linear-gradient(
+    ),
+    repeating-linear-gradient(
       0deg,
       transparent 0 50px,
       rgb(255 127 0 / 25%) 50px 56px,
       transparent 56px 63px,
       rgb(255 127 0 / 25%) 63px 69px,
       transparent 69px 116px,
       rgb(255 206 0 / 25%) 116px 166px
-    ), repeating-linear-gradient(
+    ),
+    repeating-linear-gradient(
       -45deg,
       transparent 0 5px,
       rgb(143 77 63 / 25%) 5px 10px
-    ), repeating-linear-gradient(45deg, transparent 0 5px, rgb(143 77 63 / 25%) 5px
-        10px);
+    ),
+    repeating-linear-gradient(
+      45deg,
+      transparent 0 5px,
+      rgb(143 77 63 / 25%) 5px 10px
+    );
 }
 ```
 
@@ -948,14 +975,16 @@ div {
         rgb(0 0 0 / 50%) 15px,
         rgb(255 255 255 / 50%) 15px,
         rgb(255 255 255 / 50%) 30px
-      ) top left no-repeat,
+      )
+      top left no-repeat,
     repeating-radial-gradient(
         ellipse at 20% 50%,
         rgb(0 0 0 / 50%),
         rgb(0 0 0 / 50%) 10px,
         rgb(255 255 255 / 50%) 10px,
         rgb(255 255 255 / 50%) 20px
-      ) top left no-repeat yellow;
+      )
+      top left no-repeat yellow;
   background-size:
     200px 200px,
     150px 150px;
@@ -1013,13 +1042,19 @@ div {
       #5691f580 0% 8.25%,
       #b338ff80 8.25% 16.5%,
       #f8305880 16.5% 25%
-    ), repeating-conic-gradient(
+    ),
+    repeating-conic-gradient(
       from 15deg at 50% 50%,
       #e856f580 0% 8.25%,
       #ff384c80 8.25% 16.5%,
       #e7f83080 16.5% 25%
-    ), repeating-conic-gradient(from 0deg at 20% 50%, #f58356ff 0% 8.25%, #caff38ff
-        8.25% 16.5%, #30f88aff 16.5% 25%);
+    ),
+    repeating-conic-gradient(
+      from 0deg at 20% 50%,
+      #f58356ff 0% 8.25%,
+      #caff38ff 8.25% 16.5%,
+      #30f88aff 16.5% 25%
+    );
 }
 ```
 

files/en-us/web/css/env/index.md

@@ -60,10 +60,8 @@ You can then use `env()` in your CSS:
 
 ```css
 body {
-  padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(
-      safe-area-inset-bottom,
-      20px
-    ) env(safe-area-inset-left, 20px);
+  padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
+    env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
 }
 ```
 
@@ -139,10 +137,8 @@ The below example makes use of the optional second parameter of `env()`, which a
 p {
   width: 300px;
   border: 2px solid red;
-  padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env(
-      safe-area-inset-bottom,
-      50px
-    ) env(SAFE-AREA-INSET-LEFT, 50px);
+  padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px)
+    env(safe-area-inset-bottom, 50px) env(SAFE-AREA-INSET-LEFT, 50px);
 }
 ```
 

files/en-us/web/css/filter/index.md

@@ -196,8 +196,8 @@ Filter functions are applied in order of appearance. The same filter function ca
 ```css
 #MDN-logo {
   border: 1px solid blue;
-  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0
-        red);
+  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg)
+    drop-shadow(5px 5px 0 red);
 }
 ```
 

files/en-us/web/css/gradient/conic-gradient/index.md

@@ -212,7 +212,8 @@ div {
       #000 0.25turn 0.5turn,
       #fff 0.5turn 0.75turn,
       #000 0.75turn
-    ) top left / 25% 25% repeat;
+    )
+    top left / 25% 25% repeat;
   border: 1px solid;
 }
 ```

files/en-us/web/css/grid-auto-columns/index.md

@@ -49,7 +49,8 @@ grid-auto-columns: min-content max-content auto;
 grid-auto-columns: 100px 150px 390px;
 grid-auto-columns: 10% 33.3%;
 grid-auto-columns: 0.5fr 3fr 1fr;
-grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr)
+  minmax(20%, 80vmax);
 grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
 
 /* Global values */

files/en-us/web/css/mask-image/index.md

@@ -24,7 +24,8 @@ mask-image: linear-gradient(rgb(0 0 0 / 100%), transparent);
 mask-image: image(url(mask.png), skyblue);
 
 /* Multiple values */
-mask-image: image(url(mask.png), skyblue), linear-gradient(rgb(0 0 0 / 100%), transparent);
+mask-image: image(url(mask.png), skyblue),
+  linear-gradient(rgb(0 0 0 / 100%), transparent);
 
 /* Global values */
 mask-image: inherit;