[pull] main from mdn:main

files/en-us/glossary/color_space/index.md

@@ -25,7 +25,7 @@ There are several RGB color spaces, like the _Adobe RGB_ color space, that can r
 
 CSS `<color>` values in the sRGB color spaces include {{cssxref("hex-color")}}, {{cssxref("named-color")}}, {{cssxref("color_value/rgb", "rgb()")}}, {{cssxref("color_value/hsl", "hsl()")}} (hue, saturation, lightness), and {{cssxref("color_value/hwb", "hwb()")}} (hue, whiteness, blackness). There are also the `srgb`, `srgb-linear`, `a98-rgb`, and `prophoto-rgb` color spaces for the [`color()`](/en-US/docs/Web/CSS/color_value/color) function.
 
-The HSV (hue, saturation, and value) color space, and its synonym HSB (hue, saturation, and brightness), are represented in CSS as [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb). Named colors are simply keywords mapped to specific hex values. Converting these various color notations to sRGB is straightforward mathematically. Note that {{cssxref("&lt;color&gt;","currentcolor","#currentcolor_keyword")}} can be any color — it is not restricted to sRGB.
+The HSV (hue, saturation, and value) color space, and its synonym HSB (hue, saturation, and brightness), are represented in CSS as [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb). Named colors are simply keywords mapped to specific hex values. Converting these various color notations to sRGB is straightforward mathematically. Note that {{cssxref("&lt;color&gt;","currentColor","#currentcolor_keyword")}} can be any color — it is not restricted to sRGB.
 
 The `rgb()` color function is not the only color function that can represent the _sRGB_ color space. Cylindrical coordinate systems like the [`HSL`](/en-US/docs/Web/CSS/color_value/hsl) (_hue-saturation-lightness_) or [`HWB`](/en-US/docs/Web/CSS/color_value/hwb) (_hue-whiteness-blackness_) color models are also used to represent a sRGB color on the web.
 

files/en-us/learn_web_development/core/accessibility/test_your_skills/html/index.md

@@ -319,7 +319,7 @@ It would be arguably better to implement the background header image using CSS b
 
 ```css
 h1 {
-  background: url(https://mdn.github.io/shared-assets/images/examples/star-pink_32x32.png)
+  background: url("https://mdn.github.io/shared-assets/images/examples/star-pink_32x32.png")
     no-repeat left;
   padding-left: 50px;
 }

files/en-us/learn_web_development/core/challenges/index.md

@@ -250,7 +250,7 @@ The challenges on page [Media](/en-US/docs/Web/CSS/CSS_media_queries/Using_media
   - : Cut and paste the lines between `/* print only */` and `/* end print only */` into a file named `style4_print.css`. In style4.css, add the following line at the beginning of the file:
 
     ```css
-    @import url("style4_print.css") print;
+    @import "style4_print.css" print;
     ```
 
 ### Heading hover color

files/en-us/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md

@@ -523,7 +523,7 @@ body {
 }
 .c-cb > label::before {
   background: transparent;
-  border: 2px solid currentcolor;
+  border: 2px solid currentColor;
   content: "";
   position: absolute;
 }

files/en-us/learn_web_development/core/frameworks_libraries/svelte_stores/index.md

@@ -161,7 +161,7 @@ Let's now create our `Alert` component and see how we can read values from the s
    }
    div svg {
      height: 1.6rem;
-     fill: currentcolor;
+     fill: currentColor;
      width: 1.4rem;
      margin-right: 0.5rem;
    }

files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md

@@ -465,7 +465,7 @@ body {
     line-height: 1.31579;
   }
 }
-/*END RESETS*/
+/* END RESETS */
 
 /* GLOBAL STYLES */
 .form-group > input[type="text"] {
@@ -670,7 +670,7 @@ body {
 .c-cb > label::before {
   content: "";
   position: absolute;
-  border: 2px solid currentcolor;
+  border: 2px solid currentColor;
   background: transparent;
 }
 .c-cb > input[type="checkbox"]:focus + label::before {

files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md

@@ -61,7 +61,7 @@ While this tutorial will not be using such tools, it's good to know that when in
 Add the following contents to the `reset.css` file:
 
 ```css
