Fix typos and pseudo-typos 6 (mdn#36247)

* Fix typos and pseudo-typos 6 * Apply suggestions from code review Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/css/_colon_read-only/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: Estelle Weyl <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
dwgrth · Oct 22, 2024 · 50c8e29 · 50c8e29
1 parent c6165f0
commit 50c8e29
Show file tree

Hide file tree

Showing 56 changed files with 238 additions and 230 deletions.
diff --git a/files/en-us/web/css/--_star_/index.md b/files/en-us/web/css/--_star_/index.md
@@ -16,9 +16,9 @@ Custom properties are scoped to the element(s) they are declared on, and partici
 ## Syntax
 
 ```css
---somekeyword: left;
---somecolor: #0000ff;
---somecomplexvalue: 3px 6px rgb(20 32 54);
+--some-keyword: left;
+--some-color: #0000ff;
+--some-complex-value: 3px 6px rgb(20 32 54);
 ```
 
 - `<declaration-value>`

diff --git a/files/en-us/web/css/-webkit-mask-box-image/index.md b/files/en-us/web/css/-webkit-mask-box-image/index.md
@@ -102,15 +102,15 @@ Where:
 ### Setting an image
 
 ```css
-.exampleone {
+.example-one {
   -webkit-mask-box-image: url("mask.png");
 }
 ```
 
 ### Offsetting and filling an image
 
 ```css
-.exampletwo {
+.example-two {
   -webkit-mask-box-image: url("logo.png") 100 100 0 0 round round;
 }
 ```

diff --git a/files/en-us/web/css/-webkit-mask-repeat-x/index.md b/files/en-us/web/css/-webkit-mask-repeat-x/index.md
@@ -60,12 +60,12 @@ The `-webkit-mask-repeat-x` property specifies whether and how a mask image is r
 ### Using a repeating or non-repeating mask image
 
 ```css
-.exampleone {
+.example-one {
   -webkit-mask-image: url("mask.png");
   -webkit-mask-repeat-x: repeat;
 }
 
-.exampletwo {
+.example-two {
   -webkit-mask-image: url("mask.png");
   -webkit-mask-repeat-x: no-repeat;
 }
@@ -76,7 +76,7 @@ The `-webkit-mask-repeat-x` property specifies whether and how a mask image is r
 You can specify a different `<repeat-style>` for each mask image, separated by commas:
 
 ```css
-.examplethree {
+.example-three {
   -webkit-mask-image: url("mask1.png"), url("mask2.png");
   -webkit-mask-repeat-x: repeat, space;
 }

diff --git a/files/en-us/web/css/-webkit-mask-repeat-y/index.md b/files/en-us/web/css/-webkit-mask-repeat-y/index.md
@@ -60,12 +60,12 @@ The `-webkit-mask-repeat-y` property sets whether and how a mask image is repeat
 ### Using a repeating or non-repeating mask image
 
 ```css
-.exampleone {
+.example-one {
   -webkit-mask-image: url("mask.png");
   -webkit-mask-repeat-y: repeat;
 }
 
-.exampletwo {
+.example-two {
   -webkit-mask-image: url("mask.png");
   -webkit-mask-repeat-y: no-repeat;
 }
@@ -76,7 +76,7 @@ The `-webkit-mask-repeat-y` property sets whether and how a mask image is repeat
 You can specify a different `<repeat-style>` for each mask image, separated by commas:
 
 ```css
-.examplethree {
+.example-three {
   -webkit-mask-image: url("mask1.png"), url("mask2.png");
   -webkit-mask-repeat-y: repeat, space;
 }

diff --git a/files/en-us/web/css/-webkit-text-fill-color/index.md b/files/en-us/web/css/-webkit-text-fill-color/index.md
@@ -72,7 +72,7 @@ p {
 
 ## See also
 
-- [Surfin' Safari blog post announcing this feature](https://webkit.org/blog/85/introducing-text-stroke/)
+- [Introducing Text-Stroke](https://webkit.org/blog/85/introducing-text-stroke/) on webkit.org (2006)
 - [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/)
 - {{cssxref("-webkit-text-stroke-color")}}
 - {{cssxref("-webkit-text-stroke-width")}}

diff --git a/files/en-us/web/css/-webkit-text-stroke-color/index.md b/files/en-us/web/css/-webkit-text-stroke-color/index.md
@@ -81,7 +81,7 @@ colorPicker.addEventListener("change", (evt) => {
 
 ## See also
 
-- [Surfin' Safari blog post announcing this feature](https://webkit.org/blog/85/introducing-text-stroke/)
+- [Introducing Text-Stroke](https://webkit.org/blog/85/introducing-text-stroke/) on webkit.org (2006)
 - [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/)
 - {{cssxref("-webkit-text-fill-color")}}
 - {{cssxref("-webkit-text-stroke-width")}}

diff --git a/files/en-us/web/css/-webkit-text-stroke-width/index.md b/files/en-us/web/css/-webkit-text-stroke-width/index.md
@@ -92,7 +92,7 @@ p {
 
 ## See also
 
-- [Surfin' Safari blog post announcing this feature](https://webkit.org/blog/85/introducing-text-stroke/)
+- [Introducing Text-Stroke](https://webkit.org/blog/85/introducing-text-stroke/) on webkit.org (2006)
 - [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/)
 - {{cssxref("-webkit-text-stroke-color")}}
 - {{cssxref("-webkit-text-stroke")}}

diff --git a/files/en-us/web/css/-webkit-text-stroke/index.md b/files/en-us/web/css/-webkit-text-stroke/index.md
@@ -80,7 +80,7 @@ This property is a shorthand for the following CSS properties:
 
 ## See also
 
-- [Surfin' Safari blog post announcing this feature](https://webkit.org/blog/85/introducing-text-stroke/)
+- [Introducing Text-Stroke](https://webkit.org/blog/85/introducing-text-stroke/) on webkit.org (2006)
 - [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/)
 - {{cssxref("-webkit-text-stroke-width")}}
 - {{cssxref("-webkit-text-stroke-color")}}

diff --git a/files/en-us/web/css/@font-face/font-display/index.md b/files/en-us/web/css/@font-face/font-display/index.md
@@ -62,8 +62,8 @@ The font display timeline is based on a timer that begins the moment the user ag
 @font-face {
   font-family: ExampleFont;
   src:
-    url(/path/to/fonts/examplefont.woff) format("woff"),
-    url(/path/to/fonts/examplefont.eot) format("eot");
+    url(/path/to/fonts/example-font.woff) format("woff"),
+    url(/path/to/fonts/example-font.eot) format("eot");
   font-weight: 400;
   font-style: normal;
   font-display: fallback;

diff --git a/files/en-us/web/css/@font-face/font-family/index.md b/files/en-us/web/css/@font-face/font-family/index.md
@@ -20,7 +20,7 @@ font-family: "font family";
 font-family: "another font family";
 
 /* <custom-ident> value */
-font-family: examplefont;
+font-family: example-font;
 ```
 
 ### Values

diff --git a/files/en-us/web/css/@font-face/font-feature-settings/index.md b/files/en-us/web/css/@font-face/font-feature-settings/index.md
@@ -54,8 +54,8 @@ In this example, the tag name `swsh` and a boolean value `1` are used as the val
 #### HTML
 
 ```html
-<p class="swashoff">Swash is off here</p>
-<p class="swashon">Swash is on here</p>
+<p class="swash-off">Swash is off here</p>
+<p class="swash-on">Swash is on here</p>
 ```
 
 #### CSS
@@ -74,10 +74,10 @@ p {
   font-size: 3rem;
   margin: 0.7rem 3rem;
 }
-.swashoff {
+.swash-off {
   font-family: MonteCarlo;
 }
-.swashon {
+.swash-on {
   font-family: MonteCarlo2;
 }
 ```

diff --git a/files/en-us/web/css/@import/index.md b/files/en-us/web/css/@import/index.md
@@ -91,7 +91,7 @@ The two examples above show how to specify the _url_ as a `<string>` and as a `u
 ### Importing CSS rules conditional on media queries
 
 ```css
-@import url("fineprint.css") print;
+@import url("fine-print.css") print;
 @import url("bluish.css") print, screen;
 @import "common.css" screen;
 @import url("landscape.css") screen and (orientation: landscape);

diff --git a/files/en-us/web/css/@keyframes/index.md b/files/en-us/web/css/@keyframes/index.md
@@ -12,7 +12,7 @@ The **`@keyframes`** CSS [at-rule](/en-US/docs/Web/CSS/At-rule) controls the int
 ## Syntax
 
 ```css
-@keyframes slidein {
+@keyframes slide-in {
   from {
     transform: translateX(0%);
   }

diff --git a/files/en-us/web/css/_colon_-moz-window-inactive/index.md b/files/en-us/web/css/_colon_-moz-window-inactive/index.md
@@ -31,21 +31,21 @@ This example alters the appearance of a box's background depending on whether it
 ### HTML
 
 ```html
-<div id="mybox">
+<div id="my-box">
   <p>This is a box!</p>
 </div>
 ```
 
 ### CSS
 
 ```css
-#mybox {
+#my-box {
   background: linear-gradient(to bottom, yellow, cyan);
   width: 200px;
   height: 200px;
 }
 
-#mybox:-moz-window-inactive {
+#my-box:-moz-window-inactive {
   background: cyan;
 }
 ```

diff --git a/files/en-us/web/css/_colon_placeholder-shown/index.md b/files/en-us/web/css/_colon_placeholder-shown/index.md
@@ -96,7 +96,7 @@ The following example highlights the Student ID field with a custom style.
       pattern="[0-9]{8}"
       title="8 digit ID"
       id="sid"
-      class="studentid"
+      class="student-id"
       placeholder="8 digit id" />
   </p>
   <input type="submit" />
@@ -111,7 +111,7 @@ input {
   color: black;
 }
 
-input.studentid:placeholder-shown {
+input.student-id:placeholder-shown {
   background-color: yellow;
   color: red;
   font-style: italic;

diff --git a/files/en-us/web/css/_colon_read-only/index.md b/files/en-us/web/css/_colon_read-only/index.md
@@ -46,8 +46,13 @@ CA
       >
     </div>
     <div>
-      <label for="pcode">Zip/postal code: </label>
-      <input id="pcode" name="pcode" type="text" value="94708" readonly />
+      <label for="postal-code">Zip/postal code: </label>
+      <input
+        id="postal-code"
+        name="postal-code"
+        type="text"
+        value="94708"
+        readonly />
     </div>
   </fieldset>
 

diff --git a/files/en-us/web/css/_doublecolon_-webkit-scrollbar/index.md b/files/en-us/web/css/_doublecolon_-webkit-scrollbar/index.md
@@ -128,7 +128,7 @@ The following example shows how to apply colors to scrollbars using {{cssxref("s
 #### HTML
 
 ```html
-<div class="scrollbox">
+<div class="scroll-box">
   <h1>Yoshi</h1>
   <p>
     Yoshi is a fictional dinosaur who appears in video games published by
@@ -149,7 +149,7 @@ The following example shows how to apply colors to scrollbars using {{cssxref("s
 #### CSS
 
 ```css hidden
-.scrollbox {
+.scroll-box {
   overflow: auto;
   width: 20rem;
   height: 5rem;
@@ -162,17 +162,17 @@ The following example shows how to apply colors to scrollbars using {{cssxref("s
 ```css
 /* For browsers that support `scrollbar-*` properties */
 @supports (scrollbar-color: auto) {
-  .scrollbox {
+  .scroll-box {
     scrollbar-color: aquamarine cornflowerblue;
   }
 }
 
 /* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
 @supports selector(::-webkit-scrollbar) {
-  .scrollbox::-webkit-scrollbar {
+  .scroll-box::-webkit-scrollbar {
     background: aquamarine;
   }
-  .scrollbox::-webkit-scrollbar-thumb {
+  .scroll-box::-webkit-scrollbar-thumb {
     background: cornflowerblue;
   }
 }

diff --git a/files/en-us/web/css/_doublecolon_part/index.md b/files/en-us/web/css/_doublecolon_part/index.md
@@ -15,7 +15,7 @@ custom-element::part(foo) {
 }
 ```
 
-## Descripton
+## Description
 
 The global [`part`](/en-US/docs/Web/HTML/Global_attributes/part) attribute makes a shadow tree element visible to its parent DOM. The part names declared using the `part` attribute are used as the parameter of the `::part()` pseudo-element. In this way, you can apply CSS styles to elements in the shadow tree from outside of it.
 

diff --git a/files/en-us/web/css/_doublecolon_slotted/index.md b/files/en-us/web/css/_doublecolon_slotted/index.md
@@ -100,7 +100,7 @@ Our markup includes three custom elements, including a custom element with an in
 
 <person-details>
   <span slot="person-age">44</span>
-  <span slot="not-a-slot-name">Time traveller</span>
+  <span slot="not-a-slot-name">Time traveler</span>
   <p slot="person-name">Dr. Who</p>
 </person-details>
 ```

diff --git a/files/en-us/web/css/animation-fill-mode/index.md b/files/en-us/web/css/animation-fill-mode/index.md
@@ -89,7 +89,7 @@ You can see the effect of `animation-fill-mode` in the following example. It dem
 ```html
 <p>Move your mouse over the gray box!</p>
 <div class="demo">
-  <div class="growsandstays">This grows and stays big.</div>
+  <div class="grows-and-stays">This grows and stays big.</div>
   <div class="grows">This just grows.</div>
 </div>
 ```
@@ -116,7 +116,7 @@ You can see the effect of `animation-fill-mode` in the following example. It dem
   animation-duration: 3s;
 }
 
-.demo:hover .growsandstays {
+.demo:hover .grows-and-stays {
   animation-name: grow;
   animation-duration: 3s;
   animation-fill-mode: forwards;

diff --git a/files/en-us/web/css/animation-timing-function/index.md b/files/en-us/web/css/animation-timing-function/index.md
@@ -262,9 +262,9 @@ The example demonstrates the effects of various bézier curve easing functions.
 <div class="parent">
   <div class="linear">linear</div>
   <div class="ease">ease</div>
-  <div class="easein">ease-in</div>
-  <div class="easeout">ease-out</div>
-  <div class="easeinout">ease-in-out</div>
+  <div class="ease-in">ease-in</div>
+  <div class="ease-out">ease-out</div>
+  <div class="ease-in-out">ease-in-out</div>
   <div class="cb">cubic-bezier(.5, -0.5, 1, 1.5)</div>
 </div>
 <div class="x-axis"><span>50%</span></div>
@@ -342,13 +342,13 @@ btn.addEventListener("click", () => {
 .ease {
   animation-timing-function: ease;
 }
-.easein {
+.ease-in {
   animation-timing-function: ease-in;
 }
-.easeout {
+.ease-out {
   animation-timing-function: ease-out;
 }
-.easeinout {
+.ease-in-out {
   animation-timing-function: ease-in-out;
 }
 .cb {

diff --git a/files/en-us/web/css/animation/index.md b/files/en-us/web/css/animation/index.md
@@ -30,15 +30,15 @@ This property is a shorthand for the following CSS properties:
 ```css
 /* @keyframes duration | easing-function | delay |
 iteration-count | direction | fill-mode | play-state | name */
-animation: 3s ease-in 1s 2 reverse both paused slidein;
+animation: 3s ease-in 1s 2 reverse both paused slide-in;
 
 /* @keyframes duration | easing-function | delay | name */
-animation: 3s linear 1s slidein;
+animation: 3s linear 1s slide-in;
 
 /* two animations */
 animation:
-  3s linear slidein,
-  3s ease-out 5s slideout;
+  3s linear slide-in,
+  3s ease-out 5s slide-out;
 ```
 
 The `animation` property is specified as one or more single animations, separated by commas.

diff --git a/files/en-us/web/css/backdrop-filter/index.md b/files/en-us/web/css/backdrop-filter/index.md
@@ -18,7 +18,7 @@ The **`backdrop-filter`** [CSS](/en-US/docs/Web/CSS) property lets you apply gra
 backdrop-filter: none;
 
 /* URL to SVG filter */
-backdrop-filter: url(commonfilters.svg#filter);
+backdrop-filter: url(common-filters.svg#filter);
 
 /* <filter-function> values */
 backdrop-filter: blur(2px);
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,7 +15,7 @@ custom-element::part(foo) { @@
     }
     ```
-    ## Descripton
+    ## Description
     The global [`part`](/en-US/docs/Web/HTML/Global_attributes/part) attribute makes a shadow tree element visible to its parent DOM. The part names declared using the `part` attribute are used as the parameter of the `::part()` pseudo-element. In this way, you can apply CSS styles to elements in the shadow tree from outside of it.
@@ Expand Down @@