diff --git a/README.md b/README.md index dc4280ee..4952bdd6 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,12 @@ 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 | +| Cascade layers | Used for [View cascade layers](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-cascade-layers) in _CSS features reference_. | [/cascade-layers/](https://github.com/MicrosoftEdge/Demos/tree/main/cascade-layers/) | [Cascade layers](https://microsoftedge.github.io/Demos/cascade-layers/) 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 | @@ -55,24 +61,26 @@ sync'd July 30, 2025 | CSS Examples | Used for [Get started viewing and changing CSS](https://learn.microsoft.com/microsoft-edge/devtools/css/). | [/devtools-css-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-css-get-started) | [CSS Examples](https://microsoftedge.github.io/Demos/devtools-css-get-started/) demo | | DOM Examples | Used for [Get started viewing and changing the DOM](https://learn.microsoft.com/microsoft-edge/devtools/dom/). | [/devtools-dom-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-dom-get-started) | [DOM Examples](https://microsoftedge.github.io/Demos/devtools-dom-get-started/) demo | | Explain Console errors and warnings in Copilot in Edge | Generates errors in the Console that can then be explained by using Copilot in Edge. | [/devtools-explain-error/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-explain-error) | [Explain Console errors and warnings in Copilot in Edge](https://microsoftedge.github.io/Demos/devtools-explain-error/) demo | -| Inspect tool | Used for [Analyze pages using the Inspect tool](https://learn.microsoft.com/microsoft-edge/devtools/css/inspect). | [/devtools-inspect/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-inspect) | [Inspect tool demo](https://microsoftedge.github.io/Demos/devtools-inspect/) | | Inspect CSS Grid | Used for [Inspect CSS Grid](https://learn.microsoft.com/microsoft-edge/devtools/css/grid). | [/devtools-grid/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-grid) | [Inspect CSS Grid](https://microsoftedge.github.io/Demos/devtools-grid/) demo | +| Inspect tool | Used for [Analyze pages using the Inspect tool](https://learn.microsoft.com/microsoft-edge/devtools/css/inspect). | [/devtools-inspect/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-inspect) | [Inspect tool demo](https://microsoftedge.github.io/Demos/devtools-inspect/) | | Debugging JavaScript that adds two numbers | Used for [Get started debugging JavaScript](https://learn.microsoft.com/microsoft-edge/devtools/javascript/). | [/devtools-js-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) | [Debugging JavaScript with Microsoft Edge DevTools](https://microsoftedge.github.io/Demos/devtools-js-get-started/) demo | | Memory heap snapshot | Used for [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](https://learn.microsoft.com/microsoft-edge/devtools/memory-problems/heap-snapshots). | [/devtools-memory-heap-snapshot/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) | n/a | +| Network tool reference | Used for [Network features reference](https://learn.microsoft.com/microsoft-edge/devtools/network/reference). | [/devtools-network-reference/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-network-reference) | [Network tool reference demo](https://microsoftedge.github.io/Demos/devtools-network-reference/) | | **Performance** tool Activity Tabs | Used for [View activities in a table](https://learn.microsoft.com/microsoft-edge/devtools/performance/reference#view-activities-in-a-table) in _Performance features reference_, about the **Performance** tool's **Bottom-up**, **Call tree**, and **Event log** tabs. | [/devtools-performance-activitytabs/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-activitytabs) | [Activity Tabs demo](https://microsoftedge.github.io/Demos/devtools-performance-activitytabs/) | | 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/) | +| 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/) | | JSON dummy data | Simple JSON files. Used for [View a JSON file or server response with formatting](https://learn.microsoft.com/microsoft-edge/web-platform/json-viewer). | [/json-dummy-data/](https://github.com/MicrosoftEdge/Demos/tree/main/json-dummy-data) | [JSON dummy data](https://microsoftedge.github.io/Demos/json-dummy-data/) (Readme) | | Inspect Network Activity | Used for [Inspect network activity](https://learn.microsoft.com/microsoft-edge/devtools/network/). | [/network-tutorial/](https://github.com/MicrosoftEdge/Demos/tree/main/network-tutorial) | [Inspect Network Activity demo](https://microsoftedge.github.io/Demos/network-tutorial/) | -| Network tool reference | Used for [Network features reference](https://learn.microsoft.com/microsoft-edge/devtools/network/reference). | [/devtools-network-reference/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-network-reference) | [Network tool reference demo](https://microsoftedge.github.io/Demos/devtools-network-reference/) | | Photo gallery | Used for [View your custom data in the performance profile](https://learn.microsoft.com/microsoft-edge/devtools/performance/extension#view-your-custom-data-in-the-performance-profile) in _Customize performance profile with extensibility APIs_, and [The truth about CSS selector performance](https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/). | [/photo-gallery/](https://github.com/MicrosoftEdge/Demos/tree/main/photo-gallery) | [Photo Gallery](https://microsoftedge.github.io/Demos/photo-gallery/) demo | | Slow Calendar | Simple calendar demo app to test DevTools features such as the **Performance** tool and source map support. Used for [Added source map support in the Coverage tool](https://learn.microsoft.com/microsoft-edge/devtools/whats-new/2024/01/devtools-121#added-source-map-support-in-the-coverage-tool) in _What's New in DevTools (Microsoft Edge 121)_. | [/slow-calendar/](https://github.com/MicrosoftEdge/Demos/tree/main/slow-calendar) | [Slow Calendar](https://microsoftedge.github.io/Demos/slow-calendar/public/) demo | | Margie's Travel | Demonstrates how to optimize a webpage's resources to make it load, appear, and be interactive faster. Used for [Optimize website speed using Lighthouse](https://learn.microsoft.com/microsoft-edge/devtools/speed/get-started). | [/travel-site/](https://github.com/MicrosoftEdge/Demos/tree/main/travel-site) | [Margie's Travel](https://microsoftedge.github.io/Demos/travel-site/) demo | | Workspaces | Used for [Edit and save files in a workspace (Sources tool Workspace tab)](https://learn.microsoft.com/microsoft-edge/devtools/workspaces/). | [/workspaces/](https://github.com/MicrosoftEdge/Demos/tree/main/workspaces) | [DevTools Workspaces demo](https://microsoftedge.github.io/Demos/workspaces/) | -| 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/) | See also: diff --git a/at-rules-font-palette-values/README.md b/at-rules-font-palette-values/README.md new file mode 100644 index 00000000..a50a32a8 --- /dev/null +++ b/at-rules-font-palette-values/README.md @@ -0,0 +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/)** ⬅️ + +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-font-palette-values/index.html b/at-rules-font-palette-values/index.html new file mode 100644 index 00000000..5461917e --- /dev/null +++ b/at-rules-font-palette-values/index.html @@ -0,0 +1,17 @@ + + + + + + + + View `@font-palette-values` at-rules + + + + +

old colors

+

new colors

+ + + \ No newline at end of file diff --git a/at-rules-font-palette-values/styles.css b/at-rules-font-palette-values/styles.css new file mode 100644 index 00000000..bb259770 --- /dev/null +++ b/at-rules-font-palette-values/styles.css @@ -0,0 +1,17 @@ +@import url(https://fonts.googleapis.com/css2?family=Foldit:wght@700); + +p { + font-family: 'Foldit'; + font-size: 2rem; +} + +@font-palette-values --New { + font-family: 'Foldit'; + override-colors: + 0 gold, + 1 red; +} + +.new { + font-palette: --New; +} \ No newline at end of file diff --git a/at-rules-position-try/README.md b/at-rules-position-try/README.md new file mode 100644 index 00000000..2d948112 --- /dev/null +++ b/at-rules-position-try/README.md @@ -0,0 +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/)** ⬅️ + +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-position-try/index.html b/at-rules-position-try/index.html new file mode 100644 index 00000000..44473fce --- /dev/null +++ b/at-rules-position-try/index.html @@ -0,0 +1,31 @@ + + + + + + + + View `@position-try` at-rules + + + + + + + + + + \ No newline at end of file diff --git a/at-rules-position-try/styles.css b/at-rules-position-try/styles.css new file mode 100644 index 00000000..52df9eb2 --- /dev/null +++ b/at-rules-position-try/styles.css @@ -0,0 +1,100 @@ +/* anchoring */ +[popovertarget="menu"] { + anchor-name: --menu; +} + +[popovertarget="submenu"] { + anchor-name: --submenu; +} + +#menu { + position: absolute; + margin: 0; + position-anchor: --menu; + left: anchor(--menu left); + top: anchor(--menu bottom); +} + +#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; +} + +@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; + } +} \ No newline at end of file diff --git a/at-rules-property/README.md b/at-rules-property/README.md new file mode 100644 index 00000000..c01f490d --- /dev/null +++ b/at-rules-property/README.md @@ -0,0 +1,5 @@ +# View `@property` CSS at-rules + +➡️ 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-property/index.html b/at-rules-property/index.html new file mode 100644 index 00000000..117a0dde --- /dev/null +++ b/at-rules-property/index.html @@ -0,0 +1,20 @@ + + + + + + + + View `@property` at-rules + + + + +
    +
  1. Item one
    2. +
  2. Item two
    3. +
  3. Item three
    4. +
+ + + \ No newline at end of file diff --git a/at-rules-property/styles.css b/at-rules-property/styles.css new file mode 100644 index 00000000..0f02e755 --- /dev/null +++ b/at-rules-property/styles.css @@ -0,0 +1,33 @@ +@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-scope/README.md b/at-rules-scope/README.md new file mode 100644 index 00000000..656afe39 --- /dev/null +++ b/at-rules-scope/README.md @@ -0,0 +1,5 @@ +# View `@scope` CSS at-rules + +➡️ 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-scope/index.html b/at-rules-scope/index.html new file mode 100644 index 00000000..c1953a7e --- /dev/null +++ b/at-rules-scope/index.html @@ -0,0 +1,19 @@ + + + + + + + + View `@scope` at-rules + + + + +

I'm just a piece of text.

+
+

I'm the text that lives on a card.

+
+ + + \ No newline at end of file diff --git a/at-rules-scope/styles.css b/at-rules-scope/styles.css new file mode 100644 index 00000000..903c15d3 --- /dev/null +++ b/at-rules-scope/styles.css @@ -0,0 +1,23 @@ +@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; +} \ No newline at end of file diff --git a/at-rules-supports/README.md b/at-rules-supports/README.md new file mode 100644 index 00000000..031046e2 --- /dev/null +++ b/at-rules-supports/README.md @@ -0,0 +1,5 @@ +# View `@supports` CSS at-rules + +➡️ 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/at-rules-supports/index.html b/at-rules-supports/index.html new file mode 100644 index 00000000..9b478be3 --- /dev/null +++ b/at-rules-supports/index.html @@ -0,0 +1,45 @@ + + + + + + + + View `@supports` at-rules + + + +
+
+ + + + \ No newline at end of file diff --git a/cascade-layers/README.md b/cascade-layers/README.md new file mode 100644 index 00000000..37eba72d --- /dev/null +++ b/cascade-layers/README.md @@ -0,0 +1,5 @@ +# 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/cascade-layers/index.html b/cascade-layers/index.html new file mode 100644 index 00000000..63a186b5 --- /dev/null +++ b/cascade-layers/index.html @@ -0,0 +1,49 @@ + + + + + + + + + + Cascade layers + + + +
+ + + + \ No newline at end of file diff --git a/emulate-focused-page/README.md b/emulate-focused-page/README.md new file mode 100644 index 00000000..2cf5042e --- /dev/null +++ b/emulate-focused-page/README.md @@ -0,0 +1,5 @@ +# Emulate a 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/emulate-focused-page/index.html b/emulate-focused-page/index.html new file mode 100644 index 00000000..6851c030 --- /dev/null +++ b/emulate-focused-page/index.html @@ -0,0 +1,72 @@ + + + + + + + + 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/highlight-pseudo-elements/README.md b/highlight-pseudo-elements/README.md new file mode 100644 index 00000000..35df9094 --- /dev/null +++ b/highlight-pseudo-elements/README.md @@ -0,0 +1,5 @@ +# 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_. diff --git a/highlight-pseudo-elements/index.html b/highlight-pseudo-elements/index.html new file mode 100644 index 00000000..67d48d11 --- /dev/null +++ b/highlight-pseudo-elements/index.html @@ -0,0 +1,25 @@ + + + + + + + + + + Highlight pseudo-elements + + + +
+
I inherited the style of my parent's highlight pseudo-element. Select me!
+
+ + + + \ No newline at end of file