-/*reset.css*/
+/* reset.css */
 /* RESETS */
 *,
 *::before,
@@ -137,7 +137,7 @@ body {
     line-height: 1.31579;
   }
 }
-/*END RESETS*/
+/* END RESETS */
 ```
 
 Next, in your `src/main.js` file, import the `reset.css` file like so:
@@ -420,7 +420,7 @@ Next, copy the following CSS into the newly created `<style>` element:
   left: 0;
   width: 40px;
   height: 40px;
-  border: 2px solid currentcolor;
+  border: 2px solid currentColor;
   background: transparent;
 }
 .custom-checkbox > input[type="checkbox"]:focus + label::before {

files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md

@@ -261,10 +261,10 @@ On to the next parameter. This one is going to involve slightly more work — we
 
    ```js
    if (msgType === "warning") {
-     msg.style.backgroundImage = "url(icons/warning.png)";
+     msg.style.backgroundImage = 'url("icons/warning.png")';
      panel.style.backgroundColor = "red";
    } else if (msgType === "chat") {
-     msg.style.backgroundImage = "url(icons/chat.png)";
+     msg.style.backgroundImage = 'url("icons/chat.png")';
      panel.style.backgroundColor = "aqua";
    } else {
      msg.style.paddingLeft = "20px";

files/en-us/learn_web_development/core/styling_basics/advanced_styling_effects/index.md

@@ -301,7 +301,7 @@ div {
   padding: 10px;
   margin: 10px;
   display: inline-block;
-  background: url(colorful-heart.png) no-repeat center 20px;
+  background: url("colorful-heart.png") no-repeat center 20px;
   background-color: green;
 }
 
@@ -354,7 +354,7 @@ article div:first-child {
   position: absolute;
   top: 10px;
   left: 0;
-  background: url(colorful-heart.png) no-repeat center 20px;
+  background: url("colorful-heart.png") no-repeat center 20px;
   background-color: green;
 }
 
@@ -454,7 +454,7 @@ h2 {
 h2 {
   color: white;
   display: inline-block;
-  background: url(colorful-heart.png) no-repeat center;
+  background: url("colorful-heart.png") no-repeat center;
 }
 
 .text-clip {

files/en-us/learn_web_development/core/styling_basics/backgrounds_and_borders/index.md

@@ -94,11 +94,11 @@ This example demonstrates two things about background images. By default, the la
 }
 
 .a {
-  background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
+  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
 }
 
 .b {
-  background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png);
+  background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
 }
 ```
 
@@ -136,7 +136,7 @@ Try these values out in the example below. We have set the value to `no-repeat`
 
 ```css live-sample___repeat
 .box {
-  background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png);
+  background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
   background-repeat: no-repeat;
 }
 ```
@@ -178,7 +178,7 @@ Try the following:
 
 ```css live-sample___size
 .box {
-  background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
+  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
   background-repeat: no-repeat;
   background-size: 80px 10em;
 }
@@ -197,7 +197,7 @@ The most common `background-position` values take two individual values — a ho
 
 ```css
 .box {
-  background-image: url(image.png);
+  background-image: url("image.png");
   background-repeat: no-repeat;
   background-position: top center;
 }
@@ -207,7 +207,7 @@ You can also use {{cssxref("length", "lengths")}} and {{cssxref("percentage", "p
 
 ```css
 .box {
-  background-image: url(image.png);
+  background-image: url("image.png");
   background-repeat: no-repeat;
   background-position: 20px 10%;
 }
@@ -217,7 +217,7 @@ You can also mix keyword values with lengths or percentages, in which case the f
 
 ```css
 .box {
-  background-image: url(image.png);
+  background-image: url("image.png");
   background-repeat: no-repeat;
   background-position: 20px top;
 }
@@ -227,7 +227,7 @@ Finally, you can also use a 4-value syntax to indicate a distance from certain e
 
 ```css
 .box {
-  background-image: url(image.png);
+  background-image: url("image.png");
   background-repeat: no-repeat;
   background-position: top 20px right 10px;
 }
