From 9f40034c29a0c9e12ec368669a829fdbc9f062e4 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Wed, 13 May 2026 12:29:21 -0700 Subject: [PATCH 01/15] at-rules-at-scope --- at-rules-at-scope/README.md | 5 +++++ at-rules-at-scope/index.html | 11 +++++++++++ at-rules-at-scope/styles.css | 20 ++++++++++++++++++++ 3 files changed, 36 insertions(+) create mode 100644 at-rules-at-scope/README.md create mode 100644 at-rules-at-scope/index.html create mode 100644 at-rules-at-scope/styles.css diff --git a/at-rules-at-scope/README.md b/at-rules-at-scope/README.md new file mode 100644 index 00000000..672dae07 --- /dev/null +++ b/at-rules-at-scope/README.md @@ -0,0 +1,5 @@ +# View `@scope` at-rules + +➡️ **[View `@scope` at-rules](https://microsoftedge.github.io/Demos/at-rules-at-scope/)** ⬅️ + +For instructions, see [View `@scope` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-scope-at-rules) in _CSS features reference_. diff --git a/at-rules-at-scope/index.html b/at-rules-at-scope/index.html new file mode 100644 index 00000000..3f38803d --- /dev/null +++ b/at-rules-at-scope/index.html @@ -0,0 +1,11 @@ + + + View `@scope` at-rules + + + +

I'm just a piece of text.

+
+

I'm the text that lives on a card.

+
+ diff --git a/at-rules-at-scope/styles.css b/at-rules-at-scope/styles.css new file mode 100644 index 00000000..61e81434 --- /dev/null +++ b/at-rules-at-scope/styles.css @@ -0,0 +1,20 @@ +@scope (.card) { + p { + background-color: plum; + } +} +p { + width: max-content; + background-color: aquamarine; +} +.card { + box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2); + border-style: groove; + transition: 0.3s; + border-radius: 10px; + padding: 0px 16px; +} +body { + width: max-content; + font-family: 'Google Sans', sans-serif; +} From cc0784c54b7e94db1372702b6565b3fb25f8a846 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Wed, 13 May 2026 20:01:56 -0700 Subject: [PATCH 02/15] start 2nd dir/sample --- at-rules-at-font-palette-values/README.md | 5 +++++ at-rules-at-font-palette-values/index.html | 11 +++++++++++ at-rules-at-font-palette-values/styles.css | 20 ++++++++++++++++++++ 3 files changed, 36 insertions(+) create mode 100644 at-rules-at-font-palette-values/README.md create mode 100644 at-rules-at-font-palette-values/index.html create mode 100644 at-rules-at-font-palette-values/styles.css diff --git a/at-rules-at-font-palette-values/README.md b/at-rules-at-font-palette-values/README.md new file mode 100644 index 00000000..672dae07 --- /dev/null +++ b/at-rules-at-font-palette-values/README.md @@ -0,0 +1,5 @@ +# View `@scope` at-rules + +➡️ **[View `@scope` at-rules](https://microsoftedge.github.io/Demos/at-rules-at-scope/)** ⬅️ + +For instructions, see [View `@scope` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-scope-at-rules) in _CSS features reference_. diff --git a/at-rules-at-font-palette-values/index.html b/at-rules-at-font-palette-values/index.html new file mode 100644 index 00000000..3f38803d --- /dev/null +++ b/at-rules-at-font-palette-values/index.html @@ -0,0 +1,11 @@ + + + View `@scope` at-rules + + + +

I'm just a piece of text.

+
+

I'm the text that lives on a card.

