ryrodriguez25 · pull · Aug 6, 2025 · Aug 6, 2025 · Aug 6, 2025 · Aug 6, 2025
diff --git a/files/en-us/web/api/toggleevent/source/index.md b/files/en-us/web/api/toggleevent/source/index.md
@@ -3,10 +3,12 @@ title: "ToggleEvent: source property"
 short-title: source
 slug: Web/API/ToggleEvent/source
 page-type: web-api-instance-property
+status:
+  - experimental
 browser-compat: api.ToggleEvent.source
 ---
 
-{{APIRef("Popover API")}}
+{{APIRef("Popover API")}}{{SeeCompatTable}}
 
 The **`source`** read-only property of the {{domxref("ToggleEvent")}} interface is an {{domxref("Element")}} object instance representing the HTML popover control element that initiated the toggle.
 

diff --git a/files/en-us/web/html/reference/elements/a/index.md b/files/en-us/web/html/reference/elements/a/index.md
@@ -253,7 +253,7 @@ A **skip link** is a link placed as early as possible in {{HTMLElement("body")}}
 .skip-link {
   position: absolute;
   top: -3em;
-  background: #fff;
+  background: white;
 }
 .skip-link:focus {
   top: 0;
@@ -405,13 +405,13 @@ html {
   font-family: sans-serif;
 }
 canvas {
-  background: #fff;
+  background: white;
   border: 1px dashed;
 }
 a {
   display: inline-block;
   background: #69c;
-  color: #fff;
+  color: white;
   padding: 5px 10px;
 }
 ```

diff --git a/files/en-us/web/html/reference/elements/button/index.md b/files/en-us/web/html/reference/elements/button/index.md
@@ -23,15 +23,15 @@ By default, HTML buttons are presented in a style resembling the platform the {{
   padding: 0 20px;
   font-size: 1rem;
   text-align: center;
-  color: #fff;
-  text-shadow: 1px 1px 1px #000;
+  color: white;
+  text-shadow: 1px 1px 1px black;
   border-radius: 10px;
-  background-color: rgb(220 0 0);
+  background-color: tomato;
   background-image: linear-gradient(
     to top left,
     rgb(0 0 0 / 0.2),
     rgb(0 0 0 / 0.2) 30%,
-    rgb(0 0 0 / 0)
+    transparent
   );
   box-shadow:
     inset 2px 2px 3px rgb(255 255 255 / 0.6),
@@ -162,7 +162,7 @@ To give an icon button an accessible name, put text in the `<button>` element th
 
 ```html
 <button name="favorite">
-  <svg fill="#000000" viewBox="0 0 42 42">
+  <svg fill="black" viewBox="0 0 42 42">
     <path
       d="M21,1c1.081,0,5.141,12.315,6.201,13.126s13.461,1.053,13.791,2.137 c0.34,1.087-9.561,8.938-9.961,10.252c-0.409,1.307,
       3.202,13.769,2.331,14.442c-0.879,0.673-11.05-6.79-12.361-6.79 c-1.311,0-11.481,7.463-12.36,6.79c-0.871-0.674,2.739-13.136,

diff --git a/files/en-us/web/html/reference/elements/caption/index.md b/files/en-us/web/html/reference/elements/caption/index.md
@@ -80,8 +80,8 @@ tr:nth-child(odd) td {
     1.4rem molot,
     sans-serif;
   text-shadow:
-    1px 1px 1px #fff,
-    2px 2px 1px #000;
+    1px 1px 1px white,
+    2px 2px 1px black;
 }
 
 .skeletor {
@@ -90,8 +90,8 @@ tr:nth-child(odd) td {
     fantasy;
   letter-spacing: 3px;
   text-shadow:
-    1px 1px 0 #fff,
-    0 0 9px #000;
+    1px 1px 0 white,
+    0 0 9px black;
 }
 ```
 

diff --git a/files/en-us/web/html/reference/elements/dialog/index.md b/files/en-us/web/html/reference/elements/dialog/index.md
@@ -476,7 +476,7 @@ dialog {
 
 /* Transition the :backdrop when the dialog modal is promoted to the top layer */
 dialog::backdrop {
-  background-color: rgb(0 0 0 / 0%);
+  background-color: transparent;
   transition:
     display 0.7s allow-discrete,
     overlay 0.7s allow-discrete,
@@ -494,7 +494,7 @@ because the nesting selector cannot represent pseudo-elements. */
 
 @starting-style {
   dialog:open::backdrop {
-    background-color: rgb(0 0 0 / 0%);
+    background-color: transparent;
   }
 }
 ```
@@ -569,6 +569,7 @@ dialog:open {
 }
 
 dialog:open::backdrop {
+  background-color: black;
   animation: backdrop-fade-in 0.7s ease-out forwards;
 }
 
@@ -604,11 +605,11 @@ dialog:open::backdrop {
 
 @keyframes backdrop-fade-in {
   0% {
-    background-color: rgb(0 0 0 / 0%);
+    opacity: 0;
   }
 
   100% {
-    background-color: rgb(0 0 0 / 25%);
+    opacity: 0.25;
   }
 }
 

diff --git a/files/en-us/web/html/reference/elements/div/index.md b/files/en-us/web/html/reference/elements/div/index.md
@@ -21,8 +21,8 @@ The **`<div>`** [HTML](/en-US/docs/Web/HTML) element is the generic container fo
 
 ```css interactive-example
 .warning {
-  border: 10px ridge #f00;
-  background-color: #ff0;
+  border: 10px ridge red;
+  background-color: yellow;
   padding: 0.5rem;
   display: flex;
   flex-direction: column;
@@ -91,7 +91,7 @@ This example creates a shadowed box by applying a style to the `<div>` using CSS
   border: 1px solid #333;
   box-shadow: 8px 8px 5px #444;
   padding: 8px 12px;
-  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
+  background-image: linear-gradient(180deg, white, #ddd 40%, #ccc);
 }
 ```
 

diff --git a/files/en-us/web/html/reference/elements/fieldset/index.md b/files/en-us/web/html/reference/elements/fieldset/index.md
@@ -29,8 +29,8 @@ The **`<fieldset>`** [HTML](/en-US/docs/Web/HTML) element is used to group sever
 
 ```css interactive-example
 legend {
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
   padding: 3px 6px;
 }
 

diff --git a/files/en-us/web/html/reference/elements/figcaption/index.md b/files/en-us/web/html/reference/elements/figcaption/index.md
@@ -21,7 +21,7 @@ The **`<figcaption>`** [HTML](/en-US/docs/Web/HTML) element represents a caption
 
 ```css interactive-example
 figure {
-  border: thin #c0c0c0 solid;
+  border: thin silver solid;
   display: flex;
   flex-flow: column;
   padding: 5px;
@@ -36,7 +36,7 @@ img {
 
 figcaption {
   background-color: #222;
-  color: #fff;
+  color: white;
   font: italic smaller sans-serif;
   padding: 3px;
   text-align: center;

diff --git a/files/en-us/web/html/reference/elements/figure/index.md b/files/en-us/web/html/reference/elements/figure/index.md
@@ -21,7 +21,7 @@ The **`<figure>`** [HTML](/en-US/docs/Web/HTML) element represents self-containe
 
 ```css interactive-example
 figure {
-  border: thin #c0c0c0 solid;
+  border: thin silver solid;
   display: flex;
   flex-flow: column;
   padding: 5px;
@@ -36,7 +36,7 @@ img {
 
 figcaption {
   background-color: #222;
-  color: #fff;
+  color: white;
   font: italic smaller sans-serif;
   padding: 3px;
   text-align: center;

diff --git a/files/en-us/web/html/reference/elements/footer/index.md b/files/en-us/web/html/reference/elements/footer/index.md
@@ -36,7 +36,7 @@ footer {
   justify-content: center;
   padding: 5px;
   background-color: #45a1ff;
-  color: #fff;
+  color: white;
 }
 ```
 
@@ -80,7 +80,7 @@ footer {
   text-align: center;
   padding: 5px;
   background-color: #abbaba;
-  color: #000;
+  color: black;
 }
 ```
 

diff --git a/files/en-us/web/html/reference/elements/header/index.md b/files/en-us/web/html/reference/elements/header/index.md
@@ -39,7 +39,7 @@ The **`<header>`** [HTML](/en-US/docs/Web/HTML) element represents introductory
     bold calc(1em + 2 * (100vw - 120px) / 100) "Dancing Script",
     fantasy;
   color: #ff0083;
-  text-shadow: #000 2px 2px 0.2rem;
+  text-shadow: black 2px 2px 0.2rem;
 }
 
 header > h1 {

diff --git a/files/en-us/web/html/reference/elements/hr/index.md b/files/en-us/web/html/reference/elements/hr/index.md
@@ -29,7 +29,7 @@ hr {
 }
 
 hr::after {
-  background: #fff;
+  background: white;
   content: "§";
   padding: 0 4px;
   position: relative;

diff --git a/files/en-us/web/html/reference/elements/input/button/index.md b/files/en-us/web/html/reference/elements/input/button/index.md
@@ -21,23 +21,23 @@ sidebar: htmlsidebar
   padding: 0 20px;
   font-size: 1rem;
   text-align: center;
-  color: #fff;
-  text-shadow: 1px 1px 1px #000;
+  color: white;
+  text-shadow: 1px 1px 1px black;
   border-radius: 10px;
-  background-color: rgb(220 0 0 / 100%);
+  background-color: tomato;
   background-image: linear-gradient(
     to top left,
     rgb(0 0 0 / 20%),
     rgb(0 0 0 / 20%) 30%,
-    rgb(0 0 0 / 0%)
+    transparent
   );
   box-shadow:
     inset 2px 2px 3px rgb(255 255 255 / 60%),
     inset -2px -2px 3px rgb(0 0 0 / 60%);
 }
 
 .styled:hover {
-  background-color: rgb(255 0 0 / 100%);
+  background-color: red;
 }
 
 .styled:active {

diff --git a/files/en-us/web/html/reference/elements/input/color/index.md b/files/en-us/web/html/reference/elements/input/color/index.md
@@ -127,7 +127,7 @@ First, there's some setup. Here we establish some variables, setting up a variab
 
 ```js
 let colorPicker;
-const defaultColor = "#0000ff";
+const defaultColor = "blue";
 
 window.addEventListener("load", startup, false);
 ```

diff --git a/files/en-us/web/html/reference/elements/input/tel/index.md b/files/en-us/web/html/reference/elements/input/tel/index.md
@@ -254,7 +254,7 @@ input:invalid + span::after {
   position: absolute;
   content: "✖";
   padding-left: 5px;
-  color: #8b0000;
+  color: darkred;
 }
 
 input:valid + span::after {
@@ -313,7 +313,7 @@ input:invalid + span::after {
   position: absolute;
   content: "✖";
   padding-left: 5px;
-  color: #8b0000;
+  color: darkred;
 }
 
 input:valid + span::after {
@@ -462,7 +462,7 @@ input:invalid + span::after {
   position: absolute;
   content: "✖";
   padding-left: 5px;
-  color: #8b0000;
+  color: darkred;
 }
 
 input:valid + span::after {

diff --git a/files/en-us/web/html/reference/elements/legend/index.md b/files/en-us/web/html/reference/elements/legend/index.md
@@ -29,8 +29,8 @@ In [customizable `<select>` elements](/en-US/docs/Learn_web_development/Extensio
 
 ```css interactive-example
 legend {
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
   padding: 3px 6px;
 }
 

diff --git a/files/en-us/web/html/reference/elements/nav/index.md b/files/en-us/web/html/reference/elements/nav/index.md
@@ -42,7 +42,7 @@ nav {
 
 .crumb a::after {
   display: inline-block;
-  color: #000;
+  color: black;
   content: ">";
   font-size: 80%;
   font-weight: bold;

diff --git a/files/en-us/web/html/reference/elements/span/index.md b/files/en-us/web/html/reference/elements/span/index.md
@@ -25,7 +25,7 @@ The **`<span>`** [HTML](/en-US/docs/Web/HTML) element is a generic inline contai
 
 ```css interactive-example
 span.ingredient {
-  color: #f00;
+  color: red;
 }
 ```
 

diff --git a/files/en-us/web/html/reference/elements/style/index.md b/files/en-us/web/html/reference/elements/style/index.md
@@ -32,7 +32,7 @@ The **`<style>`** [HTML](/en-US/docs/Web/HTML) element contains style informatio
 
 ```css interactive-example
 p {
-  color: #f00;
+  color: red;
 }
 ```
 

diff --git a/files/en-us/web/html/reference/elements/table/index.md b/files/en-us/web/html/reference/elements/table/index.md
@@ -1016,7 +1016,7 @@ td {
 th {
   position: sticky;
   top: 0;
-  background: #fff;
+  background: white;
   vertical-align: bottom;
 }
 

diff --git a/files/en-us/web/html/reference/elements/tbody/index.md b/files/en-us/web/html/reference/elements/tbody/index.md
@@ -44,7 +44,7 @@ The **`<tbody>`** [HTML](/en-US/docs/Web/HTML) element encapsulates a set of tab
 thead,
 tfoot {
   background-color: #2c5e77;
-  color: #fff;
+  color: white;
 }
 
 tbody {
@@ -235,7 +235,7 @@ tbody > tr > td:last-of-type {
 thead {
   border-bottom: 2px solid rgb(160 160 160);
   background-color: #2c5e77;
-  color: #fff;
+  color: white;
 }
 ```
 
@@ -344,7 +344,7 @@ tbody {
 
 thead {
   background-color: #2c5e77;
-  color: #fff;
+  color: white;
 }
 ```
 

diff --git a/files/en-us/web/html/reference/elements/td/index.md b/files/en-us/web/html/reference/elements/td/index.md
@@ -47,7 +47,7 @@ td {
 
 th[scope="col"] {
   background-color: #505050;
-  color: #fff;
+  color: white;
 }
 
 th[scope="row"] {
@@ -254,7 +254,7 @@ The {{cssxref(":first-of-type")}} and {{cssxref(":last-of-type")}} pseudo-classe
 tr:first-of-type td:last-of-type {
   width: 60px;
   background-color: #505050;
-  color: #fff;
+  color: white;
   font-weight: bold;
   text-align: center;
 }
-Original file line number
+Diff line change
@@ Expand Up @@
     ```css interactive-example
     p {
-      color: #f00;
+      color: red;
     }
     ```
@@ Expand Down @@