Merge branch 'main' of github.com:Tenkir/content into main

mdn · Jan 2, 2024 · db546bb · db546bb
2 parents ea7dcba + 427dd2d
commit db546bb
Show file tree

Hide file tree

Showing 71 changed files with 200 additions and 202 deletions.
diff --git a/files/en-us/web/css/--_star_/index.md b/files/en-us/web/css/--_star_/index.md
@@ -18,7 +18,7 @@ Custom properties are scoped to the element(s) they are declared on, and partici
 ```css
 --somekeyword: left;
 --somecolor: #0000ff;
---somecomplexvalue: 3px 6px rgb(20, 32, 54);
+--somecomplexvalue: 3px 6px rgb(20 32 54);
 ```
 
 - `<declaration-value>`

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
@@ -15,7 +15,7 @@ The **`-webkit-text-stroke-color`** CSS property specifies the stroke [color](/e
 /* <color> values */
 -webkit-text-stroke-color: red;
 -webkit-text-stroke-color: #e08ab4;
--webkit-text-stroke-color: rgb(200, 100, 0);
+-webkit-text-stroke-color: rgb(200 100 0);
 
 /* Global values */
 -webkit-text-stroke-color: inherit;

diff --git a/files/en-us/web/css/@font-palette-values/override-colors/index.md b/files/en-us/web/css/@font-palette-values/override-colors/index.md
@@ -22,7 +22,7 @@ override-colors: 0 red;
 override-colors: 0 #f00;
 
 /* using rgb */
-override-colors: 0 rgb(255, 0, 0);
+override-colors: 0 rgb(255 0 0);
 
 /* overriding multiple colors */
 override-colors:
@@ -103,11 +103,11 @@ This example shows how to override colors in the [Noto Color Emoji](https://font
 @font-palette-values --red {
   font-family: "Noto Color Emoji";
   override-colors:
-    0 rgb(74, 11, 0),
-    1 rgb(149, 22, 1),
-    2 rgb(183, 27, 1),
-    3 rgb(193, 28, 1),
-    4 rgb(230, 34, 1);
+    0 rgb(74 11 0),
+    1 rgb(149 22 1),
+    2 rgb(183 27 1),
+    3 rgb(193 28 1),
+    4 rgb(230 34 1);
 }
 .red-hat {
   font-palette: --red;

diff --git a/files/en-us/web/css/@starting-style/index.md b/files/en-us/web/css/@starting-style/index.md
@@ -262,7 +262,7 @@ html {
 
 /* Transition for the popover's backdrop */
 [popover]::backdrop {
-  background-color: rgb(0 0 0 / 0);
+  background-color: rgb(0 0 0 / 0%);
   transition:
     display 0.7s allow-discrete,
     overlay 0.7s allow-discrete,
@@ -272,14 +272,14 @@ html {
 }
 
 [popover]:popover-open::backdrop {
-  background-color: rgb(0 0 0 / 0.25);
+  background-color: rgb(0 0 0 / 25%);
 }
 
 /* Nesting (&) is not supported for pseudo-elements
 so specify a standalone starting-style block. */
 @starting-style {
   [popover]:popover-open::backdrop {
-    background-color: rgb(0 0 0 / 0);
+    background-color: rgb(0 0 0 / 0%);
   }
 }
 ```
@@ -398,8 +398,8 @@ div {
   position: relative;
   background: linear-gradient(
     to right,
-    rgb(255 255 255 / 0),
-    rgb(255 255 255 / 0.5)
+    rgb(255 255 255 / 0%),
+    rgb(255 255 255 / 50%)
   );
   opacity: 1;
   scale: 1 1;

diff --git a/files/en-us/web/css/_colon_autofill/index.md b/files/en-us/web/css/_colon_autofill/index.md
@@ -14,7 +14,7 @@ The **`:autofill`** CSS [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) match
 > **Note:** The user agent style sheets of many browsers use `!important` in their `:-webkit-autofill` style declarations, making them non-overridable by webpages without resorting to JavaScript hacks. For example Chrome has the following in its internal stylesheet:
 >
 > ```css
-> background-color: rgb(232, 240, 254) !important;
+> background-color: rgb(232 240 254) !important;
 > background-image: none !important;
 > color: -internal-light-dark(black, white) !important;
 > ```

diff --git a/files/en-us/web/css/_colon_has/index.md b/files/en-us/web/css/_colon_has/index.md
@@ -83,7 +83,7 @@ h2 {
 
 h2 {
   font-size: 1em;
-  color: rgb(150, 149, 149);
+  color: rgb(150 149 149);
 }
 ```
 
@@ -152,7 +152,7 @@ h1 {
 
 h2 {
   font-size: 1em;
-  color: rgb(150, 149, 149);
+  color: rgb(150 149 149);
 }
 
 h3 {

diff --git a/files/en-us/web/css/_colon_host-context/index.md b/files/en-us/web/css/_colon_host-context/index.md
@@ -73,7 +73,7 @@ style.textContent =
   ":host-context(h1) { font-style: italic; }" +
   ':host-context(h1):after { content: " - no links in headers!" }' +
   ":host(.footer) { color : red; }" +
-  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
+  ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
 ```
 
 The `:host-context(h1) { font-style: italic; }` and `:host-context(h1):after { content: " - no links in headers!" }` rules style the instance of the `<context-span>` element (the shadow host in this instance) inside the `<h1>`. We've used it to make it clear that the custom element shouldn't appear inside the `<h1>` in our design.

diff --git a/files/en-us/web/css/_colon_host/index.md b/files/en-us/web/css/_colon_host/index.md
@@ -59,10 +59,10 @@ style.textContent =
   ':host-context(h1):after { content: " - no links in headers!" }' +
   ":host-context(article, aside) { color: gray; }" +
   ":host(.footer) { color : red; }" +
-  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
+  ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
 ```
 
-The `:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }` rule styles all instances of the `<context-span>` element (the shadow host in this instance) in the document.
+The `:host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }` rule styles all instances of the `<context-span>` element (the shadow host in this instance) in the document.
 
 ## Specifications
 

diff --git a/files/en-us/web/css/_colon_host_function/index.md b/files/en-us/web/css/_colon_host_function/index.md
@@ -62,7 +62,7 @@ style.textContent =
   ':host-context(h1):after { content: " - no links in headers!" }' +
   ":host-context(article, aside) { color: gray; }" +
   ":host(.footer) { color : red; }" +
-  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
+  ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
 ```
 
 The `:host(.footer) { color : red; }` rule styles all instances of the `<context-span>` element (the shadow host in this instance) in the document that have the `footer` class set on them — we've used it to give instances of the element inside the {{htmlelement("footer")}} a special color.

diff --git a/files/en-us/web/css/_colon_in-range/index.md b/files/en-us/web/css/_colon_in-range/index.md
@@ -60,11 +60,11 @@ input {
 }
 
 input:in-range {
-  background-color: rgba(0, 255, 0, 0.25);
+  background-color: rgb(0 255 0 / 25%);
 }
 
 input:out-of-range {
-  background-color: rgba(255, 0, 0, 0.25);
+  background-color: rgb(255 0 0 / 25%);
   border: 2px solid red;
 }
 

diff --git a/files/en-us/web/css/_colon_modal/index.md b/files/en-us/web/css/_colon_modal/index.md
@@ -65,7 +65,7 @@ This example styles a modal dialog that opens when the "Update details" button i
 :modal {
   border: 5px solid red;
   background-color: yellow;
-  box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
+  box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);
 }
 ```
 

diff --git a/files/en-us/web/css/_colon_out-of-range/index.md b/files/en-us/web/css/_colon_out-of-range/index.md
@@ -59,11 +59,11 @@ input {
 }
 
 input:in-range {
-  background-color: rgba(0, 255, 0, 0.25);
+  background-color: rgb(0 255 0 / 25%);
 }
 
 input:out-of-range {
-  background-color: rgba(255, 0, 0, 0.25);
+  background-color: rgb(255 0 0 / 25%);
   border: 2px solid red;
 }
 

diff --git a/files/en-us/web/css/_doublecolon_-webkit-meter-bar/index.md b/files/en-us/web/css/_doublecolon_-webkit-meter-bar/index.md
@@ -48,7 +48,7 @@ body {
 
 #styled::-webkit-meter-bar {
   background: #eee;
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0 2px 3px rgb(0 0 0 / 20%) inset;
   border-radius: 3px;
 }
 ```

diff --git a/files/en-us/web/css/_doublecolon_backdrop/index.md b/files/en-us/web/css/_doublecolon_backdrop/index.md
@@ -32,7 +32,7 @@ When multiple elements have been placed into the top layer, each one has its own
 ```css
 /* Backdrop is only displayed when dialog is opened with dialog.showModal() */
 dialog::backdrop {
-  background: rgba(255, 0, 0, 0.25);
+  background: rgb(255 0 0 / 25%);
 }
 ```
 

diff --git a/files/en-us/web/css/_doublecolon_cue/index.md b/files/en-us/web/css/_doublecolon_cue/index.md
@@ -68,7 +68,7 @@ The following CSS sets the cue style so that the text is white and the backgroun
 ```css
 ::cue {
   color: #fff;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgb(0 0 0 / 60%);
 }
 ```
 

diff --git a/files/en-us/web/css/_doublecolon_part/index.md b/files/en-us/web/css/_doublecolon_part/index.md
@@ -71,7 +71,7 @@ tabbed-custom-element::part(tab):focus {
   box-shadow:
     0 0 0 1px #0a84ff inset,
     0 0 0 1px #0a84ff,
-    0 0 0 4px rgba(10, 132, 255, 0.3);
+    0 0 0 4px rgb(10 132 255 / 30%);
 }
 
 tabbed-custom-element::part(active) {

diff --git a/files/en-us/web/css/_doublecolon_view-transition/index.md b/files/en-us/web/css/_doublecolon_view-transition/index.md
@@ -36,7 +36,7 @@ All {{cssxref("::view-transition-group")}} pseudo-elements are positioned relati
 
 ```css
 ::view-transition {
-  background-color: rgba(0, 0, 0, 0.25);
+  background-color: rgb(0 0 0 / 25%);
 }
 ```
 

diff --git a/files/en-us/web/css/backdrop-filter/index.md b/files/en-us/web/css/backdrop-filter/index.md
@@ -64,7 +64,7 @@ backdrop-filter: unset;
 
 ```css
 .box {
-  background-color: rgb(255 255 255 / 0.3);
+  background-color: rgb(255 255 255 / 30%);
   backdrop-filter: blur(10px);
 }
 

diff --git a/files/en-us/web/css/backface-visibility/index.md b/files/en-us/web/css/backface-visibility/index.md
@@ -137,33 +137,33 @@ This example shows a cube with transparent faces, and one with opaque faces.
 
 /* Define each face based on direction */
 .front {
-  background: rgba(0, 0, 0, 0.3);
+  background: rgb(0 0 0 / 30%);
   transform: translateZ(50px);
 }
 
 .back {
-  background: rgba(0, 255, 0, 1);
+  background: rgb(0 255 0 / 100%);
   color: black;
   transform: rotateY(180deg) translateZ(50px);
 }
 
 .right {
-  background: rgba(196, 0, 0, 0.7);
+  background: rgb(196 0 0 / 70%);
   transform: rotateY(90deg) translateZ(50px);
 }
 
 .left {
-  background: rgba(0, 0, 196, 0.7);
+  background: rgb(0 0 196 / 70%);
   transform: rotateY(-90deg) translateZ(50px);
 }
 
 .top {
-  background: rgba(196, 196, 0, 0.7);
+  background: rgb(196 196 0 / 70%);
   transform: rotateX(90deg) translateZ(50px);
 }
 
 .bottom {
-  background: rgba(196, 0, 196, 0.7);
+  background: rgb(196 0 196 / 70%);
   transform: rotateX(-90deg) translateZ(50px);
 }
 

diff --git a/files/en-us/web/css/background-clip/index.md b/files/en-us/web/css/background-clip/index.md
@@ -102,7 +102,7 @@ p {
 .text {
   background-clip: text;
   -webkit-background-clip: text;
-  color: rgba(0, 0, 0, 0.2);
+  color: rgb(0 0 0 / 20%);
 }
 ```
 

diff --git a/files/en-us/web/css/background-color/index.md b/files/en-us/web/css/background-color/index.md
@@ -28,11 +28,11 @@ background-color: #1fef; /* Fully opaque shorthand */
 
 /* RGB value */
 background-color: rgb(255 255 128); /* Fully opaque */
-background-color: rgb(117 190 218 / 0.5); /* 50% transparent */
+background-color: rgb(117 190 218 / 50%); /* 50% transparent */
 
 /* HSL value */
 background-color: hsl(50 33% 25%); /* Fully opaque */
-background-color: hsl(50 33% 25% / 0.75); /* 75% opaque, i.e. 25% transparent */
+background-color: hsl(50 33% 25% / 75%); /* 75% opaque, i.e. 25% transparent */
 
 /* Special keyword values */
 background-color: currentcolor;
@@ -91,8 +91,8 @@ Color contrast ratio is determined by comparing the luminance of the text and ba
 }
 
 .exampletwo {
-  background-color: rgb(153, 102, 153);
-  color: rgb(255, 255, 204);
+  background-color: rgb(153 102 153);
+  color: rgb(255 255 204);
 }
 
 .examplethree {

diff --git a/files/en-us/web/css/background-image/index.md b/files/en-us/web/css/background-image/index.md
@@ -24,8 +24,8 @@ If a specified image cannot be drawn (for example, when the file denoted by the
 ```css
 background-image: linear-gradient(
     to bottom,
-    rgba(255, 255, 0, 0.5),
-    rgba(0, 0, 255, 0.5)
+    rgb(255 255 0 / 50%),
+    rgb(0 0 255 / 50%)
   ), url("catfront.png");
 
 /* Global values */

diff --git a/files/en-us/web/css/background-origin/index.md b/files/en-us/web/css/background-origin/index.md
@@ -92,10 +92,10 @@ In this example the box has a thick dotted border. The first gradient uses the `
   color: #fff;
   background: linear-gradient(
       90deg,
-      rgba(131, 58, 180, 1) 0%,
-      rgba(253, 29, 29, 0.6) 60%,
-      rgba(252, 176, 69, 1) 100%
-    ), radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 28%);
+      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%);
   border: 20px dashed black;
   padding: 20px;
   width: 400px;

diff --git a/files/en-us/web/css/border-bottom-color/index.md b/files/en-us/web/css/border-bottom-color/index.md
@@ -17,8 +17,8 @@ The **`border-bottom-color`** CSS property sets the color of an element's bottom
 /* <color> values */
 border-bottom-color: red;
 border-bottom-color: #ffbb00;
-border-bottom-color: rgb(255, 0, 0);
-border-bottom-color: hsl(100deg 50% 25% / 0.75);
+border-bottom-color: rgb(255 0 0);
+border-bottom-color: hsl(100deg 50% 25% / 75%);
 border-bottom-color: currentcolor;
 border-bottom-color: transparent;
 

diff --git a/files/en-us/web/css/border-color/index.md b/files/en-us/web/css/border-color/index.md
@@ -34,7 +34,7 @@ border-color: red;
 border-color: red #f015ca;
 
 /* top | left and right | bottom */
-border-color: red rgb(240, 30, 50, 0.7) green;
+border-color: red rgb(240 30 50 / 70%) green;
 
 /* top | right | bottom | left */
 border-color: red yellow green blue;

diff --git a/files/en-us/web/css/border-left-color/index.md b/files/en-us/web/css/border-left-color/index.md
@@ -18,7 +18,7 @@ The **`border-left-color`** CSS property sets the color of an element's left [bo
 border-left-color: red;
 border-left-color: #ffbb00;
 border-left-color: rgb(255 0 0);
-border-left-color: hsl(100deg 50% 25% / 0.75);
+border-left-color: hsl(100deg 50% 25% / 75%);
 border-left-color: currentcolor;
 border-left-color: transparent;
 

diff --git a/files/en-us/web/css/border-right-color/index.md b/files/en-us/web/css/border-right-color/index.md
@@ -18,7 +18,7 @@ The **`border-right-color`** CSS property sets the color of an element's right [
 border-right-color: red;
 border-right-color: #ffbb00;
 border-right-color: rgb(255 0 0);
-border-right-color: hsl(100deg 50% 25% / 0.75);
+border-right-color: hsl(100deg 50% 25% / 75%);
 border-right-color: currentcolor;
 border-right-color: transparent;
 

diff --git a/files/en-us/web/css/border-top-color/index.md b/files/en-us/web/css/border-top-color/index.md
@@ -18,7 +18,7 @@ The **`border-top-color`** CSS property sets the color of an element's top [bord
 border-top-color: red;
 border-top-color: #ffbb00;
 border-top-color: rgb(255 0 0);
-border-top-color: hsl(100deg 50% 25% / 0.75);
+border-top-color: hsl(100deg 50% 25% / 75%);
 border-top-color: currentcolor;
 border-top-color: transparent;
 

diff --git a/files/en-us/web/css/bottom/index.md b/files/en-us/web/css/bottom/index.md
@@ -97,7 +97,7 @@ p {
 div {
   width: 48%;
   text-align: center;
-  background: rgba(55, 55, 55, 0.2);
+  background: rgb(55 55 55 / 20%);
   border: 1px solid blue;
 }