From 030a5d3c1e1951779b0d587103b9b7b1d9d4f358 Mon Sep 17 00:00:00 2001
From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com>
Date: Thu, 9 Apr 2026 13:50:54 -0700
Subject: [PATCH 01/27] reveal headings
---
microsoft-edge/devtools/css/reference.md | 101 +++++++++++++++++------
1 file changed, 74 insertions(+), 27 deletions(-)
diff --git a/microsoft-edge/devtools/css/reference.md b/microsoft-edge/devtools/css/reference.md
index fd0747e8cb..78fea58ff1 100644
--- a/microsoft-edge/devtools/css/reference.md
+++ b/microsoft-edge/devtools/css/reference.md
@@ -6,7 +6,7 @@ ms.author: msedgedevrel
ms.topic: article
ms.service: microsoft-edge
ms.subservice: devtools
-ms.date: 04/02/2026
+ms.date: 04/09/2026
---
-
-
Discover new workflows in the following comprehensive reference of Microsoft Edge DevTools features related to viewing and changing CSS.
To learn the basics, see [Get started viewing and changing CSS](../css/index.md).
**Detailed contents:**
+
* [Select an element](#select-an-element)
* [View CSS](#view-css)
* [View the external stylesheet where a rule is defined](#view-the-external-stylesheet-where-a-rule-is-defined)
@@ -92,29 +91,39 @@ Use the **Elements** > **Styles** and **Computed** tabs to view CSS rules and di
-
+#### Navigate with links
+todo
+
-
+#### View tooltips with CSS documentation, specificity, and custom property values
+todo
+
-
+###### View CSS documentation
+todo
+
-
+###### View selector specificity
+todo
+
-
+###### View the values of custom properties
+todo
+
#### View the external stylesheet where a rule is defined
@@ -132,9 +141,11 @@ In the following figure, after you click
-
+#### View invalid, overridden, inactive, and other CSS
+todo
+
#### View only the CSS that is actually applied to an element
@@ -172,34 +183,46 @@ Check the **Show All** checkbox in the **Computed** pane. See [View only the CS
-
+#### View CSS at-rules
+todo
+
-
+###### View @property at-rules
+todo
+
-
+###### View @supports at-rules
+todo
+
-
+###### View @scope at-rules
+todo
+
-
+###### View @font-palette-values at-rules
+todo
+
-
+###### View @position-try at-rules
+todo
+
#### View an element's box model
@@ -232,9 +255,11 @@ In the following figure, the **Computed** pane is filtered to only show declarat
-
+#### Emulate a focused page
+todo
+
#### Toggle a pseudo-class
@@ -283,14 +308,18 @@ For an interactive tutorial, see [Add a pseudo-state to a class](../css/index.md
-
+#### View inherited highlight pseudo-elements
+todo
+
-
+#### View cascade layers
+todo
+
#### View a page in print mode
@@ -342,9 +371,11 @@ See [Force DevTools into Print Preview mode](../css/print-preview.md).
-
+## Copy CSS
+todo
+
## Change CSS
@@ -423,14 +454,18 @@ To change a numerical value, type in the value, or use the arrow keys, per the n
-
+#### Change enumerable values with keyboard shortcuts
+todo
+
-
+#### Change length values
+todo
+
#### Increment numerical declaration values
@@ -466,7 +501,9 @@ To add a class to an element:
-
+#### Emulate light and dark theme preferences and enable automatic dark mode
+
+todo
@@ -543,14 +580,18 @@ To toggle a single declaration on or off:
-
+#### Edit the ::view-transition pseudo-elements during an animation
+todo
+
-
+#### Align grid items and their content with the Grid Editor
+todo
+
#### Change colors with the Color Picker
@@ -697,19 +738,25 @@ Use the **Easing Editor** to change the value of the [animation-timing-function]
-
+#### Use presets to adjust timings
+todo
+
-
+#### Configure custom timings
+todo
+
-
+## (Experimental) Copy CSS changes
+todo
+
## See also
From 7ea9e6431eaf96a22494316de05d91db7b4490b2 Mon Sep 17 00:00:00 2001
From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com>
Date: Thu, 9 Apr 2026 14:08:20 -0700
Subject: [PATCH 02/27] update local toc
---
microsoft-edge/devtools/css/reference.md | 37 +++++++++++++++++++-----
1 file changed, 30 insertions(+), 7 deletions(-)
diff --git a/microsoft-edge/devtools/css/reference.md b/microsoft-edge/devtools/css/reference.md
index 78fea58ff1..5cd8a4511c 100644
--- a/microsoft-edge/devtools/css/reference.md
+++ b/microsoft-edge/devtools/css/reference.md
@@ -29,36 +29,59 @@ Discover new workflows in the following comprehensive reference of Microsoft Edg
To learn the basics, see [Get started viewing and changing CSS](../css/index.md).
**Detailed contents:**
-
* [Select an element](#select-an-element)
* [View CSS](#view-css)
+ * [Navigate with links](#navigate-with-links)
+ * [View tooltips with CSS documentation, specificity, and custom property values](#view-tooltips-with-css-documentation-specificity-and-custom-property-values)
+ * [View CSS documentation](#view-css-documentation)
+ * [View selector specificity](#view-selector-specificity)
+ * [View the values of custom properties](#view-the-values-of-custom-properties)
* [View the external stylesheet where a rule is defined](#view-the-external-stylesheet-where-a-rule-is-defined)
+ * [View invalid, overridden, inactive, and other CSS](#view-invalid-overridden-inactive-and-other-css)
* [View only the CSS that is actually applied to an element](#view-only-the-css-that-is-actually-applied-to-an-element)
* [View CSS properties in alphabetical order](#view-css-properties-in-alphabetical-order)
* [View inherited CSS properties](#view-inherited-css-properties)
+ * [View CSS at-rules](#view-css-at-rules)
+ * [View `@property` at-rules](#view-property-at-rules)
+ * [View `@supports` at-rules](#view-supports-at-rules)
+ * [View `@scope` at-rules](#view-scope-at-rules)
+ * [View `@font-palette-values` at-rules](#view-font-palette-values-at-rules)
+ * [View `@position-try` at-rules](#view-position-try-at-rules)
* [View an element's box model](#view-an-elements-box-model)
* [Search and filter the CSS of an element](#search-and-filter-the-css-of-an-element)
+ * [Emulate a focused page](#emulate-a-focused-page)
* [Toggle a pseudo-class](#toggle-a-pseudo-class)
+ * [View inherited highlight pseudo-elements](#view-inherited-highlight-pseudo-elements)
+ * [View cascade layers](#view-cascade-layers)
* [View a page in print mode](#view-a-page-in-print-mode)
* [View used and unused CSS with the Coverage tool](#view-used-and-unused-css-with-the-coverage-tool)
* [Force print preview mode](#force-print-preview-mode)
+* [Copy CSS](#copy-css)
* [Change CSS](#change-css)
* [Two ways to add a CSS declaration to an element](#two-ways-to-add-a-css-declaration-to-an-element)
* [Adding an inline CSS declaration to an element](#adding-an-inline-css-declaration-to-an-element)
* [Adding a CSS declaration to an existing style rule](#adding-a-css-declaration-to-an-existing-style-rule)
* [Change a declaration name or value](#change-a-declaration-name-or-value)
+ * [Change enumerable values with keyboard shortcuts](#change-enumerable-values-with-keyboard-shortcuts)
+ * [Change length values](#change-length-values)
* [Increment numerical declaration values](#increment-numerical-declaration-values)
* [Add a class to an element](#add-a-class-to-an-element)
+ * [Emulate light and dark theme preferences and enable automatic dark mode](#emulate-light-and-dark-theme-preferences-and-enable-automatic-dark-mode)
* [Toggle a class](#toggle-a-class)
* [Add a style rule](#add-a-style-rule)
* [Select a stylesheet to add a rule to](#select-a-stylesheet-to-add-a-rule-to)
* [Add a style rule to a specific location](#add-a-style-rule-to-a-specific-location)
* [Toggle a declaration](#toggle-a-declaration)
+ * [Edit the `::view-transition` pseudo-elements during an animation](#edit-the-view-transition-pseudo-elements-during-an-animation)
+ * [Align grid items and their content with the Grid Editor](#align-grid-items-and-their-content-with-the-grid-editor)
* [Change colors with the Color Picker](#change-colors-with-the-color-picker)
* [Sample a color off the page with the Eyedropper](#sample-a-color-off-the-page-with-the-eyedropper)
* [Change angle value with the Angle Clock](#change-angle-value-with-the-angle-clock)
* [Change box and text shadows with the Shadow Editor](#change-box-and-text-shadows-with-the-shadow-editor)
* [Edit animation and transition timings with the Easing Editor](#edit-animation-and-transition-timings-with-the-easing-editor)
+ * [Use presets to adjust timings](#use-presets-to-adjust-timings)
+ * [Configure custom timings](#configure-custom-timings)
+* [(Experimental) Copy CSS changes](#experimental-copy-css-changes)
* [See also](#see-also)
@@ -190,35 +213,35 @@ todo
-###### View @property at-rules
+###### View `@property` at-rules
todo
-###### View @supports at-rules
+###### View `@supports` at-rules
todo
-###### View @scope at-rules
+###### View `@scope` at-rules
todo
-###### View @font-palette-values at-rules
+###### View `@font-palette-values` at-rules
todo
-###### View @position-try at-rules
+###### View `@position-try` at-rules
todo
@@ -580,7 +603,7 @@ To toggle a single declaration on or off:
-#### Edit the ::view-transition pseudo-elements during an animation
+#### Edit the `::view-transition` pseudo-elements during an animation
todo
From 7b15119ce3bcd54f577ca5618d50b421066bb4d6 Mon Sep 17 00:00:00 2001
From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com>
Date: Thu, 9 Apr 2026 14:58:00 -0700
Subject: [PATCH 03/27] populate text in sections
---
microsoft-edge/devtools/css/reference.md | 379 +++++++++++++++++++++--
1 file changed, 352 insertions(+), 27 deletions(-)
diff --git a/microsoft-edge/devtools/css/reference.md b/microsoft-edge/devtools/css/reference.md
index 5cd8a4511c..02b108c954 100644
--- a/microsoft-edge/devtools/css/reference.md
+++ b/microsoft-edge/devtools/css/reference.md
@@ -24,6 +24,10 @@ ms.date: 04/09/2026
# CSS features reference
+
+
Discover new workflows in the following comprehensive reference of Microsoft Edge DevTools features related to viewing and changing CSS.
To learn the basics, see [Get started viewing and changing CSS](../css/index.md).
@@ -81,7 +85,7 @@ To learn the basics, see [Get started viewing and changing CSS](../css/index.md)
* [Edit animation and transition timings with the Easing Editor](#edit-animation-and-transition-timings-with-the-easing-editor)
* [Use presets to adjust timings](#use-presets-to-adjust-timings)
* [Configure custom timings](#configure-custom-timings)
-* [(Experimental) Copy CSS changes](#experimental-copy-css-changes)
+* [Copy CSS changes](#copy-css-changes)
* [See also](#see-also)
@@ -117,35 +121,77 @@ Use the **Elements** > **Styles** and **Computed** tabs to view CSS rules and di
#### Navigate with links
-todo
+
+
+The Styles tab displays links in various places to various other places, including but not limited to:
+
+Next to CSS rules, to style sheets and CSS sources. Such links open the Sources panel. If the style sheet is minified, see Make a minified file readable.
+
+In the Inherited from ... sections, to parent elements.
+
+In var() calls, to custom property declarations.
+
+In animation shorthand properties, to @keyframes.
+
+Learn more links in documentation tooltips.
+
+And more.
+
+Here are some of them highlighted:
+
+Various links highlighted.
+
+Links may be styled differently. If you're not sure if something is a link, try clicking it to find out.
#### View tooltips with CSS documentation, specificity, and custom property values
-todo
+
+
+Elements > Styles shows tooltips with useful information when you hover over specific elements.
###### View CSS documentation
-todo
+
+
+To see a tooltip with a short CSS description, hover over the property name in the Styles tab.
+
+DevTools pulls the descriptions for tooltips from VS Code Custom Data.
+
+The tooltip with documentation on a CSS property.
+
+Click Learn more to go to an MDN CSS Reference on this property.
+
+To turn the tooltips off, check Checkbox. Don't show.
+
+To turn them back on, check Settings. Settings > Preferences > Elements > Checkbox. Show CSS documentation tooltip.
###### View selector specificity
-todo
+
+
+Hover over a selector to see a tooltip with its specificity weight.
+
+The tooltip with specificity weight of a matched selector.
###### View the values of custom properties
-todo
+
+
+Hover over a --custom-property to see its value in a tooltip.
+
+The value of a custom property in a tooltip.
@@ -167,7 +213,11 @@ In the following figure, after you click
#### View invalid, overridden, inactive, and other CSS
-todo
+
+
+The Styles tab recognizes many kinds of CSS issues and highlights them in different ways.
+
+See Understand CSS in the Styles tab.
@@ -190,6 +240,9 @@ The **Styles** pane shows you all of the rules that apply to an element, includi

+See also:
+* [Understand CSS in the Computed tab] in _Find invalid, overridden, inactive, and other CSS_.
+
#### View CSS properties in alphabetical order
@@ -209,42 +262,121 @@ Check the **Show All** checkbox in the **Computed** pane. See [View only the CS
#### View CSS at-rules
-todo
+
+
+At-rules are CSS statements that let you control CSS behavior. Elements > Styles shows the following at-rules in dedicated sections:
+
+@property
+@supports
+@scope
+@font-palette-values
+@position-try
###### View `@property` at-rules
-todo
+
+
+The @property CSS at-rule lets you define CSS custom properties explicitly and register them in a style sheet without running any JavaScript.
+
+Hover over the name of such property in the Styles tab, to see a tooltip with the property's value, descriptors, and a link to its registration in the collapsible @property section at the bottom of the Styles tab.
+
+To edit an @property rule, double-click its name or value.
###### View `@supports` at-rules
-todo
+
+
+The Styles tab shows you the @supports CSS at-rules if they are applied to an element. For example, inspect the following element:
+
+View @supports at-rules.
+
+If your browser supports the lab() function, the element is green, otherwise it's purple.
+
+Only Safari supports the CIELAB color space. https://caniuse.com/?search=lab
###### View `@scope` at-rules
-todo
+
+
+The Styles tab shows you CSS @scope at-rules if they are applied to an element.
+
+The new @scope at-rules are a part of the CSS Cascading and Inheritance Level 6 specification. These rules allow you to scope CSS styles, in other words, explicitly apply styles to specific elements.
+
+The @scope at-rule feature is experimental. To test it, enable the Experimental Web Platform features flag in chrome://flags/#enable-experimental-web-platform-features. Otherwise, the next preview doesn't work.
+
+View the @scope rule in the following preview:
+
+
+Inspect the text on the card in the preview.
+
+On the Styles tab, find the @scope rule.
+
+The @scope rule.
+
+In this example, the @scope rule overrides the global CSS background-color declaration for all
elements inside elements with a card class.
+
+To edit the @scope rule, double-click it.
###### View `@font-palette-values` at-rules
-todo
+
+
+The @font-palette-values CSS at-rule lets you customize the default values of the font-palette property. Elements > Styles shows this at-rule in a dedicated section.
+
+View the @font-palette-values section in the next preview:
+
+Inspect the second line of text in the preview.
+
+In Styles, find the @font-palette-values section.
+
+The @font-palette-values rule.
+
+In this example, the --New font palette values override the default ones of the colored font.
+
+To edit your custom values, double-click them.
###### View `@position-try` at-rules
-todo
+
+
+The @position-try CSS rule along with the position-try-options property lets you define alternative anchor positions for elements. To learn more, see Introducing the CSS anchor positioning API.
+
+Elements > Styles resolves and links the following:
+
+position-try-options property values to a dedicated @position-try --name section.
+
+position-anchor property values and anchor() arguments to the corresponding elements with popovertarget attributes.
+
+Inspect the position-try-options values and @position-try sections in the next preview:
+
+Demo using anchor with popover
+
+In the preview, open the submenu, that is, click YOUR ACCOUNT then STOREFRONT.
+
+Inspect the element with id="submenu" in the preview.
+
+In Styles, find the position-try-options property and click its --bottom value. The Styles tab takes you to the corresponding @position-try section.
+
+Click the position-anchor value link or the same anchor() arguments. The Elements panel selects the element with the corresponding popovertarget attribute and the Styles tab shows the element's CSS.
+
+The position-try-options property, the @position-try section, and the element with the popover target attribute.
+
+To edit values, double-click them.
@@ -281,7 +413,25 @@ In the following figure, the **Computed** pane is filtered to only show declarat
#### Emulate a focused page
-todo
+
+
+If you switch focus from the page to DevTools, some overlay elements automatically hide if they are triggered by focus. For example, drop-down lists, menus, or date pickers. The check_box Emulate a focused page option lets you debug such an element as if it is in focus.
+
+Caution: With this option turned on, the document.visibilityState is set to visible and the visibilitychange event doesn't fire. For more information, see Page Visibility API.
+
+Try emulating a focused page on this demo page:
+
+Focus the input element. Another element appears under it.
+
+Open DevTools. The DevTools window is now in focus instead of the page, so the element disappears again.
+
+In Elements > Styles, click :hov, check check_box Emulate a focused page, and make sure the input element is selected. You can now inspect the element under it.
+
+Before and after turning on the 'Emulate a focused page' option.
+
+You can also find the same option on the Rendering panel.
+
+To discover more ways to freeze an element, see Freeze screen and inspect disappearing elements.
@@ -322,7 +472,6 @@ The **Styles** tab shows the following pseudo-classes for all elements:
* [`:hover`](https://developer.mozilla.org/docs/Web/CSS/:hover)
* [`:focus-visible`](https://developer.mozilla.org/docs/Web/CSS/:focus-visible)
-
Additionally, some elements might have element-specific pseudo-classes. When you select such an element, the **Styles** tab shows a **Force specific element state** section that you can expand and turn on pseudo-classes that are specific to the element, such as a **:read-write** checkbox:

@@ -334,14 +483,44 @@ For an interactive tutorial, see [Add a pseudo-state to a class](../css/index.md
#### View inherited highlight pseudo-elements
-todo
+
+
+Pseudo-elements let you style specific parts of elements. Highlight pseudo-elements are document portions with a "selected" status and they are styled as "highlighted" to indicate this status to the user. For example, such pseudo-elements are ::selection, ::spelling-error, ::grammar-error, and ::highlight.
+
+As mentioned in the specification, when multiple styles conflict, cascade determines the winning style.
+
+To enable this feature, run Chrome with the --enable-blink-features=HighlightInheritance flag.
+
+To better understand the inheritance and priority of the rules, you can view the inherited highlight pseudo-elements:
+
+Inspect the text below.
+
+I inherited the style of my parent's highlight pseudo-element. Select me!
+
+Select a portion of the text above.
+
+In the Styles tab, scroll down to find the Inherited from ::selection pseudo of... section.
+
+View the Inherited section of the Styles tab.
#### View cascade layers
-todo
+
+
+Cascade layers enable more explicit control of your CSS files to prevent style-specificity conflicts. This is useful for large codebases, design systems, and when managing third-party styles in applications.
+
+To view cascade layers, inspect the next element and open Elements > Styles.
+
+In the Styles tab, view the 3 cascade layers and their styles: page, component and base.
+
+Cascade layers.
+
+To view the layer order, click the layer name or the Toggle layers. Toggle CSS layers view button.
+
+The page layer has the highest specificity, therefore the element's background is green.
@@ -397,7 +576,37 @@ See [Force DevTools into Print Preview mode](../css/print-preview.md).
## Copy CSS
-todo
+
+
+From a single drop-down menu in the Styles tab, you can copy separate CSS rules, declarations, properties, values
+
+Additionally, you can copy CSS properties in JavaScript syntax. This option is handy if you're using CSS-in-JS libraries.
+
+To copy CSS:
+
+Select an element.
+
+In the Elements > Styles tab, right-click a CSS property. Copy CSS drop-down menu.
+
+Select one of the following options from the drop-down menu:
+
+Copy declaration. Copies the property and its value in CSS syntax: css property: value;
+
+Copy property. Copies only the property name.
+
+Copy value. Copies only the value.
+
+Copy rule. Copies the entire CSS rule: css selector[, selector] { property: value; property: value; ... }
+
+Copy declaration as JS. Copies the property and its value in JavaScript syntax: js propertyInCamelCase: 'value'
+
+Copy all declarations. Copies all properties and their values in the CSS rule: css property: value; property: value; ...
+
+Copy all declarations as JS. Copies all properties and their values in JavaScript syntax: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...
+
+Copy all CSS changes. Copies the changes you make in the Styles tab across all declarations.
+
+View computed value. Takes you to the Computed tab.
@@ -409,6 +618,7 @@ This section lists all the ways you can change CSS in **Elements** > **Styles**.
Additionally, you can:
* Override CSS across page loads. See [Override webpage resources with local copies (Overrides tab)](../javascript/overrides.md).
+
* Save modified CSS to your local sources in a workspace. See [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md).
@@ -480,14 +690,44 @@ To change a numerical value, type in the value, or use the arrow keys, per the n
#### Change enumerable values with keyboard shortcuts
-todo
+
+
+While editing an enumerable value of a declaration, for example, font-size, you can use the following keyboard shortcuts to increment the value by a fixed amount:
+
+Option+Up (Mac) or Alt+Up (Windows, Linux) to increment by 0.1.
+
+Up to change the value by 1, or by 0.1 if the current value is between -1 and 1.
+
+Shift+Up to increment by 10.
+
+Shift+Command+Up (Mac) or Control+Shift+Page Up (Windows, Linux) to increment the value by 100.
+
+Decrementing also works. Just replace each instance of Up mentioned earlier with Down.
#### Change length values
-todo
+
+
+Deprecated: This feature is deprecated in Chrome 123. To temporarily turn it back on again, clear the settings Settings > Experiments > check_box Deprecate CSS authoring tool in the Styles tab. Feel free to leave feedback in crbug/1522657.
+
+You can use your pointer to change any property with length, such as width, height, padding, margin, or border.
+
+To change the length unit:
+
+Hover over the unit name and notice that it's underlined.
+
+Click the unit name to select a unit from the drop-down.
+
+To change the length value:
+
+Hover over the unit value and notice that your pointer changes to a horizontal double-headed arrow.
+
+Drag horizontally to increase or decrease the value.
+
+To adjust the value by 10, hold Shift when dragging.
@@ -526,7 +766,21 @@ To add a class to an element:
#### Emulate light and dark theme preferences and enable automatic dark mode
-todo
+
+
+To toggle automatic dark mode or emulate the user's preference of light or dark themes:
+
+On the Elements > Styles tab, click Toggle common rendering emulations.Toggle common rendering emulations. Toggle common rendering emulations.
+
+Select one of the following from the drop-down list:
+
+prefers-color-scheme: light. Indicates that the user prefers the light theme.
+
+prefers-color-scheme: dark. Indicates that the user prefers the dark theme.
+
+Automatic dark mode. Displays your page in dark mode even if you didn't implement it. Additionally, sets prefers-color-scheme to dark automatically.
+
+This drop-down is a shortcut for Emulate CSS media feature prefers-color-scheme and Enable automatic dark mode options of the Rendering tab.
@@ -606,14 +860,20 @@ To toggle a single declaration on or off:
#### Edit the `::view-transition` pseudo-elements during an animation
-todo
+
+
+See the corresponding section in Animations. https://developer.chrome.com/docs/devtools/css/animations#view-transition
+
+For more information, see Smooth and simple transitions with the View Transitions API. https://developer.chrome.com/docs/web-platform/view-transitions
#### Align grid items and their content with the Grid Editor
-todo
+
+
+See the corresponding section in Inspect CSS grid. https://developer.chrome.com/docs/devtools/css/grid#grid-editor
@@ -764,21 +1024,86 @@ Use the **Easing Editor** to change the value of the [animation-timing-function]
#### Use presets to adjust timings
-todo
+
+
+Use presets to adjust timings
+To adjust timings with a click, use the presets in the Easing Editor:
+
+In the Easing Editor, to set a keyword value, click one of the picker buttons:
+linear The linear button.
+ease-in-out The ease-in-out button.
+ease-in The ease-in button.
+ease-out The ease-out button.
+In the Presets switcher, click Left. or Right. buttons to pick one of the following presets:
+
+Linear presets: elastic, bounce, or emphasized.
+Cubic Bezier presets:
+
+
+Timing keyword Preset Cubic Bezier
+
+
+ease-in-out In Out, Sine cubic-bezier(0.45, 0.05, 0.55, 0.95)
+In Out, Quadratic cubic-bezier(0.46, 0.03, 0.52, 0.96)
+In Out, Cubic cubic-bezier(0.65, 0.05, 0.36, 1)
+Fast Out, Slow In cubic-bezier(0.4, 0, 0.2, 1)
+In Out, Back cubic-bezier(0.68, -0.55, 0.27, 1.55)
+
+
+ease-in In, Sine cubic-bezier(0.47, 0, 0.75, 0.72)
+In, Quadratic cubic-bezier(0.55, 0.09, 0.68, 0.53)
+In, Cubic cubic-bezier(0.55, 0.06, 0.68, 0.19)
+In, Back cubic-bezier(0.6, -0.28, 0.74, 0.05)
+Fast Out, Linear In cubic-bezier(0.4, 0, 1, 1)
+
+
+ease-out Out, Sine cubic-bezier(0.39, 0.58, 0.57, 1)
+Out, Quadratic cubic-bezier(0.25, 0.46, 0.45, 0.94)
+Out, Cubic cubic-bezier(0.22, 0.61, 0.36, 1)
+Linear Out, Slow In cubic-bezier(0, 0, 0.2, 1)
+Out, Back cubic-bezier(0.18, 0.89, 0.32, 1.28)
#### Configure custom timings
-todo
+
+
+To set custom values for timing functions, use the control points on the lines:
+
+For linear functions, click anywhere on the line to add a control point and drag it. Double-click to remove the point.
+
+Dragging a control point of a linear function.
+
+For Cubic Bezier functions, drag one of the control points.
+
+Dragging the control points of a Cubic Bezier function.
+
+Any change triggers a ball animation in the Preview at the top of editor.
-## (Experimental) Copy CSS changes
+## Copy CSS changes
-todo
+
+
+The **Styles** tab in the **Elements** tool highlights your CSS changes in green.
+
+To copy a single CSS declaration change:
+
+* Hover over the highlighted declaration and click the [todo: Copy icon] **Copy** button:
+
+ ![Copy a CSS declaration change]() todo
+
+To copy all CSS changes across declarations at once:
+
+* Right-click on any declaration and then select **Copy all CSS changes**:
+
+ ![Copy all CSS changes]() todo
+
+You can additionally track changes that you make, by using the **Changes** tool. See [Changes: Track your HTML, CSS, and JavaScript changes](https://developer.chrome.com/docs/devtools/changes).
From ffef4d49b0e3519adaa7708618b050894cf2e2f5 Mon Sep 17 00:00:00 2001
From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com>
Date: Fri, 10 Apr 2026 07:39:34 -0700
Subject: [PATCH 04/27] avoid "new"
---
microsoft-edge/devtools/css/reference.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/microsoft-edge/devtools/css/reference.md b/microsoft-edge/devtools/css/reference.md
index 02b108c954..428362ddb5 100644
--- a/microsoft-edge/devtools/css/reference.md
+++ b/microsoft-edge/devtools/css/reference.md
@@ -309,7 +309,7 @@ Only Safari supports the CIELAB color space. https://caniuse.com/?search=lab
The Styles tab shows you CSS @scope at-rules if they are applied to an element.
-The new @scope at-rules are a part of the CSS Cascading and Inheritance Level 6 specification. These rules allow you to scope CSS styles, in other words, explicitly apply styles to specific elements.
+The `@scope` at-rules are a part of the CSS Cascading and Inheritance Level 6 specification. These rules allow you to scope CSS styles, in other words, explicitly apply styles to specific elements.
The @scope at-rule feature is experimental. To test it, enable the Experimental Web Platform features flag in chrome://flags/#enable-experimental-web-platform-features. Otherwise, the next preview doesn't work.
From 1abdfd9b130e484fd55984a958f47e9d358d1758 Mon Sep 17 00:00:00 2001
From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com>
Date: Fri, 10 Apr 2026 13:27:41 -0700
Subject: [PATCH 05/27] format
---
microsoft-edge/devtools/css/reference.md | 437 ++++++++++++++---------
1 file changed, 262 insertions(+), 175 deletions(-)
diff --git a/microsoft-edge/devtools/css/reference.md b/microsoft-edge/devtools/css/reference.md
index 428362ddb5..572df9e538 100644
--- a/microsoft-edge/devtools/css/reference.md
+++ b/microsoft-edge/devtools/css/reference.md
@@ -6,7 +6,7 @@ ms.author: msedgedevrel
ms.topic: article
ms.service: microsoft-edge
ms.subservice: devtools
-ms.date: 04/09/2026
+ms.date: 04/10/2026
---
-The Styles tab displays links in various places to various other places, including but not limited to:
+The **Styles** tab displays links in various places to various other places, including but not limited to:
-Next to CSS rules, to style sheets and CSS sources. Such links open the Sources panel. If the style sheet is minified, see Make a minified file readable.
+* Next to CSS rules, to style sheets and CSS sources. Such links open the **Sources** tool. If the style sheet is minified, see [Make a minified file readable]. https://developer.chrome.com/docs/devtools/javascript/reference#format
-In the Inherited from ... sections, to parent elements.
+* In the **Inherited from** sections, to parent elements.
-In var() calls, to custom property declarations.
+* In `var()` calls, to custom property declarations.
-In animation shorthand properties, to @keyframes.
+* In animation shorthand properties, to @keyframes.
-Learn more links in documentation tooltips.
+* Learn more links in documentation tooltips.
-And more.
+* And more.
Here are some of them highlighted:
-Various links highlighted.
+![Various links highlighted] todo various-links-highlighted.png
-Links may be styled differently. If you're not sure if something is a link, try clicking it to find out.
+Links may be styled differently. If you're not sure if something is a link, try clicking it to find out.
#### View tooltips with CSS documentation, specificity, and custom property values
-
-
-Elements > Styles shows tooltips with useful information when you hover over specific elements.
+In the **Elements** tool, the **Styles** tab shows tooltips with useful information when you hover over specific elements.
@@ -159,17 +157,33 @@ Elements > Styles shows tooltips with useful information when you hover over spe
-To see a tooltip with a short CSS description, hover over the property name in the Styles tab.
+To see a tooltip that contains a CSS description:
+
+1. In DevTools, in the **Elements** tool, select the **Styles** tab.
+
+1. Hover over the property name.
+
+ DevTools pulls the descriptions for tooltips from [VS Code Custom Data]. https://github.com/microsoft/vscode-custom-data
+
+ ![The tooltip with documentation on a CSS property] todo the-tooltip-documentation.png
+
+1. In the tooltip, click the **Learn more** link.
+
+ The [MDN CSS Reference](https://developer.mozilla.org/docs/Web/CSS/Reference) page is displayed for this property.
-DevTools pulls the descriptions for tooltips from VS Code Custom Data.
-The tooltip with documentation on a CSS property.
+To turn the tooltips off:
-Click Learn more to go to an MDN CSS Reference on this property.
+* In the tooltip, select the **Don't show** checkbox.
-To turn the tooltips off, check Checkbox. Don't show.
-To turn them back on, check Settings. Settings > Preferences > Elements > Checkbox. Show CSS documentation tooltip.
+To turn the tooltips on again:
+
+1. In DevTools, select **Customize and control DevTools**, and then select **Settings**.
+
+1. In the outline on the left, select **Preferences**, and then scroll down to the **Elements** section.
+
+1. Select the **Show CSS documentation tooltip** checkbox.
@@ -178,9 +192,12 @@ To turn them back on, check Settings. Settings > Preferences > Elements > Checkb
-Hover over a selector to see a tooltip with its specificity weight.
+Hover over a selector to see a tooltip that shows the selector's specificity weight, such as: **Specificity: (0,0,1)**:
+
+![The tooltip with specificity weight of a matched selector] the-tooltip-specificity.png todo
-The tooltip with specificity weight of a matched selector.
+See also:
+* [Specificity](https://developer.mozilla.org/docs/Web/CSS/Specificity) - MDN.
@@ -189,9 +206,12 @@ The tooltip with specificity weight of a matched selector.
-Hover over a --custom-property to see its value in a tooltip.
+Hover over a `--custom-property` to see its value in a tooltip.
+
+![The value of a custom property in a tooltip] the-value-a-custom-property.png todo
-The value of a custom property in a tooltip.
+See also:
+* [Custom properties (--*): CSS variables](https://developer.mozilla.org/docs/Web/CSS/--*) - MDN.
@@ -215,9 +235,10 @@ In the following figure, after you click
-The Styles tab recognizes many kinds of CSS issues and highlights them in different ways.
+The **Styles** tab recognizes many kinds of CSS issues and highlights them in different ways.
-See Understand CSS in the Styles tab.
+See also:
+* [Understand CSS in the Styles tab](https://developer.chrome.com/docs/devtools/css/issues#css-in-styles) in _Find invalid, overridden, inactive, and other CSS_.
@@ -262,15 +283,15 @@ Check the **Show All** checkbox in the **Computed** pane. See [View only the CS
#### View CSS at-rules
-
+At-rules are CSS statements that let you control CSS behavior.
-At-rules are CSS statements that let you control CSS behavior. Elements > Styles shows the following at-rules in dedicated sections:
+In the **Elements** tool, the **Styles** tab shows the following at-rules in dedicated sections:
-@property
-@supports
-@scope
-@font-palette-values
-@position-try
+* `@property` - see [View `@property` at-rules](#view-property-at-rules), below.
+* `@supports` - see [View `@supports` at-rules](#view-supports-at-rules), below.
+* `@scope` - see [View `@scope` at-rules](#view-scope-at-rules), below.
+* `@font-palette-values` - see [View `@font-palette-values` at-rules](#view-font-palette-values-at-rules), below.
+* `@position-try` - see [View `@position-try` at-rules](#view-position-try-at-rules), below.
@@ -279,11 +300,13 @@ At-rules are CSS statements that let you control CSS behavior. Elements > Styles
-The @property CSS at-rule lets you define CSS custom properties explicitly and register them in a style sheet without running any JavaScript.
+The [@property CSS at-rule] https://web.dev/articles/at-property lets you define [CSS custom properties] https://developer.mozilla.org/docs/Web/CSS/--* explicitly and register them in a style sheet without running any JavaScript.
+
+Hover over the name of such property in the **Styles** tab, to see a tooltip with the property's value, descriptors, and a link to its registration in the collapsible `@property` section at the bottom of the **Styles** tab.
-Hover over the name of such property in the Styles tab, to see a tooltip with the property's value, descriptors, and a link to its registration in the collapsible @property section at the bottom of the Styles tab.
+![] todo
-To edit an @property rule, double-click its name or value.
+To edit an `@property` rule, double-click its name or value. See [Change a declaration name or value](#change-a-declaration-name-or-value), below.
@@ -292,13 +315,18 @@ To edit an @property rule, double-click its name or value.
-The Styles tab shows you the @supports CSS at-rules if they are applied to an element. For example, inspect the following element:
+The **Styles** tab shows you the `@supports` CSS at-rules, if they are applied to an element.
+
+For example, inspect the following element in the present article: I support CIE LAB color space!
+
+![View @supports at-rules] view-supports-rules.png todo
+
-View @supports at-rules.
+* If your browser supports the `lab()` function, the element is green.
-If your browser supports the lab() function, the element is green, otherwise it's purple.
+* If your browser doesn't support the `lab()` function, the element is purple.
-Only Safari supports the CIELAB color space. https://caniuse.com/?search=lab
+To see which browser versions support the CIE LAB color space, [search Caniuse.com for "lab"](https://caniuse.com/?search=lab).
@@ -307,24 +335,23 @@ Only Safari supports the CIELAB color space. https://caniuse.com/?search=lab
-The Styles tab shows you CSS @scope at-rules if they are applied to an element.
+The **Styles** tab shows you [CSS @scope at-rules] https://drafts.csswg.org/css-cascade-6/#scope-atrule if they are applied to an element.
-The `@scope` at-rules are a part of the CSS Cascading and Inheritance Level 6 specification. These rules allow you to scope CSS styles, in other words, explicitly apply styles to specific elements.
+The `@scope` at-rules are a part of the [CSS Cascading and Inheritance Level 6 specification] https://drafts.csswg.org/css-cascade-6/ . These rules allow you to scope CSS styles, in other words, explicitly apply styles to specific elements.
-The @scope at-rule feature is experimental. To test it, enable the Experimental Web Platform features flag in chrome://flags/#enable-experimental-web-platform-features. Otherwise, the next preview doesn't work.
+The `@scope` at-rule feature is experimental. To test the feature, enable the **Experimental Web Platform features** flag in `edge://flags/#enable-experimental-web-platform-features`. Otherwise, the next preview doesn't work.
-View the @scope rule in the following preview:
+View the `@scope` rule in the following preview:
+1. [Inspect the text](https://developer.chrome.com/docs/devtools/open#elements) on the card in the preview.
-Inspect the text on the card in the preview.
+On the **Styles** tab, find the `@scope` rule.
-On the Styles tab, find the @scope rule.
+![The @scope rule] todo the-scope-rule.png
-The @scope rule.
+In this example, the `@scope` rule overrides the global CSS `background-color` declaration for all `` elements inside elements with a `card` class.
-In this example, the @scope rule overrides the global CSS background-color declaration for all
elements inside elements with a card class.
-
-To edit the @scope rule, double-click it.
+To edit the `@scope` rule, double-click it.
@@ -333,17 +360,17 @@ To edit the @scope rule, double-click it.
-The @font-palette-values CSS at-rule lets you customize the default values of the font-palette property. Elements > Styles shows this at-rule in a dedicated section.
+The [@font-palette-values CSS at-rule] https://developer.mozilla.org/docs/Web/CSS/@font-palette-values lets you customize the default values of the `font-palette` property. In the **Elements** tool, the **Styles** tab shows this at-rule in a dedicated section.
-View the @font-palette-values section in the next preview:
+View the `@font-palette-values` section in the next preview:
-Inspect the second line of text in the preview.
+![Inspect the second line of text in the preview]
-In Styles, find the @font-palette-values section.
+In the **Elements** tool, in the **Styles** tab, find the `@font-palette-values` rule section:
-The @font-palette-values rule.
+![The @font-palette-values rule] todo at-font-palette-values.png
-In this example, the --New font palette values override the default ones of the colored font.
+In this example, the `--New` font palette values override the default ones of the colored font.
To edit your custom values, double-click them.
@@ -354,29 +381,36 @@ To edit your custom values, double-click them.
-The @position-try CSS rule along with the position-try-options property lets you define alternative anchor positions for elements. To learn more, see Introducing the CSS anchor positioning API.
+The `@position-try` CSS rule along with the `position-try-options` property lets you define alternative anchor positions for elements. To learn more, see [Introducing the CSS anchor positioning API] https://developer.chrome.com/blog/anchor-positioning-api .
+
+See also:
+* [The @position-try Rule](https://www.w3.org/TR/css-anchor-position-1/#fallback-rule) in _CSS Anchor Positioning Module Level 1_ at w3.org.
+
+In the **Elements** tool, the **Styles** tab resolves and links the following:
-Elements > Styles resolves and links the following:
+* `position-try-options` property values to a dedicated `@position-try --name` section.
-position-try-options property values to a dedicated @position-try --name section.
+* `position-anchor` property values and `anchor()` arguments to the corresponding elements with `popovertarget` attributes.
-position-anchor property values and anchor() arguments to the corresponding elements with popovertarget attributes.
+Inspect the `position-try-options` values and `@position-try` sections in the next preview (demo):
-Inspect the position-try-options values and @position-try sections in the next preview:
+todo: image: Demo using anchor with popover
-Demo using anchor with popover
+1. In the preview (demo), open the submenu; that is, click **YOUR ACCOUNT**, and then click **STOREFRONT**.
-In the preview, open the submenu, that is, click YOUR ACCOUNT then STOREFRONT.
+1. [Inspect] https://developer.chrome.com/docs/devtools/open#elements the element with `id="submenu"` in the preview.
-Inspect the element with id="submenu" in the preview.
+1. In the **Styles** tab, find the `position-try-options` property, and click its `--bottom` value.
-In Styles, find the position-try-options property and click its --bottom value. The Styles tab takes you to the corresponding @position-try section.
+ The **Styles** tab takes you to the corresponding `@position-try` section.
-Click the position-anchor value link or the same anchor() arguments. The Elements panel selects the element with the corresponding popovertarget attribute and the Styles tab shows the element's CSS.
+1. Click the `position-anchor` value link or the same `anchor()` arguments.
-The position-try-options property, the @position-try section, and the element with the popover target attribute.
+ The **Elements** tool selects the element with the corresponding `popovertarget` attribute, and the **Styles** tab shows the element's CSS:
-To edit values, double-click them.
+ ![The position-try-options property, the @position-try section, and the element with the popover target attribute] todo at-position-try.png
+
+To edit a value, double-click the value.
@@ -415,23 +449,32 @@ In the following figure, the **Computed** pane is filtered to only show declarat
-If you switch focus from the page to DevTools, some overlay elements automatically hide if they are triggered by focus. For example, drop-down lists, menus, or date pickers. The check_box Emulate a focused page option lets you debug such an element as if it is in focus.
+If you switch focus from the webpage to DevTools, some overlay elements automatically hide, if they are triggered by focus. For example:
+* Dropdown lists.
+* Menus.
+* Date pickers.
+
+To debug such an element as if the page has focus, select the **Emulate a focused page** checkbox.
+
+**Caution:** When this option is on, the `document.visibilityState` is set to `visible` and the `visibilitychange` event doesn't fire. See [Page Visibility API](https://developer.mozilla.org/docs/Web/API/Page_Visibility_API) at MDN.
+
+Try emulating a focused page on this [demo page] https://jec.fish/demo/disappearing-pop-up:
-Caution: With this option turned on, the document.visibilityState is set to visible and the visibilitychange event doesn't fire. For more information, see Page Visibility API.
+1. Focus the input element.
-Try emulating a focused page on this demo page:
+ Another element appears under it.
-Focus the input element. Another element appears under it.
+1. [Open DevTools] https://developer.chrome.com/docs/devtools/open .
-Open DevTools. The DevTools window is now in focus instead of the page, so the element disappears again.
+ The DevTools window is now in focus instead of the page, so the element disappears again.
-In Elements > Styles, click :hov, check check_box Emulate a focused page, and make sure the input element is selected. You can now inspect the element under it.
+1. In the **Elements** tool, in the **Styles** tab, click `:hov`, select the **Emulate a focused page** checkbox, and then make sure the input element is selected; see [Select an element](#select-an-element), above. You can now inspect the element under it.
-Before and after turning on the 'Emulate a focused page' option.
+ ![Before and after turning on the 'Emulate a focused page' option] todo emulate-focused-page.png
-You can also find the same option on the Rendering panel.
+You can also find [the same option on the Rendering panel] https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page .
-To discover more ways to freeze an element, see Freeze screen and inspect disappearing elements.
+To discover more ways to freeze an element, see [Freeze screen and inspect disappearing elements] https://developer.chrome.com/blog/devtools-tips-35 .
@@ -485,23 +528,29 @@ For an interactive tutorial, see [Add a pseudo-state to a class](../css/index.md
-Pseudo-elements let you style specific parts of elements. Highlight pseudo-elements are document portions with a "selected" status and they are styled as "highlighted" to indicate this status to the user. For example, such pseudo-elements are ::selection, ::spelling-error, ::grammar-error, and ::highlight.
+[Pseudo-elements] https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements let you style specific parts of elements. Highlight pseudo-elements are document portions with a "selected" status and they are styled as "highlighted" to indicate this status to the user.
-As mentioned in the specification, when multiple styles conflict, cascade determines the winning style.
+For example, such pseudo-elements are:
+* `::selection`
+* `::spelling-error`
+* `::grammar-error`
+* `::highlight`
-To enable this feature, run Chrome with the --enable-blink-features=HighlightInheritance flag.
+As mentioned in the [specification] https://drafts.csswg.org/css-pseudo-4/#highlight-cascade, when multiple styles conflict, cascade determines the winning style.
+
+To enable this feature, run Microsoft Edge with the `--enable-blink-features=HighlightInheritance` flag.
To better understand the inheritance and priority of the rules, you can view the inherited highlight pseudo-elements:
-Inspect the text below.
+1. [Inspect the text below] https://developer.chrome.com/docs/devtools/open#elements.
-I inherited the style of my parent's highlight pseudo-element. Select me!
+ I inherited the style of my parent's highlight pseudo-element. Select me!
-Select a portion of the text above.
+1. Select a portion of the text above.
-In the Styles tab, scroll down to find the Inherited from ::selection pseudo of... section.
+1. In the **Elements** tool, in the **Styles** tab, scroll down to find the `Inherited from ::selection pseudo of...` section.
-View the Inherited section of the Styles tab.
+ ![View the Inherited section of the Styles tab] todo view-inherited-section.png
@@ -510,17 +559,19 @@ View the Inherited section of the Styles tab.
-Cascade layers enable more explicit control of your CSS files to prevent style-specificity conflicts. This is useful for large codebases, design systems, and when managing third-party styles in applications.
+[Cascade layers] https://developer.chrome.com/blog/cascade-layers enable more explicit control of your CSS files to prevent style-specificity conflicts. This is useful for large codebases, design systems, and when managing third-party styles in applications.
+
+To view cascade layers, [inspect] https://developer.chrome.com/docs/devtools/open#elements the next element and in the **Elements** tool, select the **Styles** tab:
-To view cascade layers, inspect the next element and open Elements > Styles.
+todo: demo: My styles are layered!
-In the Styles tab, view the 3 cascade layers and their styles: page, component and base.
+In the **Styles** tab, view the 3 cascade layers and their styles: `page`, `component` and `base`.
-Cascade layers.
+![Cascade layers] todo cascade-layers.png
-To view the layer order, click the layer name or the Toggle layers. Toggle CSS layers view button.
+To view the layer order, click the layer name or the ![the "Toggle CSS layers view" icon todo] **Toggle CSS layers view** button.
-The page layer has the highest specificity, therefore the element's background is green.
+The `page` layer has the highest specificity, therefore the element's background is green.
@@ -529,11 +580,25 @@ The page layer has the highest specificity, therefore the element's background i
To view a page in print mode:
-1. Open the [Command Menu](../command-menu/index.md).
+1. Go to a webpage.
-1. Start typing `rendering`, and then select **Show Rendering**.
+1. Right-click the webpage, and then select **Inspect**.
-1. Click the **Emulate CSS Media** dropdown list, and then select **print**.
+ DevTools opens.
+
+1. Press **Esc** once or twice, so that the **Quick View** toolbar appears at the bottom of DevTools.
+
+1. On the **Quick View** toolbar, select **More tools** (**+**).
+
+1. Select the **Rendering** tool.
+
+ The **Rendering** tool opens in the **Quick View** panel at the bottom of DevTools.
+
+1. In the **Rendering** tool, click the **Emulate CSS media type** dropdown list, and then select **print**.
+
+ The webpage is rendered as if printing.
+
+1. When finished, in the **Rendering** tool, click the **Emulate CSS media type** dropdown list, and then select **No emulation**.
@@ -545,11 +610,11 @@ The **Coverage** tool shows you what CSS a page actually uses.
1. Open the [Command Menu](../command-menu/index.md) by pressing **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS), while DevTools has focus.
1. Start typing `coverage`, and then select **Show Coverage**:
-
+

-
+
The **Coverage** tool appears:
-
+

1. Click **Start instrumenting coverage and refresh the page** (). The page refreshes and the **Coverage** tool provides an overview of how much CSS (and JavaScript) is used from each file that the browser loads. Green represents used CSS. Red represents unused CSS.
@@ -578,35 +643,37 @@ See [Force DevTools into Print Preview mode](../css/print-preview.md).
-From a single drop-down menu in the Styles tab, you can copy separate CSS rules, declarations, properties, values
+From a single dropdown menu in the **Styles** tab, you can copy separate CSS rules, declarations, properties, or values; see [CSS syntax basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS#css_syntax_basics) in _What is CSS?_ at MDN.
-Additionally, you can copy CSS properties in JavaScript syntax. This option is handy if you're using CSS-in-JS libraries.
+Additionally, you can copy CSS properties in JavaScript syntax. This option is handy if you're using [CSS-in-JS] https://developer.chrome.com/blog/css-in-js libraries.
To copy CSS:
-Select an element.
+1. [Select an element](#select-an-element), per above.
-In the Elements > Styles tab, right-click a CSS property. Copy CSS drop-down menu.
+1. In the **Elements** tool, in the **Styles** tab, right-click a CSS property.
-Select one of the following options from the drop-down menu:
+ ![Copy CSS dropdown menu] todo copy-css-dropdown-menu.png
-Copy declaration. Copies the property and its value in CSS syntax: css property: value;
+1. Select one of the following options from the dropdown menu:
-Copy property. Copies only the property name.
+ * **Copy declaration**. Copies the property and its value in CSS syntax: `css property: value;`
-Copy value. Copies only the value.
+ * **Copy property**. Copies only the `property` name.
-Copy rule. Copies the entire CSS rule: css selector[, selector] { property: value; property: value; ... }
+ * **Copy value**. Copies only the `value`.
-Copy declaration as JS. Copies the property and its value in JavaScript syntax: js propertyInCamelCase: 'value'
+ * **Copy rule**. Copies the entire CSS rule: `css selector[, selector] { property: value; property: value; ... }`
-Copy all declarations. Copies all properties and their values in the CSS rule: css property: value; property: value; ...
+ * **Copy declaration as JS**. Copies the property and its value in JavaScript syntax: `js propertyInCamelCase: 'value'`
-Copy all declarations as JS. Copies all properties and their values in JavaScript syntax: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...
+ * **Copy all declarations**. Copies all properties and their values in the CSS rule: `css property: value; property: value; ...`
-Copy all CSS changes. Copies the changes you make in the Styles tab across all declarations.
+ * **Copy all declarations as JS**. Copies all properties and their values in JavaScript syntax: `js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...`
-View computed value. Takes you to the Computed tab.
+ * **Copy all CSS changes**. Copies the changes that you make in the **Styles** tab across all declarations. See [Copy CSS changes](#copy-css-changes), below.
+
+ * **View computed value**. Takes you to the **Computed** tab; see [View only the CSS that's actually applied to an element](#view-only-the-css-that-is-actually-applied-to-an-element), above.
@@ -690,19 +757,18 @@ To change a numerical value, type in the value, or use the arrow keys, per the n
#### Change enumerable values with keyboard shortcuts
-
-
-While editing an enumerable value of a declaration, for example, font-size, you can use the following keyboard shortcuts to increment the value by a fixed amount:
-
-Option+Up (Mac) or Alt+Up (Windows, Linux) to increment by 0.1.
+While editing an enumerable value of a declaration, for example, `font-size`, you can use the following keyboard shortcuts to increment the value by a fixed amount:
-Up to change the value by 1, or by 0.1 if the current value is between -1 and 1.
-
-Shift+Up to increment by 10.
+| Key combination | Action |
+|---|---|
+| **Alt+UpArrow** (Windows, Linux), **Option+UpArrow** (macOS) | Increment by 0.1. |
+| **UpArrow** | Increment by 1, or by 0.1 if the current value is between -1 and 1. |
+| **Shift+UpArrow** | Increment by 10. |
+| **Ctrl+Shift+PgUp** (Windows, Linux), **Shift+Command+UpArrow** (macOS) | Increment by 100. |
-Shift+Command+Up (Mac) or Control+Shift+Page Up (Windows, Linux) to increment the value by 100.
+
-Decrementing also works. Just replace each instance of Up mentioned earlier with Down.
+To decrement, press **DownArrow** instead of **UpArrow**.
@@ -711,23 +777,31 @@ Decrementing also works. Just replace each instance of Up mentioned earlier with
-Deprecated: This feature is deprecated in Chrome 123. To temporarily turn it back on again, clear the settings Settings > Experiments > check_box Deprecate CSS authoring tool in the Styles tab. Feel free to leave feedback in crbug/1522657.
+Deprecated: This feature is deprecated in Microsoft Edge 123. To temporarily turn this feature on, clear the checkbox **Customize and control DevTools** > **Settings** > **Experiments** >**Deprecate CSS `` authoring tool in the Styles tab**. You can leave feedback in [crbug/1522657] https://issues.chromium.org/issues/41495618.
+
+You can use your pointer to change any property with `length`, such as `width`, `height`, `padding`, `margin`, or `border`.
-You can use your pointer to change any property with length, such as width, height, padding, margin, or border.
To change the length unit:
-Hover over the unit name and notice that it's underlined.
+1. Hover over the unit name and notice that it's underlined.
+
+1. Click the unit name to select a unit from the dropdown list:
-Click the unit name to select a unit from the drop-down.
+ ![Units in dropdown list] todo
To change the length value:
-Hover over the unit value and notice that your pointer changes to a horizontal double-headed arrow.
+1. Hover over the unit value and notice that your pointer changes to a horizontal double-headed arrow.
+
+1. Drag horizontally to increase or decrease the value:
+
+ ![Dragging horizontally] todo
-Drag horizontally to increase or decrease the value.
-To adjust the value by 10, hold Shift when dragging.
+To adjust the value by 10:
+
+* Press and hold **Shift** when dragging.
@@ -768,19 +842,25 @@ To add a class to an element:
-To toggle automatic dark mode or emulate the user's preference of light or dark themes:
+To toggle [automatic dark mode] https://developer.chrome.com/blog/auto-dark-theme or emulate the user's preference of [light or dark themes] https://web.dev/prefers-color-scheme/ :
+
+1. In the **Elements** tool, in the **Styles** tab, click (icon todo: paintbrush icon) **Toggle common rendering emulations**.
-On the Elements > Styles tab, click Toggle common rendering emulations.Toggle common rendering emulations. Toggle common rendering emulations.
+ ![] todo toggle-common-rendering-emulations.png
-Select one of the following from the drop-down list:
+1. Select one of the following options from the dropdown list:
-prefers-color-scheme: light. Indicates that the user prefers the light theme.
+ * **prefers-color-scheme: light**. Indicates that the user prefers the light theme.
-prefers-color-scheme: dark. Indicates that the user prefers the dark theme.
+ * **prefers-color-scheme: dark**. Indicates that the user prefers the dark theme.
-Automatic dark mode. Displays your page in dark mode even if you didn't implement it. Additionally, sets prefers-color-scheme to dark automatically.
+ * **Automatic dark mode**. Displays your page in dark mode even if you didn't implement it. Additionally, sets `prefers-color-scheme` to `dark` automatically.
-This drop-down is a shortcut for Emulate CSS media feature prefers-color-scheme and Enable automatic dark mode options of the Rendering tab.
+This dropdown list is a shortcut for **Emulate CSS media feature `prefers-color-scheme`** and **Enable automatic dark mode** options of the **Rendering** tool.
+
+See also:
+* [Emulating dark or light mode using the Rendering tool](../accessibility/preferred-color-scheme-simulation.md#emulating-dark-or-light-mode-using-the-rendering-tool) in _Emulate dark or light schemes in the rendered page_.
+* [Check for contrast issues with dark theme and light theme](../accessibility/test-dark-mode.md)
@@ -862,9 +942,9 @@ To toggle a single declaration on or off:
-See the corresponding section in Animations. https://developer.chrome.com/docs/devtools/css/animations#view-transition
+See the corresponding section in [Animations] https://developer.chrome.com/docs/devtools/css/animations#view-transition.
-For more information, see Smooth and simple transitions with the View Transitions API. https://developer.chrome.com/docs/web-platform/view-transitions
+For more information, see [Smooth and simple transitions with the View Transitions API] https://developer.chrome.com/docs/web-platform/view-transitions.
@@ -873,7 +953,7 @@ For more information, see Smooth and simple transitions with the View Transition
-See the corresponding section in Inspect CSS grid. https://developer.chrome.com/docs/devtools/css/grid#grid-editor
+See the corresponding [section in Inspect CSS grid] https://developer.chrome.com/docs/devtools/css/grid#grid-editor.
@@ -1026,42 +1106,48 @@ Use the **Easing Editor** to change the value of the [animation-timing-function]
-Use presets to adjust timings
-To adjust timings with a click, use the presets in the Easing Editor:
+To adjust timings with a click, use the presets in the **Easing Editor**:
-In the Easing Editor, to set a keyword value, click one of the picker buttons:
-linear The linear button.
-ease-in-out The ease-in-out button.
-ease-in The ease-in button.
-ease-out The ease-out button.
-In the Presets switcher, click Left. or Right. buttons to pick one of the following presets:
+1. todo: add missing steps to open the Easing Editor.
-Linear presets: elastic, bounce, or emphasized.
-Cubic Bezier presets:
+1. In the **Easing Editor**, to set a keyword value, click one of the picker buttons:
-
-Timing keyword Preset Cubic Bezier
+ * **linear** - todo: The linear button.
+ * **ease-in-out** The ease-in-out button.
+ * **ease-in The ease-in button.
+ * **ease-out The ease-out button.
-
-ease-in-out In Out, Sine cubic-bezier(0.45, 0.05, 0.55, 0.95)
-In Out, Quadratic cubic-bezier(0.46, 0.03, 0.52, 0.96)
-In Out, Cubic cubic-bezier(0.65, 0.05, 0.36, 1)
-Fast Out, Slow In cubic-bezier(0.4, 0, 0.2, 1)
-In Out, Back cubic-bezier(0.68, -0.55, 0.27, 1.55)
+ The **Presets switcher** opens.
-
-ease-in In, Sine cubic-bezier(0.47, 0, 0.75, 0.72)
-In, Quadratic cubic-bezier(0.55, 0.09, 0.68, 0.53)
-In, Cubic cubic-bezier(0.55, 0.06, 0.68, 0.19)
-In, Back cubic-bezier(0.6, -0.28, 0.74, 0.05)
-Fast Out, Linear In cubic-bezier(0.4, 0, 1, 1)
+1. In the **Presets switcher**, click the **Left** todo: **`<`** or **Right** **`>`** buttons to pick one of the following presets:
-
-ease-out Out, Sine cubic-bezier(0.39, 0.58, 0.57, 1)
-Out, Quadratic cubic-bezier(0.25, 0.46, 0.45, 0.94)
-Out, Cubic cubic-bezier(0.22, 0.61, 0.36, 1)
-Linear Out, Slow In cubic-bezier(0, 0, 0.2, 1)
-Out, Back cubic-bezier(0.18, 0.89, 0.32, 1.28)
+ * Linear presets: `elastic`, `bounce`, or `emphasized`.
+
+ * [Cubic Bezier] https://developer.mozilla.org/docs/Glossary/Bezier_curve (MDN) presets:
+
+| Timing keyword | Preset | Cubic Bezier |
+|---|---|---|
+| ease-in-out | In Out, Sine | cubic-bezier(0.45, 0.05, 0.55, 0.95) |
+| ease-in-out | In Out, Quadratic | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
+| ease-in-out | In Out, Cubic | cubic-bezier(0.65, 0.05, 0.36, 1) |
+| ease-in-out | Fast Out, Slow In | cubic-bezier(0.4, 0, 0.2, 1) |
+| ease-in-out | In Out, Back | cubic-bezier(0.68, -0.55, 0.27, 1.55) |
+
+| Timing keyword | Preset | Cubic Bezier |
+|---|---|---|
+| ease-in | In, Sine | cubic-bezier(0.47, 0, 0.75, 0.72) |
+| ease-in | In, Quadratic | cubic-bezier(0.55, 0.09, 0.68, 0.53) |
+| ease-in | In, Cubic | cubic-bezier(0.55, 0.06, 0.68, 0.19) |
+| ease-in | In, Back | cubic-bezier(0.6, -0.28, 0.74, 0.05) |
+| ease-in | Fast Out, Linear In | cubic-bezier(0.4, 0, 1, 1) |
+
+| Timing keyword | Preset | Cubic Bezier |
+|---|---|---|
+| ease-out | Out, Sine | cubic-bezier(0.39, 0.58, 0.57, 1) |
+| ease-out | Out, Quadratic | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
+| ease-out | Out, Cubic | cubic-bezier(0.22, 0.61, 0.36, 1) |
+| ease-out | Linear Out, Slow In | cubic-bezier(0, 0, 0.2, 1) |
+| ease-out | Out, Back | cubic-bezier(0.18, 0.89, 0.32, 1.28) |
@@ -1072,15 +1158,15 @@ Out, Back cubic-bezier(0.18, 0.89, 0.32, 1.28)
To set custom values for timing functions, use the control points on the lines:
-For linear functions, click anywhere on the line to add a control point and drag it. Double-click to remove the point.
+* For linear functions, click anywhere on the line to add a control point and drag it. Double-click to remove the point:
-Dragging a control point of a linear function.
+ ![Dragging a control point of a linear function] todo dragging-control-point.png
-For Cubic Bezier functions, drag one of the control points.
+* For Cubic Bezier functions, drag one of the control points:
-Dragging the control points of a Cubic Bezier function.
+ ![Dragging the control points of a Cubic Bezier function] todo dragging-control-points.png"
-Any change triggers a ball animation in the Preview at the top of editor.
+Any change triggers a ball animation in the **Preview** at the top of editor.
@@ -1095,19 +1181,20 @@ To copy a single CSS declaration change:
* Hover over the highlighted declaration and click the [todo: Copy icon] **Copy** button:
- ![Copy a CSS declaration change]() todo
+ ![Copy a CSS declaration change]() todo copy-css-declaration-change.png
To copy all CSS changes across declarations at once:
* Right-click on any declaration and then select **Copy all CSS changes**:
- ![Copy all CSS changes]() todo
+ ![Copy all CSS changes]() todo copy-css-changes.png
-You can additionally track changes that you make, by using the **Changes** tool. See [Changes: Track your HTML, CSS, and JavaScript changes](https://developer.chrome.com/docs/devtools/changes).
+You can additionally track changes that you make, by using the **Changes** tool. See [Changes: Track your HTML, CSS, and JavaScript changes](https://developer.chrome.com/docs/devtools/changes) in Chrome docs.
## See also
+
Demos repo:
* [To Do app](https://microsoftedge.github.io/Demos/demo-to-do/)
From 6383e56e6c8952cbdd133850194acc9338d11e29 Mon Sep 17 00:00:00 2001
From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com>
Date: Mon, 13 Apr 2026 07:39:42 -0700
Subject: [PATCH 06/27] mid-sent link
---
microsoft-edge/devtools/css/reference.md | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/microsoft-edge/devtools/css/reference.md b/microsoft-edge/devtools/css/reference.md
index 572df9e538..baa1c0c1f6 100644
--- a/microsoft-edge/devtools/css/reference.md
+++ b/microsoft-edge/devtools/css/reference.md
@@ -300,7 +300,11 @@ In the **Elements** tool, the **Styles** tab shows the following at-rules in ded
-The [@property CSS at-rule] https://web.dev/articles/at-property lets you define [CSS custom properties] https://developer.mozilla.org/docs/Web/CSS/--* explicitly and register them in a style sheet without running any JavaScript.
+The `@property` CSS at-rule lets you define CSS custom properties explicitly and register them in a style sheet without running any JavaScript.
+
+See also:
+* [@property: giving superpowers to CSS variables](https://web.dev/articles/at-property) at Web.dev.
+* [Custom properties (--*): CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/--*) at MDN.
Hover over the name of such property in the **Styles** tab, to see a tooltip with the property's value, descriptors, and a link to its registration in the collapsible `@property` section at the bottom of the **Styles** tab.
From 323c761578db8c542819f59e84d0f04aef98508d Mon Sep 17 00:00:00 2001
From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com>
Date: Wed, 13 May 2026 20:01:02 -0700
Subject: [PATCH 07/27] incoming links & pngs
---
.../at-scope-at-rule-rendered.png | Bin 0 -> 15653 bytes
.../dragging-control-point.png | Bin 0 -> 14719 bytes
.../dragging-control-points.png | Bin 0 -> 18080 bytes
.../easing-function-ease-in-out.png | Bin 0 -> 1598 bytes
.../easing-function-ease-in.png | Bin 0 -> 1566 bytes
.../easing-function-ease-out.png | Bin 0 -> 1573 bytes
.../easing-function-linear.png | Bin 0 -> 459 bytes
.../scope-rule-in-styles-tab.png | Bin 0 -> 69635 bytes
...oggle-common-rendering-emulations-icon.png | Bin 0 -> 243 bytes
.../toggle-common-rendering-emulations.png | Bin 0 -> 62944 bytes
microsoft-edge/devtools/css/reference.md | 305 +++++++++++-------
11 files changed, 191 insertions(+), 114 deletions(-)
create mode 100644 microsoft-edge/devtools/css/reference-images/at-scope-at-rule-rendered.png
create mode 100644 microsoft-edge/devtools/css/reference-images/dragging-control-point.png
create mode 100644 microsoft-edge/devtools/css/reference-images/dragging-control-points.png
create mode 100644 microsoft-edge/devtools/css/reference-images/easing-function-ease-in-out.png
create mode 100644 microsoft-edge/devtools/css/reference-images/easing-function-ease-in.png
create mode 100644 microsoft-edge/devtools/css/reference-images/easing-function-ease-out.png
create mode 100644 microsoft-edge/devtools/css/reference-images/easing-function-linear.png
create mode 100644 microsoft-edge/devtools/css/reference-images/scope-rule-in-styles-tab.png
create mode 100644 microsoft-edge/devtools/css/reference-images/toggle-common-rendering-emulations-icon.png
create mode 100644 microsoft-edge/devtools/css/reference-images/toggle-common-rendering-emulations.png
diff --git a/microsoft-edge/devtools/css/reference-images/at-scope-at-rule-rendered.png b/microsoft-edge/devtools/css/reference-images/at-scope-at-rule-rendered.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc258eae660c32764fae8b800a15a19c1721b4b7
GIT binary patch
literal 15653
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
Bkg@;(
literal 0
HcmV?d00001
diff --git a/microsoft-edge/devtools/css/reference-images/dragging-control-points.png b/microsoft-edge/devtools/css/reference-images/dragging-control-points.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6b10f132f43cff6db8661b52a4cf9669ce51a7d
GIT binary patch
literal 18080
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