+
+ diff --git a/at-rules-at-font-palette-values/styles.css b/at-rules-at-font-palette-values/styles.css new file mode 100644 index 00000000..61e81434 --- /dev/null +++ b/at-rules-at-font-palette-values/styles.css @@ -0,0 +1,20 @@ +@scope (.card) { + p { + background-color: plum; + } +} +p { + width: max-content; + background-color: aquamarine; +} +.card { + box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2); + border-style: groove; + transition: 0.3s; + border-radius: 10px; + padding: 0px 16px; +} +body { + width: max-content; + font-family: 'Google Sans', sans-serif; +} From 0c7bfa2704a62a08fda899b76651f608ebcb1a5f Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Thu, 14 May 2026 17:28:41 -0700 Subject: [PATCH 03/15] 5 samples dirs --- at-rules-font-palette-values/README.md | 5 +++ .../index.html | 0 .../styles.css | 0 .../README.md | 2 +- .../index.html | 0 .../styles.css | 0 at-rules-property/README.md | 5 +++ at-rules-property/index.html | 12 +++++++ at-rules-property/styles.css | 31 +++++++++++++++++++ .../README.md | 2 +- at-rules-scope/index.html | 11 +++++++ at-rules-scope/styles.css | 20 ++++++++++++ at-rules-supports/README.md | 5 +++ at-rules-supports/index.html | 27 ++++++++++++++++ 14 files changed, 118 insertions(+), 2 deletions(-) create mode 100644 at-rules-font-palette-values/README.md rename {at-rules-at-font-palette-values => at-rules-font-palette-values}/index.html (100%) rename {at-rules-at-font-palette-values => at-rules-font-palette-values}/styles.css (100%) rename {at-rules-at-font-palette-values => at-rules-position-try}/README.md (87%) rename {at-rules-at-scope => at-rules-position-try}/index.html (100%) rename {at-rules-at-scope => at-rules-position-try}/styles.css (100%) create mode 100644 at-rules-property/README.md create mode 100644 at-rules-property/index.html create mode 100644 at-rules-property/styles.css rename {at-rules-at-scope => at-rules-scope}/README.md (87%) create mode 100644 at-rules-scope/index.html create mode 100644 at-rules-scope/styles.css create mode 100644 at-rules-supports/README.md create mode 100644 at-rules-supports/index.html diff --git a/at-rules-font-palette-values/README.md b/at-rules-font-palette-values/README.md new file mode 100644 index 00000000..93733de1 --- /dev/null +++ b/at-rules-font-palette-values/README.md @@ -0,0 +1,5 @@ +# View `@font-palette-values` at-rules + +➡️ **[View `@font-palette-values` at-rules](https://microsoftedge.github.io/Demos/at-rules-font-palette-values/)** ⬅️ + +For instructions, see [View `@font-palette-values` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-font-palette-values-at-rules) in _CSS features reference_. diff --git a/at-rules-at-font-palette-values/index.html b/at-rules-font-palette-values/index.html similarity index 100% rename from at-rules-at-font-palette-values/index.html rename to at-rules-font-palette-values/index.html diff --git a/at-rules-at-font-palette-values/styles.css b/at-rules-font-palette-values/styles.css similarity index 100% rename from at-rules-at-font-palette-values/styles.css rename to at-rules-font-palette-values/styles.css diff --git a/at-rules-at-font-palette-values/README.md b/at-rules-position-try/README.md similarity index 87% rename from at-rules-at-font-palette-values/README.md rename to at-rules-position-try/README.md index 672dae07..73c71187 100644 --- a/at-rules-at-font-palette-values/README.md +++ b/at-rules-position-try/README.md @@ -1,5 +1,5 @@ # View `@scope` at-rules -➡️ **[View `@scope` at-rules](https://microsoftedge.github.io/Demos/at-rules-at-scope/)** ⬅️ +➡️ **[View `@scope` at-rules](https://microsoftedge.github.io/Demos/at-rules-scope/)** ⬅️ For instructions, see [View `@scope` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-scope-at-rules) in _CSS features reference_. diff --git a/at-rules-at-scope/index.html b/at-rules-position-try/index.html similarity index 100% rename from at-rules-at-scope/index.html rename to at-rules-position-try/index.html diff --git a/at-rules-at-scope/styles.css b/at-rules-position-try/styles.css similarity index 100% rename from at-rules-at-scope/styles.css rename to at-rules-position-try/styles.css diff --git a/at-rules-property/README.md b/at-rules-property/README.md new file mode 100644 index 00000000..be1671ce --- /dev/null +++ b/at-rules-property/README.md @@ -0,0 +1,5 @@ +# View `@property` at-rules + +➡️ **[View `@property` at-rules](https://microsoftedge.github.io/Demos/at-rules-property/)** ⬅️ + +For instructions, see [View `@property` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-property-at-rules) in _CSS features reference_. diff --git a/at-rules-property/index.html b/at-rules-property/index.html new file mode 100644 index 00000000..a45940cc --- /dev/null +++ b/at-rules-property/index.html @@ -0,0 +1,12 @@ + + + View `@property` at-rules + + + +
    +
  1. Item one
    2. +
  2. Item two
    3. +
  3. Item three
    4. +
+ diff --git a/at-rules-property/styles.css b/at-rules-property/styles.css new file mode 100644 index 00000000..c96a01e4 --- /dev/null +++ b/at-rules-property/styles.css @@ -0,0 +1,31 @@ +@property --itemSize { + syntax: " | "; + inherits: true; + initial-value: 200px; +} + +@property --borderWidth { + syntax: ""; + inherits: false; + initial-value: 10px; +} + +ol { + --itemSize: 100px; + --borderWidth: 1px; +} +.two { + --itemSize: initial; + --borderWidth: inherit; +} +.three { + --itemSize: large; + --borderWidth: 3%; +} + +li { + width: var(--itemSize); + border: var(--borderWidth) solid red; + background-color: yellow; + margin-bottom: 10px; +} diff --git a/at-rules-at-scope/README.md b/at-rules-scope/README.md similarity index 87% rename from at-rules-at-scope/README.md rename to at-rules-scope/README.md index 672dae07..73c71187 100644 --- a/at-rules-at-scope/README.md +++ b/at-rules-scope/README.md @@ -1,5 +1,5 @@ # View `@scope` at-rules -➡️ **[View `@scope` at-rules](https://microsoftedge.github.io/Demos/at-rules-at-scope/)** ⬅️ +➡️ **[View `@scope` at-rules](https://microsoftedge.github.io/Demos/at-rules-scope/)** ⬅️ For instructions, see [View `@scope` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-scope-at-rules) in _CSS features reference_. diff --git a/at-rules-scope/index.html b/at-rules-scope/index.html new file mode 100644 index 00000000..3f38803d --- /dev/null +++ b/at-rules-scope/index.html @@ -0,0 +1,11 @@ + + + View `@scope` at-rules + + + +

I'm just a piece of text.

+
+

I'm the text that lives on a card.

