Fix typos and pseudo-typos 7 (#36248)

* Fix typos and pseudo-typos 7

* Update index.md

files/en-us/web/css/custom-ident/index.md

@@ -136,17 +136,17 @@ ground-level      A mix of alphanumeric characters and a dash
 -test             A dash followed by alphanumeric characters
 _internal         An underscore followed by alphanumeric characters
 \22 toto          A Unicode character followed by a sequence of alphanumeric characters
-bili\.bob         A correctly escaped period
+scooby\.doo       A correctly escaped period
 ```
 
 ### Invalid identifiers
 
 ```plain example-bad
 34rem             It must not start with a decimal digit.
 -12rad            It must not start with a dash followed by a decimal digit.
-bili.bob          Only alphanumeric characters, _, and - needn't be escaped.
-'bilibob'         This would be a <string>.
-"bilibob"         This would be a <string>.
+scooby.doo        Only alphanumeric characters, _, and - needn't be escaped.
+'scoobyDoo'       This would be a <string>.
+"scoobyDoo"       This would be a <string>.
 ```
 
 ## Specifications

files/en-us/web/css/display-box/index.md

@@ -108,4 +108,4 @@ In this example the outer {{htmlelement("div")}} has a 2-pixel red border and a
   - {{CSSxRef("<display-legacy>")}}
 
 - [Display: Contents Is Not a CSS Reset | Adrian Roselli](https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)
-- [More accessible markup with display: contents — hiddedevries.nl](https://hidde.blog/more-accessible-markup-with-display-contents/)
+- [More accessible markup with display: contents](https://hidde.blog/more-accessible-markup-with-display-contents/) by Hidde de Vries (2018)

files/en-us/web/css/field-sizing/index.md

@@ -47,7 +47,7 @@ Specifically, `field-sizing` to `content` affects the following elements:
   - If no minimum width is set on the control, it will only be as wide as the text cursor.
   - Controls with [`placeholder`](/en-US/docs/Web/HTML/Element/input#placeholder) attributes will be rendered large enough to display the placeholder text.
   - The [`size`](/en-US/docs/Web/HTML/Element/input#size) attribute modifies the default preferred size of such `<input>` elements. As a result, `size` has no effect on `<input>` elements with `field-sizing: content` set.
-- [`file`](/en-US/docs/Web/HTML/Element/input/file) inputs. Direct text input is not possible; however, the displayed filename changes as the user selects a new file to upload. When `field-sizing: content` is set, the control will change size to shrinkwap the filename.
+- [`file`](/en-US/docs/Web/HTML/Element/input/file) inputs. Direct text input is not possible; however, the displayed filename changes as the user selects a new file to upload. When `field-sizing: content` is set, the control will change size to shrinkwrap the filename.
 - {{htmlelement("textarea")}} controls. It is worth noting that `<textarea>` elements with `field-sizing: content` set behave much like single-line text controls, with the following additions:
   - If `<textarea>` elements are unable to grow due to a width constraint, they will start to grow in height to display additional rows of content. When a height constraint is then reached, they will then start to show a scrollbar to allow all the content to be viewed.
   - [`rows`](/en-US/docs/Web/HTML/Element/textarea#cols) and [`cols`](/en-US/docs/Web/HTML/Element/textarea#cols) attributes modify the default preferred size of a `<textarea>`. As a result, `rows`/`cols` have no effect on `<textarea>` elements with `field-sizing: content` set.

files/en-us/web/css/fill-opacity/index.md

@@ -60,7 +60,7 @@ This example demonstrates the basic use case of `fill-opacity`, and how the CSS
 We include several different SVG graphic elements and set the `fill-opacity` attribute of each one to `1` (except `line`), meaning the fill of each element is opaque. The `fill-opacity` SVG attribute does not apply to {{SVGElement("line")}}.
 
 ```html
-<svg viewbox="0 0 100 150" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 100 150" xmlns="http://www.w3.org/2000/svg">
   <rect x="10" y="10" width="30" height="30" fill-opacity="1" />
   <rect x="60" y="10" rx="10" ry="10" width="30" height="30" fill-opacity="1" />
   <circle cx="25" cy="75" r="20" fill-opacity="1" />

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

@@ -22,7 +22,7 @@ The `<flex>` data type is specified as a {{cssxref("&lt;number&gt;")}} followed
 2.5fr  /* Using a float value */
 ```
 
-### Example of use in a tracklisting for CSS grid layout
+### Example of use in a track listing for CSS grid layout
 
 ```css
 .grid {

files/en-us/web/css/font-feature-settings/index.md

@@ -65,27 +65,27 @@ This property is specified as either the keyword `normal` or as a comma-separate
 
 ```css
 /* use small-cap alternate glyphs */
-.smallcaps {
+.small-caps {
   font-feature-settings: "smcp" on;
 }
 
 /* convert both upper and lowercase to small caps (affects punctuation also) */
-.allsmallcaps {
+.all-small-caps {
   font-feature-settings: "c2sc", "smcp";
 }
 
 /* use zeros with a slash through them to differentiate from "O" */
-.nicezero {
+.nice-zero {
   font-feature-settings: "zero";
 }
 
 /* enable historical forms */
-.hist {
+.historical {
   font-feature-settings: "hist";
 }
 
 /* disable common ligatures, usually on by default */
-.noligs {
+.no-ligatures {
   font-feature-settings: "liga" 0;
 }
 
@@ -105,7 +105,7 @@ td.tabular {
 }
 
 /* enable stylistic set 7 */
-.fancystyle {
+.fancy-style {
   font-family: Gabriola;
   font-feature-settings: "ss07";
 }

files/en-us/web/css/font-kerning/index.md

@@ -57,7 +57,7 @@ font-kerning: unset;
 
 ```html
 <div id="kern"></div>
-<div id="nokern"></div>
+<div id="no-kern"></div>
 <textarea id="input">AV T. ij</textarea>
 ```
 
@@ -69,7 +69,7 @@ div {
   font-family: serif;
 }
 
-#nokern {
+#no-kern {
   font-kerning: none;
 }
 
@@ -83,15 +83,15 @@ div {
 ```js
 const input = document.getElementById("input");
 const kern = document.getElementById("kern");
-const nokern = document.getElementById("nokern");
+const noKern = document.getElementById("no-kern");
 
 input.addEventListener("keyup", () => {
   kern.textContent = input.value; /* Update content */
-  nokern.textContent = input.value;
+  noKern.textContent = input.value;
 });
 
 kern.textContent = input.value; /* Initialize content */
-nokern.textContent = input.value;
+noKern.textContent = input.value;
 ```
 
 {{ EmbedLiveSample('Enabling_and_disabling_kerning') }}

files/en-us/web/css/font-size-adjust/index.md

@@ -108,11 +108,11 @@ Similarly, the cap-height to font size ratio in Verdana is `0.73` and that in Ti
 <p class="times">
   B: This text uses the Times font (14px), which is hard to read in small sizes.
 </p>
-<p class="times adjtimesexheight">
+<p class="times adj-times-ex-height">
   C: This text in 14px Times font is adjusted to the same aspect value as the
   Verdana font, so lowercase letters are normalized across the two fonts.
 </p>
-<p class="times adjtimescapheight">
+<p class="times adj-times-cap-height">
   D: This text in 14px Times font is adjusted to the same cap-height to font
   size ratio as the Verdana font, so uppercase letters are normalized across the
   two fonts.
@@ -130,11 +130,11 @@ Similarly, the cap-height to font size ratio in Verdana is `0.73` and that in Ti
   font-size: 14px;
 }
 
-.adjtimesexheight {
+.adj-times-ex-height {
   font-size-adjust: 0.545;
 }
 
-.adjtimescapheight {
+.adj-times-cap-height {
   font-size-adjust: cap-height 0.73;
 }
 ```

files/en-us/web/css/font-variant-emoji/index.md

@@ -68,12 +68,12 @@ This example shows how you can render an emoji in its `text` or `emoji` presenta
 #### HTML
 
 ```html hidden
-<p class="nosupport">
+<p class="no-support">
   Your Browser does not support <code>font-variant-emoji</code>. This image
   shows how it is rendered with support.
 </p>
 <img
-  class="nosupport"
+  class="no-support"
   src="./font-variant-emoji-example.jpg"
   alt="a telephone emoji show as text, black and white next to a telephone emoji shown as emoji full color and graphical representation" />
 ```
@@ -95,7 +95,7 @@ This example shows how you can render an emoji in its `text` or `emoji` presenta
 
 ```css hidden
 @supports (font-variant-emoji: emoji) {
-  .nosupport {
+  .no-support {
     display: none;
   }
   .emojis {

files/en-us/web/css/font-variation-settings/index.md

@@ -18,7 +18,7 @@ The **`font-variation-settings`** [CSS](/en-US/docs/Web/CSS) property provides l
 font-variation-settings: normal;
 
 /* Set values for variable font axis names */
-font-variation-settings: "XHGT" 0.7;
+font-variation-settings: "xhgt" 0.7;
 
 /* Global values */
 font-variation-settings: inherit;

files/en-us/web/css/grid-column-end/index.md

@@ -18,16 +18,16 @@ The **`grid-column-end`** [CSS](/en-US/docs/Web/CSS) property specifies a grid i
 grid-column-end: auto;
 
 /* <custom-ident> values */
-grid-column-end: somegridarea;
+grid-column-end: some-grid-area;
 
 /* <integer> + <custom-ident> values */
 grid-column-end: 2;
-grid-column-end: somegridarea 4;
+grid-column-end: some-grid-area 4;
 
 /* span + <integer> + <custom-ident> values */
 grid-column-end: span 3;
-grid-column-end: span somegridarea;
-grid-column-end: 5 somegridarea span;
+grid-column-end: span some-grid-area;
+grid-column-end: 5 some-grid-area span;
 
 /* Global values */
 grid-column-end: inherit;

files/en-us/web/css/grid-column-start/index.md

@@ -18,16 +18,16 @@ The **`grid-column-start`** [CSS](/en-US/docs/Web/CSS) property specifies a grid
 grid-column-start: auto;
 
 /* <custom-ident> value */
-grid-column-start: somegridarea;
+grid-column-start: some-grid-area;
 
 /* <integer> + <custom-ident> values */
 grid-column-start: 2;
-grid-column-start: somegridarea 4;
+grid-column-start: some-grid-area 4;
 
 /* span + <integer> + <custom-ident> values */
 grid-column-start: span 3;
-grid-column-start: span somegridarea;
-grid-column-start: span somegridarea 5;
+grid-column-start: span some-grid-area;
+grid-column-start: span some-grid-area 5;
 
 /* Global values */
 grid-column-start: inherit;

files/en-us/web/css/grid-column/index.md

@@ -26,20 +26,20 @@ grid-column: auto;
 grid-column: auto / auto;
 
 /* <custom-ident> values */
-grid-column: somegridarea;
-grid-column: somegridarea / someothergridarea;
+grid-column: some-grid-area;
+grid-column: some-grid-area / some-other-grid-area;
 
 /* <integer> + <custom-ident> values */
-grid-column: somegridarea 4;
-grid-column: 4 somegridarea / 6;
+grid-column: some-grid-area 4;
+grid-column: 4 some-grid-area / 6;
 
 /* span + <integer> + <custom-ident> values */
 grid-column: span 3;
-grid-column: span somegridarea;
-grid-column: 5 somegridarea span;
+grid-column: span some-grid-area;
+grid-column: 5 some-grid-area span;
 grid-column: span 3 / 6;
-grid-column: span somegridarea / span someothergridarea;
-grid-column: 5 somegridarea span / 2 span;
+grid-column: span some-grid-area / span some-other-grid-area;
+grid-column: 5 some-grid-area span / 2 span;
 
 /* Global values */
 grid-column: inherit;

files/en-us/web/css/grid-row-end/index.md

@@ -18,16 +18,16 @@ The **`grid-row-end`** [CSS](/en-US/docs/Web/CSS) property specifies a grid item
 grid-row-end: auto;
 
 /* <custom-ident> values */
-grid-row-end: somegridarea;
+grid-row-end: some-grid-area;
 
 /* <integer> + <custom-ident> values */
 grid-row-end: 2;
-grid-row-end: somegridarea 4;
+grid-row-end: some-grid-area 4;
 
 /* span + <integer> + <custom-ident> values */
 grid-row-end: span 3;
-grid-row-end: span somegridarea;
-grid-row-end: 5 somegridarea span;
+grid-row-end: span some-grid-area;
+grid-row-end: 5 some-grid-area span;
 
 /* Global values */
 grid-row-end: inherit;

files/en-us/web/css/grid-row-start/index.md

@@ -18,16 +18,16 @@ The **`grid-row-start`** [CSS](/en-US/docs/Web/CSS) property specifies a grid it
 grid-row-start: auto;
 
 /* <custom-ident> values */
-grid-row-start: somegridarea;
+grid-row-start: some-grid-area;
 
 /* <integer> + <custom-ident> values */
 grid-row-start: 2;
-grid-row-start: somegridarea 4;
+grid-row-start: some-grid-area 4;
 
 /* span + <integer> + <custom-ident> values */
 grid-row-start: span 3;
-grid-row-start: span somegridarea;
-grid-row-start: 5 somegridarea span;
+grid-row-start: span some-grid-area;
+grid-row-start: 5 some-grid-area span;
 
 /* Global values */
 grid-row-start: inherit;

files/en-us/web/css/grid-row/index.md

@@ -26,20 +26,20 @@ grid-row: auto;
 grid-row: auto / auto;
 
 /* <custom-ident> values */
-grid-row: somegridarea;
-grid-row: somegridarea / someothergridarea;
+grid-row: some-grid-area;
+grid-row: some-grid-area / some-other-grid-area;
 
 /* <integer> + <custom-ident> values */
-grid-row: somegridarea 4;
-grid-row: 4 somegridarea / 6;
+grid-row: some-grid-area 4;
+grid-row: 4 some-grid-area / 6;
 
 /* span + <integer> + <custom-ident> values */
 grid-row: span 3;
-grid-row: span somegridarea;
-grid-row: 5 somegridarea span;
+grid-row: span some-grid-area;
+grid-row: 5 some-grid-area span;
 grid-row: span 3 / 6;
-grid-row: span somegridarea / span someothergridarea;
-grid-row: 5 somegridarea span / 2 span;
+grid-row: span some-grid-area / span some-other-grid-area;
+grid-row: 5 some-grid-area span / 2 span;
 
 /* Global values */
 grid-row: inherit;

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

@@ -19,8 +19,8 @@ grid-template-columns: none;
 
 /* <track-list> values */
 grid-template-columns: 100px 1fr;
-grid-template-columns: [linename] 100px;
-grid-template-columns: [linename1] 100px [linename2 linename3];
+grid-template-columns: [line-name] 100px;
+grid-template-columns: [line-name1] 100px [line-name2 line-name3];
 grid-template-columns: minmax(100px, 1fr);
 grid-template-columns: fit-content(40%);
 grid-template-columns: repeat(3, 200px);
@@ -33,12 +33,12 @@ grid-template-columns:
   minmax(100px, max-content)
   repeat(auto-fill, 200px) 20%;
 grid-template-columns:
-  [linename1] 100px [linename2]
-  repeat(auto-fit, [linename3 linename4] 300px)
+  [line-name1] 100px [line-name2]
+  repeat(auto-fit, [line-name3 line-name4] 300px)
   100px;
 grid-template-columns:
-  [linename1 linename2] 100px
-  repeat(auto-fit, [linename1] 300px) [linename3];
+  [line-name1 line-name2] 100px
+  repeat(auto-fit, [line-name1] 300px) [line-name3];
 
 /* Global values */
 grid-template-columns: inherit;
@@ -52,7 +52,7 @@ grid-template-columns: unset;
 
 - `none`
   - : Indicates that there is no explicit grid. Any columns will be implicitly generated and their size will be determined by the {{cssxref("grid-auto-columns")}} property.
-- `[linename]`
+- `[line-name]`
   - : A [`<custom-ident>`](/en-US/docs/Web/CSS/custom-ident) specifying a name for the line in that location. The ident may be any valid string other than the reserved words `span` and `auto`. Lines may have multiple names separated by a space inside the square brackets, for example `[line-name-a line-name-b]`.
 - {{cssxref("&lt;length&gt;")}}
   - : A non-negative length, giving the width of the column.