feat(css): Add example of ::backdrop (#2175)

* Backdrop & Marker * Removed :marker * Minor adjustments --------- Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
mdn · Jul 26, 2023 · 6355aad · 6355aad
1 parent 9240bfd
commit 6355aad
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 23 deletions.
diff --git a/live-examples/css-examples/pseudo-element/backdrop.css b/live-examples/css-examples/pseudo-element/backdrop.css
@@ -0,0 +1,8 @@
+button {
+    font-size: 1.2rem;
+    padding: 5px 15px;
+}
+
+dialog::backdrop {
+    background-color: salmon;
+}
diff --git a/live-examples/css-examples/pseudo-element/backdrop.html b/live-examples/css-examples/pseudo-element/backdrop.html
@@ -0,0 +1,8 @@
+<button id="showDialogBtn">Show a dialog</button>
+
+<dialog id="favDialog">
+    <form method="dialog">
+        <p>The background shown outside of this dialog is a backdrop.</p>
+        <button id="confirmBtn">Close the dialog</button>
+    </form>
+</dialog>
diff --git a/live-examples/css-examples/pseudo-element/backdrop.js b/live-examples/css-examples/pseudo-element/backdrop.js
@@ -0,0 +1,4 @@
+const showDialogBtn = document.getElementById('showDialogBtn');
+const favDialog = document.getElementById('favDialog');
+
+showDialogBtn.addEventListener('click', () => favDialog.showModal());
diff --git a/live-examples/css-examples/pseudo-element/marker.css b/live-examples/css-examples/pseudo-element/marker.css
diff --git a/live-examples/css-examples/pseudo-element/marker.html b/live-examples/css-examples/pseudo-element/marker.html
diff --git a/live-examples/css-examples/pseudo-element/meta.json b/live-examples/css-examples/pseudo-element/meta.json
@@ -9,6 +9,17 @@
             "defaultTab": "css",
             "height": "tabbed-standard"
         },
+        "backdrop": {
+            "exampleCode": "./live-examples/css-examples/pseudo-element/backdrop.html",
+            "cssExampleSrc": "./live-examples/css-examples/pseudo-element/backdrop.css",
+            "jsExampleSrc": "./live-examples/css-examples/pseudo-element/backdrop.js",
+            "fileName": "pseudo-element-backdrop.html",
+            "title": "HTML Demo: ::backdrop",
+            "type": "tabbed",
+            "defaultTab": "css",
+            "tabs": "html,css,js",
+            "height": "tabbed-shorter"
+        },
         "before": {
             "exampleCode": "./live-examples/css-examples/pseudo-element/before.html",
             "cssExampleSrc": "./live-examples/css-examples/pseudo-element/before.css",
@@ -54,15 +65,6 @@
             "defaultTab": "css",
             "height": "tabbed-shorter"
         },
-        "marker": {
-            "exampleCode": "./live-examples/css-examples/pseudo-element/marker.html",
-            "cssExampleSrc": "./live-examples/css-examples/pseudo-element/marker.css",
-            "fileName": "pseudo-element-marker.html",
-            "title": "HTML Demo: ::marker",
-            "type": "tabbed",
-            "defaultTab": "css",
-            "height": "tabbed-shorter"
-        },
         "placeholder": {
             "exampleCode": "./live-examples/css-examples/pseudo-element/placeholder.html",
             "cssExampleSrc": "./live-examples/css-examples/pseudo-element/placeholder.css",