+
+ diff --git a/at-rules-scope/styles.css b/at-rules-scope/styles.css new file mode 100644 index 00000000..61e81434 --- /dev/null +++ b/at-rules-scope/styles.css @@ -0,0 +1,20 @@ +@scope (.card) { + p { + background-color: plum; + } +} +p { + width: max-content; + background-color: aquamarine; +} +.card { + box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2); + border-style: groove; + transition: 0.3s; + border-radius: 10px; + padding: 0px 16px; +} +body { + width: max-content; + font-family: 'Google Sans', sans-serif; +} diff --git a/at-rules-supports/README.md b/at-rules-supports/README.md new file mode 100644 index 00000000..7c5264dd --- /dev/null +++ b/at-rules-supports/README.md @@ -0,0 +1,5 @@ +# View `@supports` at-rules + +➡️ **[View `@supports` at-rules](https://microsoftedge.github.io/Demos/at-rules-supports/)** ⬅️ + +For instructions, see [View `@supports` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-supports-at-rules) in _CSS features reference_. diff --git a/at-rules-supports/index.html b/at-rules-supports/index.html new file mode 100644 index 00000000..b7a9657f --- /dev/null +++ b/at-rules-supports/index.html @@ -0,0 +1,27 @@ + + + View `@supports` at-rules + + +
+
+ + From fc56082dc3e2ca2895999ef970f8c1f57e8318f9 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Thu, 14 May 2026 17:48:56 -0700 Subject: [PATCH 04/15] 5+1 Readmes --- README.md | 5 +++++ at-rules-font-palette-values/README.md | 2 +- at-rules-position-try/README.md | 6 +++--- at-rules-property/README.md | 2 +- at-rules-scope/README.md | 2 +- at-rules-supports/README.md | 2 +- 6 files changed, 12 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index dc4280ee..e21a1225 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,11 @@ sync'd July 30, 2025 | Demo name | Description and docs | Source code & Readme | Live demo page | |---|---|---|---| +| View `@font-palette-values` CSS at-rules | Used for [View `@font-palette-values` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-font-palette-values-at-rules) in _CSS features reference_. | [/at-rules-font-palette-values/](https://github.com/MicrosoftEdge/Demos/tree/main/at-rules-font-palette-values/) | [View `@font-palette-values` CSS at-rules](https://microsoftedge.github.io/Demos/at-rules-font-palette-values/) demo | +| View `@position-try` CSS at-rules | Used for [View `@position-try` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-position-try-at-rules) in _CSS features reference_. | [/at-rules-position-try/](https://github.com/MicrosoftEdge/Demos/tree/main/at-rules-position-try/) | [View `@position-try` CSS at-rules](https://microsoftedge.github.io/Demos/at-rules-position-try/) demo | +| View `@property` CSS at-rules | Used for [View `@property` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-property-at-rules) in _CSS features reference_. | [/at-rules-property/](https://github.com/MicrosoftEdge/Demos/tree/main/at-rules-property/) | [View `@property` CSS at-rules](https://microsoftedge.github.io/Demos/at-rules-property/) demo | +| View `@scope` CSS at-rules | [View `@scope` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-scope-at-rules) in _CSS features reference_. | [/at-rules-scope/](https://github.com/MicrosoftEdge/Demos/tree/main/at-rules-scope/) | [View `@scope` CSS at-rules](https://microsoftedge.github.io/Demos/at-rules-scope/) demo | +| View `@supports` CSS at-rules | Used for [View `@supports` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-supports-at-rules) in _CSS features reference_. | [/at-rules-supports/](https://github.com/MicrosoftEdge/Demos/tree/main/at-rules-supports/) | [View `@supports` CSS at-rules](https://microsoftedge.github.io/Demos/at-rules-supports/) demo | | CSS mirroring sourcemaps | Used for [Update .css files from within the Styles tab (CSS mirror editing)](https://learn.microsoft.com/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/css-mirror-editing-styles-tab) for the DevTools extension for Visual Studio Code. | [/css-mirroring-sourcemaps-demo/](https://github.com/MicrosoftEdge/Demos/tree/main/css-mirroring-sourcemaps-demo) | n/a | | To Do app | Simple To Do app with vanilla JavaScript. Used for various articles in the [Microsoft Edge DevTools documentation](https://learn.microsoft.com/microsoft-edge/devtools/landing). | [/demo-to-do/](https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do) | [My tasks](https://microsoftedge.github.io/Demos/demo-to-do/) demo | | Detached DOM elements | Chat-like demo. Used for [Debug DOM memory leaks ("Detached elements" profiling type)](https://learn.microsoft.com/microsoft-edge/devtools/memory-problems/dom-leaks-memory-tool-detached-elements). | [/detached-elements/](https://github.com/MicrosoftEdge/Demos/tree/main/detached-elements) | [Detached DOM elements](https://microsoftedge.github.io/Demos/detached-elements/) demo | diff --git a/at-rules-font-palette-values/README.md b/at-rules-font-palette-values/README.md index 93733de1..a01ea0af 100644 --- a/at-rules-font-palette-values/README.md +++ b/at-rules-font-palette-values/README.md @@ -1,4 +1,4 @@ -# View `@font-palette-values` at-rules +# View `@font-palette-values` CSS at-rules ➡️ **[View `@font-palette-values` at-rules](https://microsoftedge.github.io/Demos/at-rules-font-palette-values/)** ⬅️ diff --git a/at-rules-position-try/README.md b/at-rules-position-try/README.md index 73c71187..13f851e8 100644 --- a/at-rules-position-try/README.md +++ b/at-rules-position-try/README.md @@ -1,5 +1,5 @@ -# View `@scope` at-rules +# View `@position-try` CSS at-rules -➡️ **[View `@scope` at-rules](https://microsoftedge.github.io/Demos/at-rules-scope/)** ⬅️ +➡️ **[View `@position-try` at-rules](https://microsoftedge.github.io/Demos/at-rules-position-try/)** ⬅️ -For instructions, see [View `@scope` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-scope-at-rules) in _CSS features reference_. +For instructions, see [View `@position-try` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-position-try-at-rules) in _CSS features reference_. diff --git a/at-rules-property/README.md b/at-rules-property/README.md index be1671ce..4ef30299 100644 --- a/at-rules-property/README.md +++ b/at-rules-property/README.md @@ -1,4 +1,4 @@ -# View `@property` at-rules +# View `@property` CSS at-rules ➡️ **[View `@property` at-rules](https://microsoftedge.github.io/Demos/at-rules-property/)** ⬅️ diff --git a/at-rules-scope/README.md b/at-rules-scope/README.md index 73c71187..f853b9c0 100644 --- a/at-rules-scope/README.md +++ b/at-rules-scope/README.md @@ -1,4 +1,4 @@ -# View `@scope` at-rules +# View `@scope` CSS at-rules ➡️ **[View `@scope` at-rules](https://microsoftedge.github.io/Demos/at-rules-scope/)** ⬅️ diff --git a/at-rules-supports/README.md b/at-rules-supports/README.md index 7c5264dd..b32b2986 100644 --- a/at-rules-supports/README.md +++ b/at-rules-supports/README.md @@ -1,4 +1,4 @@ -# View `@supports` at-rules +# View `@supports` CSS at-rules ➡️ **[View `@supports` at-rules](https://microsoftedge.github.io/Demos/at-rules-supports/)** ⬅️ From 3d605a35febce990cd4caa7915a17f02f8cf5d08 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Fri, 15 May 2026 10:27:02 -0700 Subject: [PATCH 05/15] finish demo 4 & 5 of 5 at-rules --- at-rules-font-palette-values/index.html | 6 +- at-rules-font-palette-values/styles.css | 26 +++--- at-rules-position-try/index.html | 20 ++++- at-rules-position-try/styles.css | 109 ++++++++++++++++++++---- 4 files changed, 122 insertions(+), 39 deletions(-) diff --git a/at-rules-font-palette-values/index.html b/at-rules-font-palette-values/index.html index 3f38803d..010ff298 100644 --- a/at-rules-font-palette-values/index.html +++ b/at-rules-font-palette-values/index.html @@ -4,8 +4,6 @@ -