@@ -253,7 +253,7 @@ Use the example below to play around with these values and move the star around
 
 ```css live-sample___position
 .box {
-  background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png);
+  background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
   background-repeat: no-repeat;
   background-position: 120px 1em;
 }
@@ -328,7 +328,7 @@ The other `background-*` properties can also have comma-separated values in the
 
 ```css
 background-image:
-  url(image1.png), url(image2.png), url(image3.png), url(image4.png);
+  url("image1.png"), url("image2.png"), url("image3.png"), url("image4.png");
 background-repeat: no-repeat, repeat-x, repeat;
 background-position:
   10px 20px,
@@ -366,8 +366,8 @@ Let's play. The example below includes two background images. Try editing the ex
 
 .box {
   background-image:
-    url(https://mdn.github.io/shared-assets/images/examples/star.png),
-    url(https://mdn.github.io/shared-assets/images/examples/big-star.png);
+    url("https://mdn.github.io/shared-assets/images/examples/star.png"),
+    url("https://mdn.github.io/shared-assets/images/examples/big-star.png");
 }
 ```
 
@@ -412,8 +412,8 @@ Take a look at the MDN page for {{cssxref("background")}} to learn more about th
         rgb(51 56 57 / 100%) 96%
       )
       center center / 400px 200px no-repeat,
-    url(https://mdn.github.io/shared-assets/images/examples/big-star.png) center
-      no-repeat,
+    url("https://mdn.github.io/shared-assets/images/examples/big-star.png")
+      center no-repeat,
     rebeccapurple;
 }
 ```

files/en-us/learn_web_development/core/styling_basics/cascade_layers/index.md

@@ -301,24 +301,24 @@ When importing stylesheets, the `@import` statement must be defined before any C
 You can import a stylesheet into a named layer, a nested named layer, or an anonymous layer. The following layer imports the style sheets into a `components` layer, a nested `dialog` layer within the `components` layer, and an un-named layer, respectively:
 
 ```css
-@import url("components-lib.css") layer(components);
-@import url("dialog.css") layer(components.dialog);
-@import url("marketing.css") layer();
+@import "components-lib.css" layer(components);
+@import "dialog.css" layer(components.dialog);
+@import "marketing.css" layer();
 ```
 
 You can import more than one CSS file into a single layer. The following declaration imports two separate files into a single `social` layer:
 
 ```css
-@import url(comments.css) layer(social);
-@import url(sm-icons.css) layer(social);
+@import "comments.css" layer(social);
+@import "sm-icons.css" layer(social);
 ```
 
 You can import styles and create layers based on specific conditions using [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) and [feature queries](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries). The following imports a style sheet into an `international` layer only if the browser supports `display: ruby`, and the file being imported is dependent on the width of the screen.
 
 ```css
-@import url("ruby-narrow.css") layer(international) supports(display: ruby)
+@import "ruby-narrow.css" layer(international) supports(display: ruby)
   (width < 32rem);
-@import url("ruby-wide.css") layer(international) supports(display: ruby)
+@import "ruby-wide.css" layer(international) supports(display: ruby)
   (width >= 32rem);
 ```
 
@@ -342,8 +342,8 @@ If you nest a block `@layer` at-rule inside another block `@layer` at-rule, with
 Let's look at the following example:
 
 ```css
-@import url("components-lib.css") layer(components);
-@import url("narrow-theme.css") layer(components.narrow);
+@import "components-lib.css" layer(components);
+@import "narrow-theme.css" layer(components.narrow);
 ```
 
 In the first line, we import `components-lib.css` into the `components` layer. If that file contains any layers, named or not, those layers become nested layers within the `components` layer.
@@ -353,7 +353,7 @@ The second line imports `narrow-theme.css` into the `narrow` layer, which is a s
 Let's look at another example, where we [import `layers1.css` into a named layer](#the_layer_block_at-rule_for_named_and_anonymous_layers) using the following statement:
 
 ```css
-@import url(layers1.css) layer(example);
+@import "layers1.css" layer(example);
 ```
 
 This will create a single layer named `example` containing some declarations and five nested layers - `example.layout`, `example.<anonymous(01)>`, `example.theme`, `example.utilities`, and `example.<anonymous(02)>`.
@@ -375,9 +375,9 @@ The order of layers determines their order of precedence. Therefore, the order o
 ### Precedence order of regular cascade layers
 
 ```css
-@import url(A.css) layer(firstLayer);
-@import url(B.css) layer(secondLayer);
-@import url(C.css);
+@import "A.css" layer(firstLayer);
+@import "B.css" layer(secondLayer);
+@import "C.css";
 ```
 
 The above code creates two named layers (C.css styles get appended to the implicit layer of unlayered styles). Let us assume that the three files (`A.css`, `B.css`, and `C.css`) do not contain any additional layers within them. The following list shows where styles declared inside and outside of these files will be sorted from least (1) precedence to highest (10).

files/en-us/learn_web_development/core/styling_basics/getting_started/index.md

@@ -497,14 +497,14 @@ padding-left: 5px;
 This one line:
 
 ```css
-background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
+background: red url("bg-graphic.png") 10px 10px repeat-x fixed;
 ```
 
 is equivalent to these five lines:
 
 ```css
 background-color: red;
-background-image: url(bg-graphic.png);
+background-image: url("bg-graphic.png");
 background-position: 10px 10px;
 background-repeat: repeat-x;
 background-attachment: fixed;
@@ -563,9 +563,9 @@ div p + p {
 "Commenting out" code is also useful for temporarily disabling sections of code for testing. In the example below, the rules for `.special` are disabled by "commenting out" the code.
 
 ```css
-/*.special {
+/* .special {
   color: red;
-}*/
+} */
 
 p {
   color: blue;

files/en-us/learn_web_development/core/styling_basics/tables/index.md

@@ -118,7 +118,7 @@ We need to use some CSS to fix this up. You can style a table in any way you wan
 
 ```css hidden live-sample___styled
 /* font import */
-@import url("https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap");
+@import "https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap";
 
 /* spacing */
 table {
@@ -182,7 +182,7 @@ tfoot th {
 /* graphics */
 thead,
 tfoot {
-  background: url(https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/leopardskin.jpg);
+  background: url("https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/leopardskin.jpg");
   color: white;
 }
 
@@ -203,7 +203,7 @@ tbody tr:nth-child(even) {
 }
 
 tbody tr {
-  background-image: url(https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/noise.png);
+  background-image: url("https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/noise.png");
 }
 
 table {

files/en-us/learn_web_development/core/styling_basics/test_your_skills/backgrounds_and_borders/index.md

@@ -69,7 +69,7 @@ You should use `border`, `border-radius`, `background-image`, and `background-si
 .box {
   border: 5px solid #000;
   border-radius: 10px;
-  background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
+  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
   background-size: cover;
 }
 
@@ -148,9 +148,9 @@ h2 {
   padding: 0 40px;
   text-align: center;
   background:
-    url(https://mdn.github.io/shared-assets/images/examples/star.png) no-repeat
-      left center,
-    url(https://mdn.github.io/shared-assets/images/examples/star.png) repeat-y
+    url("https://mdn.github.io/shared-assets/images/examples/star.png")
+      no-repeat left center,
+    url("https://mdn.github.io/shared-assets/images/examples/star.png") repeat-y
       right center;
 }
 ```

files/en-us/learn_web_development/core/styling_basics/test_your_skills/values/index.md

@@ -176,7 +176,7 @@ Your final result should look like the image below:
 }
 
 .box {
-  background-image: url(https://mdn.github.io/shared-assets/images/examples/purple-star.png);
+  background-image: url("https://mdn.github.io/shared-assets/images/examples/purple-star.png");
   background-repeat: no-repeat;
 }
 ```
@@ -190,7 +190,7 @@ Use `background-position` with the `center` keyword and a percentage:
 
 ```css
 .box {
-  background-image: url(https://mdn.github.io/shared-assets/images/examples/purple-star.png);
+  background-image: url("https://mdn.github.io/shared-assets/images/examples/purple-star.png");
   background-repeat: no-repeat;
   background-position: center 20%;
 }