I'm just a piece of text.

-
-

I'm the text that lives on a card.

-
+

old colors

+

new colors

diff --git a/at-rules-font-palette-values/styles.css b/at-rules-font-palette-values/styles.css index 61e81434..ad7df2d0 100644 --- a/at-rules-font-palette-values/styles.css +++ b/at-rules-font-palette-values/styles.css @@ -1,20 +1,14 @@ -@scope (.card) { - p { - background-color: plum; - } -} +@import url(https://fonts.googleapis.com/css2?family=Foldit:wght@700); p { - width: max-content; - background-color: aquamarine; + font-family: 'Foldit'; + font-size: 2rem; } -.card { - box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2); - border-style: groove; - transition: 0.3s; - border-radius: 10px; - padding: 0px 16px; +@font-palette-values --New { + font-family: 'Foldit'; + override-colors: + 0 gold, + 1 red; } -body { - width: max-content; - font-family: 'Google Sans', sans-serif; +.new { + font-palette: --New; } diff --git a/at-rules-position-try/index.html b/at-rules-position-try/index.html index 3f38803d..31adcdd2 100644 --- a/at-rules-position-try/index.html +++ b/at-rules-position-try/index.html @@ -4,8 +4,20 @@ -

I'm just a piece of text.

-
-

I'm the text that lives on a card.

-
+ + + diff --git a/at-rules-position-try/styles.css b/at-rules-position-try/styles.css index 61e81434..dced439a 100644 --- a/at-rules-position-try/styles.css +++ b/at-rules-position-try/styles.css @@ -1,20 +1,99 @@ -@scope (.card) { - p { - background-color: plum; - } +/* anchoring */ +[popovertarget="menu"] { + anchor-name: --menu; } -p { - width: max-content; - background-color: aquamarine; + +[popovertarget="submenu"] { + anchor-name: --submenu; } -.card { - box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2); - border-style: groove; - transition: 0.3s; - border-radius: 10px; - padding: 0px 16px; + +#menu { + position: absolute; + margin: 0; + position-anchor: --menu; + left: anchor(--menu left); + top: anchor(--menu bottom); } -body { + +#submenu { + position: absolute; + margin: 0; + position-anchor: --submenu; + left: anchor(--submenu right); + top: anchor(--submenu top); + margin-left: var(--padding); + position-try-fallbacks: --bottom; + transition: left 0.25s, top 0.25s; width: max-content; - font-family: 'Google Sans', sans-serif; +} + +@position-try --bottom { + margin: var(--padding) 0 0 var(--padding); + left: anchor(--submenu left); + top: anchor(--submenu bottom); + margin-left: var(--padding); +} + +[popovertarget="submenu"] { + width: 100%; + display: flex; + justify-content: space-between; +} + +/* animating */ + +/* etc */ +:root { + --padding: 1rem; +} + +#menu, +#submenu { + padding: var(--padding); + background: skyblue; + gap: 1rem; + border: none; +} + +#menu:popover-open, +#submenu:popover-open { + display: grid; +} + +#menu-btn { + background: royalblue; + color: white; + padding: var(--padding); +} + +#submenu { + background: lightblue; +} + +li { + list-style: none; + padding: 0; +} + +a, button { + font-family: system-ui; + text-decoration: none; + font-size: 1rem; + padding: 0; + color: black; + text-transform: uppercase; + font-weight: 700; + letter-spacing: 0.2px; + border: none; + background: none; +} + +.arrow { + transition: rotate 0.2s; +} + +#menu:has(:popover-open) { + .arrow { + rotate: -90deg; + } } From a6be40a39792c50474c283bbee54848bc6cedb6a Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Fri, 15 May 2026 14:22:16 -0700 Subject: [PATCH 06/15] add /focus/, /highlight/ --- at-rules-font-palette-values/index.html | 2 +- at-rules-position-try/index.html | 2 +- focus/README.md | 5 ++ focus/index.html | 79 +++++++++++++++++++++++++ highlight-pseudo-elements/README.md | 5 ++ highlight-pseudo-elements/index.html | 17 ++++++ 6 files changed, 108 insertions(+), 2 deletions(-) create mode 100644 focus/README.md create mode 100644 focus/index.html create mode 100644 highlight-pseudo-elements/README.md create mode 100644 highlight-pseudo-elements/index.html diff --git a/at-rules-font-palette-values/index.html b/at-rules-font-palette-values/index.html index 010ff298..3b06a7bb 100644 --- a/at-rules-font-palette-values/index.html +++ b/at-rules-font-palette-values/index.html @@ -1,6 +1,6 @@ - View `@scope` at-rules + View `@font-palette-values` at-rules diff --git a/at-rules-position-try/index.html b/at-rules-position-try/index.html index 31adcdd2..12a02c62 100644 --- a/at-rules-position-try/index.html +++ b/at-rules-position-try/index.html @@ -1,6 +1,6 @@ - View `@scope` at-rules + View `@position-try` at-rules diff --git a/focus/README.md b/focus/README.md new file mode 100644 index 00000000..efc56ccf --- /dev/null +++ b/focus/README.md @@ -0,0 +1,5 @@ +# Emulate a focused page + +➡️ **[Emulate a focused page](https://microsoftedge.github.io/Demos/focus/)** ⬅️ + +For instructions, see [Emulate a focused page](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#emulate-a-focused-page) in _CSS features reference_. diff --git a/focus/index.html b/focus/index.html new file mode 100644 index 00000000..c816b1d8 --- /dev/null +++ b/focus/index.html @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Debug disappearing pop up + + + + + + + + + + + + + + +
+ +

Imagine you want to debug the disappearing result. CSS :hover and :focus don't work, because you need page focus. Use the "Keep page focused" settings in DevTools to emulate a focused page.

+ +

disappearing popup - try to inspect & debug me in DevTools.

+ +
+ + + + diff --git a/highlight-pseudo-elements/README.md b/highlight-pseudo-elements/README.md new file mode 100644 index 00000000..fc6bcd82 --- /dev/null +++ b/highlight-pseudo-elements/README.md @@ -0,0 +1,5 @@ +# Highlight pseudo-elements + +➡️ **[Highlight pseudo-elements](https://microsoftedge.github.io/Demos/highlight-pseudo-elements/)** ⬅️ + +For instructions, see [View inherited highlight pseudo-elements](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-inherited-highlight-pseudo-elements) in _CSS features reference_. diff --git a/highlight-pseudo-elements/index.html b/highlight-pseudo-elements/index.html new file mode 100644 index 00000000..a6f932de --- /dev/null +++ b/highlight-pseudo-elements/index.html @@ -0,0 +1,17 @@ + + + + Highlight pseudo-elements + + +
+
I inherited the style of my parent's highlight pseudo-element. Select me!
+
+ + + From cf4688b9b0a9c04728f584429c6018b126600c74 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Fri, 15 May 2026 17:12:43 -0700 Subject: [PATCH 07/15] /cascade-layers/ --- cascade-layers/README.md | 5 +++++ cascade-layers/index.html | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 cascade-layers/README.md create mode 100644 cascade-layers/index.html diff --git a/cascade-layers/README.md b/cascade-layers/README.md new file mode 100644 index 00000000..432509e3 --- /dev/null +++ b/cascade-layers/README.md @@ -0,0 +1,5 @@ +# Cascade layers + +➡️ **[Cascade layers](https://microsoftedge.github.io/Demos/cascade-layers/)** ⬅️ + +For instructions, see [View cascade layers](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-cascade-layers) in _CSS features reference_. diff --git a/cascade-layers/index.html b/cascade-layers/index.html new file mode 100644 index 00000000..15420d69 --- /dev/null +++ b/cascade-layers/index.html @@ -0,0 +1,35 @@ + + + + Cascade layers + + +
+ + + From 756e601195ea2511a2231c02559b90e1d1ef3015 Mon Sep 17 00:00:00 2001 From: Patrick Brosset Date: Mon, 18 May 2026 11:35:23 +0200 Subject: [PATCH 08/15] Apply suggestions from code review Co-authored-by: Patrick Brosset --- at-rules-position-try/index.html | 12 +++++------ at-rules-property/styles.css | 2 ++ at-rules-scope/styles.css | 3 +++ at-rules-supports/index.html | 36 ++++++++++++++++++++------------ cascade-layers/index.html | 16 +++++++++----- 5 files changed, 45 insertions(+), 24 deletions(-) diff --git a/at-rules-position-try/index.html b/at-rules-position-try/index.html index 12a02c62..4677de1d 100644 --- a/at-rules-position-try/index.html +++ b/at-rules-position-try/index.html @@ -7,16 +7,16 @@ diff --git a/at-rules-property/styles.css b/at-rules-property/styles.css index c96a01e4..0f02e755 100644 --- a/at-rules-property/styles.css +++ b/at-rules-property/styles.css @@ -14,10 +14,12 @@ ol { --itemSize: 100px; --borderWidth: 1px; } + .two { --itemSize: initial; --borderWidth: inherit; } + .three { --itemSize: large; --borderWidth: 3%; diff --git a/at-rules-scope/styles.css b/at-rules-scope/styles.css index 61e81434..2176a059 100644 --- a/at-rules-scope/styles.css +++ b/at-rules-scope/styles.css @@ -3,10 +3,12 @@ background-color: plum; } } + p { width: max-content; background-color: aquamarine; } + .card { box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2); border-style: groove; @@ -14,6 +16,7 @@ p { border-radius: 10px; padding: 0px 16px; } + body { width: max-content; font-family: 'Google Sans', sans-serif; diff --git a/at-rules-supports/index.html b/at-rules-supports/index.html index b7a9657f..96818c96 100644 --- a/at-rules-supports/index.html +++ b/at-rules-supports/index.html @@ -1,4 +1,5 @@ + View `@supports` at-rules @@ -7,21 +8,30 @@ + diff --git a/cascade-layers/index.html b/cascade-layers/index.html index 15420d69..371bb1d7 100644 --- a/cascade-layers/index.html +++ b/cascade-layers/index.html @@ -1,4 +1,4 @@ - + Cascade layers @@ -6,25 +6,31 @@
- + + \ No newline at end of file From 420b1989df3694bf8546db476a9d9b7d9737e5cd Mon Sep 17 00:00:00 2001 From: Patrick Brosset Date: Tue, 19 May 2026 16:57:14 +0200 Subject: [PATCH 11/15] formatting --- cascade-layers/index.html | 64 ++++++++++++++++++++++----------------- 1 file changed, 36 insertions(+), 28 deletions(-) diff --git a/cascade-layers/index.html b/cascade-layers/index.html index 371bb1d7..63a186b5 100644 --- a/cascade-layers/index.html +++ b/cascade-layers/index.html @@ -1,41 +1,49 @@ + + + + + + Cascade layers - -
- - - + } + + + + \ No newline at end of file From 4fbb085f7f8654db64b896078fd013360b86d78d Mon Sep 17 00:00:00 2001 From: Patrick Brosset Date: Tue, 19 May 2026 17:13:57 +0200 Subject: [PATCH 12/15] Move and simplify emulate focused page demo --- README.md | 2 +- {focus => emulate-focused-page}/README.md | 2 +- emulate-focused-page/index.html | 70 ++++++++++++++++++++ focus/index.html | 79 ----------------------- 4 files changed, 72 insertions(+), 81 deletions(-) rename {focus => emulate-focused-page}/README.md (82%) create mode 100644 emulate-focused-page/index.html delete mode 100644 focus/index.html diff --git a/README.md b/README.md index 73d7aaaf..ccaeadcf 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,7 @@ sync'd July 30, 2025 | postMessage Trace Events | Tests `postMessage` trace events in the **Performance** tool. Used for [View messages between windows, iframes, and dedicated workers](https://learn.microsoft.com/microsoft-edge/devtools/performance/reference#view-messages-between-windows-iframes-and-dedicated-workers) in _Performance features reference_. | [/devtools-postmessage-perf-timeline/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline) | [postMessage Trace Events demo](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/) | | CSS :target pseudo-class | Used for [Support forcing the :target CSS state](https://learn.microsoft.com/microsoft-edge/devtools/whats-new/2021/01/devtools#support-forcing-the-target-css-state) in _What's New in DevTools (Microsoft Edge 89)_. | [/devtools-target-pseudo/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-target-pseudo) | [CSS :target pseudo-class demo](https://microsoftedge.github.io/Demos/devtools-target-pseudo/) | | Exploring the universe | Used for [Monitor Core Web Vitals metrics](../performance/overview.md#monitor-core-web-vitals-metrics) in _Performance tool: Analyze your website's performance_. | [/exploring-the-universe/](https://github.com/MicrosoftEdge/Demos/tree/main/exploring-the-universe) | [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo | -| Emulate a focused page | Used for [Emulate a focused page](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#emulate-a-focused-page) in _CSS features reference_. | [/focus/](https://github.com/MicrosoftEdge/Demos/tree/main/focus/) | [Emulate a focused page](https://microsoftedge.github.io/Demos/focus/) demo | +| Emulate a focused page | Used for [Emulate a focused page](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#emulate-a-focused-page) in _CSS features reference_. | [/focus/](https://github.com/MicrosoftEdge/Demos/tree/main/emulate-focused-page/) | [Emulate a focused page](https://microsoftedge.github.io/Demos/emulate-focused-page/) demo | | Heap Snapshot Visualizer | Used for [Heap Snapshot visualizer extension for DevTools](https://learn.microsoft.com/microsoft-edge/devtools/whats-new/2023/01/devtools-109#heap-snapshot-visualizer-extension-for-devtools) in _What's New in DevTools (Microsoft Edge 109)_. | [/heap-snapshot-visualizer/](https://github.com/MicrosoftEdge/Demos/tree/main/heap-snapshot-visualizer) | n/a | | Highlight pseudo-elements | Used for [View inherited highlight pseudo-elements](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-inherited-highlight-pseudo-elements) in _CSS features reference_. | [/highlight-pseudo-elements/](https://github.com/MicrosoftEdge/Demos/tree/main/highlight-pseudo-elements/) | [Highlight pseudo-elements](https://microsoftedge.github.io/Demos/highlight-pseudo-elements/) demo | | Idle detection | Used for [Emulate idle detector state](https://learn.microsoft.com/microsoft-edge/devtools/sensors/#emulate-idle-detector-state) in _Emulate device sensors_. | [/idle-detection/](https://github.com/MicrosoftEdge/Demos/tree/main/idle-detection) | [Idle detection demo](https://microsoftedge.github.io/Demos/idle-detection/) | diff --git a/focus/README.md b/emulate-focused-page/README.md similarity index 82% rename from focus/README.md rename to emulate-focused-page/README.md index da1f3456..b40655ec 100644 --- a/focus/README.md +++ b/emulate-focused-page/README.md @@ -1,5 +1,5 @@ # Emulate a focused page -➡️ Open the demo: **[Emulate a focused page](https://microsoftedge.github.io/Demos/focus/)** ⬅️ +➡️ Open the demo: **[Emulate a focused page](https://microsoftedge.github.io/Demos/emulate-focused-page/)** ⬅️ For instructions, see [Emulate a focused page](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#emulate-a-focused-page) in _CSS features reference_. diff --git a/emulate-focused-page/index.html b/emulate-focused-page/index.html new file mode 100644 index 00000000..750c0042 --- /dev/null +++ b/emulate-focused-page/index.html @@ -0,0 +1,70 @@ + + + + + + + Emulate a focused page + + + + +

When focus is in the input text box below, a message is displayed next to the box. + To inspect the message, use Emulate a focused page in DevTools.

+ +

+ +

+ +

This message only appears when the text box is focused. Try to inspect and debug the message in DevTools.

+ + + + + \ No newline at end of file diff --git a/focus/index.html b/focus/index.html deleted file mode 100644 index c816b1d8..00000000 --- a/focus/index.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Debug disappearing pop up - - - - - - - - - - - - - - -
- -

Imagine you want to debug the disappearing result. CSS :hover and :focus don't work, because you need page focus. Use the "Keep page focused" settings in DevTools to emulate a focused page.

- -

disappearing popup - try to inspect & debug me in DevTools.

- -
- - - - From 1e12883963b38e3b9e83d4c7e1d64050c25ad338 Mon Sep 17 00:00:00 2001 From: Patrick Brosset Date: Tue, 19 May 2026 17:19:42 +0200 Subject: [PATCH 13/15] formatting --- emulate-focused-page/index.html | 8 ++++--- highlight-pseudo-elements/index.html | 34 +++++++++++++++++----------- 2 files changed, 26 insertions(+), 16 deletions(-) diff --git a/emulate-focused-page/index.html b/emulate-focused-page/index.html index 750c0042..6851c030 100644 --- a/emulate-focused-page/index.html +++ b/emulate-focused-page/index.html @@ -1,9 +1,10 @@ - + - + + Emulate a focused page - - + + +
+
I inherited the style of my parent's highlight pseudo-element. Select me!
+
+ + + + \ No newline at end of file From 280f5e9e66719d089a2ccd0fc1d1e2c0ec789900 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Tue, 19 May 2026 13:07:16 -0700 Subject: [PATCH 14/15] link text --- README.md | 2 +- at-rules-font-palette-values/README.md | 2 +- at-rules-position-try/README.md | 2 +- at-rules-property/README.md | 2 +- at-rules-scope/README.md | 2 +- at-rules-supports/README.md | 2 +- cascade-layers/README.md | 2 +- emulate-focused-page/README.md | 2 +- highlight-pseudo-elements/README.md | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index ccaeadcf..535bc7be 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,7 @@ sync'd July 30, 2025 | postMessage Trace Events | Tests `postMessage` trace events in the **Performance** tool. Used for [View messages between windows, iframes, and dedicated workers](https://learn.microsoft.com/microsoft-edge/devtools/performance/reference#view-messages-between-windows-iframes-and-dedicated-workers) in _Performance features reference_. | [/devtools-postmessage-perf-timeline/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline) | [postMessage Trace Events demo](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/) | | CSS :target pseudo-class | Used for [Support forcing the :target CSS state](https://learn.microsoft.com/microsoft-edge/devtools/whats-new/2021/01/devtools#support-forcing-the-target-css-state) in _What's New in DevTools (Microsoft Edge 89)_. | [/devtools-target-pseudo/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-target-pseudo) | [CSS :target pseudo-class demo](https://microsoftedge.github.io/Demos/devtools-target-pseudo/) | | Exploring the universe | Used for [Monitor Core Web Vitals metrics](../performance/overview.md#monitor-core-web-vitals-metrics) in _Performance tool: Analyze your website's performance_. | [/exploring-the-universe/](https://github.com/MicrosoftEdge/Demos/tree/main/exploring-the-universe) | [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo | -| Emulate a focused page | Used for [Emulate a focused page](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#emulate-a-focused-page) in _CSS features reference_. | [/focus/](https://github.com/MicrosoftEdge/Demos/tree/main/emulate-focused-page/) | [Emulate a focused page](https://microsoftedge.github.io/Demos/emulate-focused-page/) demo | +| Emulate a focused page | Used for [Emulate a focused page](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#emulate-a-focused-page) in _CSS features reference_. | [/emulate-focused-page/](https://github.com/MicrosoftEdge/Demos/tree/main/emulate-focused-page/) | [Emulate a focused page](https://microsoftedge.github.io/Demos/emulate-focused-page/) demo | | Heap Snapshot Visualizer | Used for [Heap Snapshot visualizer extension for DevTools](https://learn.microsoft.com/microsoft-edge/devtools/whats-new/2023/01/devtools-109#heap-snapshot-visualizer-extension-for-devtools) in _What's New in DevTools (Microsoft Edge 109)_. | [/heap-snapshot-visualizer/](https://github.com/MicrosoftEdge/Demos/tree/main/heap-snapshot-visualizer) | n/a | | Highlight pseudo-elements | Used for [View inherited highlight pseudo-elements](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-inherited-highlight-pseudo-elements) in _CSS features reference_. | [/highlight-pseudo-elements/](https://github.com/MicrosoftEdge/Demos/tree/main/highlight-pseudo-elements/) | [Highlight pseudo-elements](https://microsoftedge.github.io/Demos/highlight-pseudo-elements/) demo | | Idle detection | Used for [Emulate idle detector state](https://learn.microsoft.com/microsoft-edge/devtools/sensors/#emulate-idle-detector-state) in _Emulate device sensors_. | [/idle-detection/](https://github.com/MicrosoftEdge/Demos/tree/main/idle-detection) | [Idle detection demo](https://microsoftedge.github.io/Demos/idle-detection/) | diff --git a/at-rules-font-palette-values/README.md b/at-rules-font-palette-values/README.md index 219eb219..a50a32a8 100644 --- a/at-rules-font-palette-values/README.md +++ b/at-rules-font-palette-values/README.md @@ -1,5 +1,5 @@ # View `@font-palette-values` CSS at-rules -➡️ Open the demo: **[View `@font-palette-values` at-rules](https://microsoftedge.github.io/Demos/at-rules-font-palette-values/)** ⬅️ +➡️ Open the demo: **[View `@font-palette-values` at-rules](https://microsoftedge.github.io/Demos/at-rules-font-palette-values/)** ⬅️ For instructions, see [View `@font-palette-values` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-font-palette-values-at-rules) in _CSS features reference_. diff --git a/at-rules-position-try/README.md b/at-rules-position-try/README.md index 52bf7755..2d948112 100644 --- a/at-rules-position-try/README.md +++ b/at-rules-position-try/README.md @@ -1,5 +1,5 @@ # View `@position-try` CSS at-rules -➡️ Open the demo: **[View `@position-try` at-rules](https://microsoftedge.github.io/Demos/at-rules-position-try/)** ⬅️ +➡️ Open the demo: **[View `@position-try` at-rules](https://microsoftedge.github.io/Demos/at-rules-position-try/)** ⬅️ For instructions, see [View `@position-try` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-position-try-at-rules) in _CSS features reference_. diff --git a/at-rules-property/README.md b/at-rules-property/README.md index 9571d444..c01f490d 100644 --- a/at-rules-property/README.md +++ b/at-rules-property/README.md @@ -1,5 +1,5 @@ # View `@property` CSS at-rules -➡️ Open the demo: **[View `@property` at-rules](https://microsoftedge.github.io/Demos/at-rules-property/)** ⬅️ +➡️ Open the demo: **[View `@property` at-rules](https://microsoftedge.github.io/Demos/at-rules-property/)** ⬅️ For instructions, see [View `@property` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-property-at-rules) in _CSS features reference_. diff --git a/at-rules-scope/README.md b/at-rules-scope/README.md index 8090efeb..656afe39 100644 --- a/at-rules-scope/README.md +++ b/at-rules-scope/README.md @@ -1,5 +1,5 @@ # View `@scope` CSS at-rules -➡️ Open the demo: **[View `@scope` at-rules](https://microsoftedge.github.io/Demos/at-rules-scope/)** ⬅️ +➡️ Open the demo: **[View `@scope` at-rules](https://microsoftedge.github.io/Demos/at-rules-scope/)** ⬅️ For instructions, see [View `@scope` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-scope-at-rules) in _CSS features reference_. diff --git a/at-rules-supports/README.md b/at-rules-supports/README.md index 29bb6a68..031046e2 100644 --- a/at-rules-supports/README.md +++ b/at-rules-supports/README.md @@ -1,5 +1,5 @@ # View `@supports` CSS at-rules -➡️ Open the demo: **[View `@supports` at-rules](https://microsoftedge.github.io/Demos/at-rules-supports/)** ⬅️ +➡️ Open the demo: **[View `@supports` at-rules](https://microsoftedge.github.io/Demos/at-rules-supports/)** ⬅️ For instructions, see [View `@supports` at-rules](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-supports-at-rules) in _CSS features reference_. diff --git a/cascade-layers/README.md b/cascade-layers/README.md index 590c5633..37eba72d 100644 --- a/cascade-layers/README.md +++ b/cascade-layers/README.md @@ -1,5 +1,5 @@ # Cascade layers -➡️ Open the demo: **[Cascade layers](https://microsoftedge.github.io/Demos/cascade-layers/)** ⬅️ +➡️ Open the demo: **[Cascade layers](https://microsoftedge.github.io/Demos/cascade-layers/)** ⬅️ For instructions, see [View cascade layers](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-cascade-layers) in _CSS features reference_. diff --git a/emulate-focused-page/README.md b/emulate-focused-page/README.md index b40655ec..2cf5042e 100644 --- a/emulate-focused-page/README.md +++ b/emulate-focused-page/README.md @@ -1,5 +1,5 @@ # Emulate a focused page -➡️ Open the demo: **[Emulate a focused page](https://microsoftedge.github.io/Demos/emulate-focused-page/)** ⬅️ +➡️ Open the demo: **[Emulate a focused page](https://microsoftedge.github.io/Demos/emulate-focused-page/)** ⬅️ For instructions, see [Emulate a focused page](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#emulate-a-focused-page) in _CSS features reference_. diff --git a/highlight-pseudo-elements/README.md b/highlight-pseudo-elements/README.md index 8e3d1cd9..35df9094 100644 --- a/highlight-pseudo-elements/README.md +++ b/highlight-pseudo-elements/README.md @@ -1,5 +1,5 @@ # Highlight pseudo-elements -➡️ Open the demo: **[Highlight pseudo-elements](https://microsoftedge.github.io/Demos/highlight-pseudo-elements/)** ⬅️ +➡️ Open the demo: **[Highlight pseudo-elements](https://microsoftedge.github.io/Demos/highlight-pseudo-elements/)** ⬅️ For instructions, see [View inherited highlight pseudo-elements](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-inherited-highlight-pseudo-elements) in _CSS features reference_. From c828f3c0b3517ae7e5450a907d0b617fd15f57e0 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Tue, 19 May 2026 13:09:21 -0700 Subject: [PATCH 15/15] re-sort rows post rename --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 535bc7be..4952bdd6 100644 --- a/README.md +++ b/README.md @@ -70,8 +70,8 @@ sync'd July 30, 2025 | Sluggish Animation | Used for [Analyze runtime performance (tutorial)](https://learn.microsoft.com/microsoft-edge/devtools/performance/). | [/devtools-performance-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-get-started) | [Sluggish Animation](https://microsoftedge.github.io/Demos/devtools-performance-get-started/) demo | | postMessage Trace Events | Tests `postMessage` trace events in the **Performance** tool. Used for [View messages between windows, iframes, and dedicated workers](https://learn.microsoft.com/microsoft-edge/devtools/performance/reference#view-messages-between-windows-iframes-and-dedicated-workers) in _Performance features reference_. | [/devtools-postmessage-perf-timeline/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline) | [postMessage Trace Events demo](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/) | | CSS :target pseudo-class | Used for [Support forcing the :target CSS state](https://learn.microsoft.com/microsoft-edge/devtools/whats-new/2021/01/devtools#support-forcing-the-target-css-state) in _What's New in DevTools (Microsoft Edge 89)_. | [/devtools-target-pseudo/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-target-pseudo) | [CSS :target pseudo-class demo](https://microsoftedge.github.io/Demos/devtools-target-pseudo/) | -| Exploring the universe | Used for [Monitor Core Web Vitals metrics](../performance/overview.md#monitor-core-web-vitals-metrics) in _Performance tool: Analyze your website's performance_. | [/exploring-the-universe/](https://github.com/MicrosoftEdge/Demos/tree/main/exploring-the-universe) | [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo | | Emulate a focused page | Used for [Emulate a focused page](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#emulate-a-focused-page) in _CSS features reference_. | [/emulate-focused-page/](https://github.com/MicrosoftEdge/Demos/tree/main/emulate-focused-page/) | [Emulate a focused page](https://microsoftedge.github.io/Demos/emulate-focused-page/) demo | +| Exploring the universe | Used for [Monitor Core Web Vitals metrics](../performance/overview.md#monitor-core-web-vitals-metrics) in _Performance tool: Analyze your website's performance_. | [/exploring-the-universe/](https://github.com/MicrosoftEdge/Demos/tree/main/exploring-the-universe) | [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo | | Heap Snapshot Visualizer | Used for [Heap Snapshot visualizer extension for DevTools](https://learn.microsoft.com/microsoft-edge/devtools/whats-new/2023/01/devtools-109#heap-snapshot-visualizer-extension-for-devtools) in _What's New in DevTools (Microsoft Edge 109)_. | [/heap-snapshot-visualizer/](https://github.com/MicrosoftEdge/Demos/tree/main/heap-snapshot-visualizer) | n/a | | Highlight pseudo-elements | Used for [View inherited highlight pseudo-elements](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-inherited-highlight-pseudo-elements) in _CSS features reference_. | [/highlight-pseudo-elements/](https://github.com/MicrosoftEdge/Demos/tree/main/highlight-pseudo-elements/) | [Highlight pseudo-elements](https://microsoftedge.github.io/Demos/highlight-pseudo-elements/) demo | | Idle detection | Used for [Emulate idle detector state](https://learn.microsoft.com/microsoft-edge/devtools/sensors/#emulate-idle-detector-state) in _Emulate device sensors_. | [/idle-detection/](https://github.com/MicrosoftEdge/Demos/tree/main/idle-detection) | [Idle detection demo](https://microsoftedge.github.io/Demos/idle-detection/) |