diff --git a/microsoft-edge/devtools/css/issues.md b/microsoft-edge/devtools/css/issues.md new file mode 100644 index 0000000000..07a781b5b4 --- /dev/null +++ b/microsoft-edge/devtools/css/issues.md @@ -0,0 +1,246 @@ +--- +title: Find invalid, overridden, inactive, and other CSS +description: Find invalid, overridden, inactive, and other CSS. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: article +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 06/25/2026 +--- + +# Find invalid, overridden, inactive, and other CSS + +todo: replace developer.chrome.com links, 11x + +26 todo's + +This guide assumes that you're familiar with inspecting CSS in Chrome DevTools. To learn the basics, see [View and change CSS](https://developer.chrome.com/docs/devtools/css). todo: non-Chrome link + +**Detailed contents:** +* [Inspect the CSS you author](#inspect-the-css-you-author) +* [Understand CSS in the Styles tab](#understand-css-in-the-styles-tab) + * [Matched and unmatched selectors](#matched-and-unmatched-selectors) + * [Invalid values and declarations](#invalid-values-and-declarations) + * [Overridden](#overridden) + * [Inactive](#inactive) + * [Inherited and non-inherited](#inherited-and-non-inherited) + * [Shorthand](#shorthand) + * [Non-editable](#non-editable) +* [Inspect an element that still isn't styled the way you think](#inspect-an-element-that-still-isnt-styled-the-way-you-think) +* [Understand CSS in the Computed tab](#understand-css-in-the-computed-tab) + * [Declared and inherited](#declared-and-inherited) + * [Runtime](#runtime) + * [Non-inherited and custom](#non-inherited-and-custom) +* [Search for duplicates](#search-for-duplicates) +* [Find unused CSS](#find-unused-css) + + + +## Inspect the CSS you author + +Suppose that you added some CSS to an element and want to make sure the new styles are applied properly. When you refresh the page, the element looks the same as before. Something is wrong. + +The first thing to do is [inspect the element](https://developer.chrome.com/docs/devtools/css/reference#select) and make sure that your new CSS is actually applied to the element. + +Sometimes, you'll see your new CSS in the **Elements** > **Styles** tab but your new CSS is in pale text, non-editable, crossed out, or has a warning or hint icon next to it. + + + +## Understand CSS in the Styles tab + +The **Styles** tab recognizes many kinds of CSS issues and highlights them in different ways. + + + +#### Matched and unmatched selectors + +The **Styles** tab shows matched selectors in regular text and unmatched ones in pale text. + +![Matched selector in regular text and unmatched selectors in pale text] todo: matched-selector-regular.png + + + +#### Invalid values and declarations + +The **Styles** tab crosses out and displays Warning. ![Warning icon] todo: warning-icon.png warning icons next to the following: + +* An entire CSS declaration (property and value) when the CSS property is invalid or unknown. +* Just the value when the CSS property is valid but the value is invalid. + +![Invalid property name and invalid property value] todo: invalid-property-name.png + + + +#### Overridden + +The **Styles** tab crosses out properties that are overridden by other properties according to the [Cascading order](https://developer.mozilla.org/docs/Web/CSS/Cascade#cascading_order). + +![anim] todo: .png + +In this example, the `width: 300px;` style attribute on the element overrides `width: 100%` on the `.youtube` class. + + + +#### Inactive + +The **Styles** tab displays in pale text and puts ![Information] todo: information-icon.png information icons next to properties that are valid but have no effect because of other properties. + +These pale properties are inactive because of CSS logic, not the [Cascading order](https://developer.mozilla.org/docs/Web/CSS/Cascade#cascading_order). + +**Key point:** The pale inactive properties differ from pale [non-inherited properties](https://developer.chrome.com/docs/devtools/css/issues#inherited-and-non-inherited). Inactive properties have icons. Hover over the ![Information] todo: information-icon.png Information icon to get a hint at what went wrong. + +![Inactive CSS declaration with a hint] todo: inactive-css-declaration.png + +In this example, the `display: block;` property disables `justify-content` and `align-items` that control flex or grid layouts. + + + +#### Inherited and non-inherited + +The **Styles** tab lists properties in `Inherited from ` sections depending on their [default inheritance](https://developer.mozilla.org/docs/Web/CSS/inheritance): + +* Inherited by default are in regular text. +* Non-inherited by default are in pale text. + +**Key point:** + +* The pale non-inherited properties differ from pale [inactive properties](https://developer.chrome.com/docs/devtools/css/issues#inactive). Non-inherited properties don't have icons and are in the corresponding sections. + +* [Overriding default inheritance](https://developer.mozilla.org/docs/Web/CSS/inheritance#overriding_inheritance_an_example) doesn't affect the way the **Styles** tab displays the properties: pale or not. + +![The 'Inherited from body' section listing inherited and non-inherited CSS] todo: the-inherited-body-sec.png + + + +#### Shorthand + +[Shorthand (concise) properties](https://developer.mozilla.org/docs/Web/CSS/Shorthand_properties) let you set multiple CSS properties at once and can make your stylesheet more readable. However, due to the short nature of such properties, you may miss a longhand (precise) property that overrides a property implied by the shorthand. + +The **Styles** tab displays shorthand properties as ![Drop-down icon] todo: drop-down-icon.png drop-down lists that contain all the properties that are shortened. + +![The shorthand property with a drop-down list] todo: the-shorthand-property.png + +In this example, two of four shortened properties are actually overridden. + + + +#### Non-editable + +The **Styles** tab displays properties that can't be edited in _italic text_. For example, the CSS from the following sources can't be edited: + +* `user agent stylesheet`—Microsoft Edge's default stylesheet. + + ![The CSS from user agent stylesheet] todo: the-css-user-agent-style.png + +* Style-related HTML attributes on the element, such as height, width, or color. You can edit them in the DOM tree and this updates the CSS in the **Styles** tab, but not the other way around. + + ![anim] todo: .png + + In the above example, the `height="48"` attribute on an `` element is set to `50`. This updates the corresponding property under `svg[Attributes Style]` in the **Styles** tab. + + + +## Inspect an element that still isn't styled the way you think + +To try to find what goes wrong, you may want to check: + +* [CSS documentation](https://developer.chrome.com/docs/devtools/css/reference#view-docs) and [selector specificity](https://developer.chrome.com/docs/devtools/css/reference#selector-specificity) in the tooltips in the **Styles** tab. +* The **Computed** tab in the **Elements** tool, to see the "final" [CSS applied to an element](https://developer.chrome.com/docs/devtools/css/reference#computed) and compare that to the CSS rules that you declared. + +The **Styles** tab in the **Elements** tool displays the exact set of CSS rules as they are written in various stylesheets. In contrast, the **Elements** > **Computed** tab lists the resolved CSS values that Chrome uses to render an element: +* CSS that's derived from inheritance; see [Inheritance](https://developer.mozilla.org/docs/Web/CSS/inheritance) at MDN. +* [Cascade](https://developer.mozilla.org/docs/Web/CSS/Cascade) winners. +* Longhand properties (precise), not shorthand (concise). +* Computed values. For example, `font-size: 14px` instead of `font-size: 70%`. + + + +## Understand CSS in the Computed tab + +The **Computed** tab also displays various properties differently. + + + +#### Declared and inherited + +The **Computed** tab lists the properties declared in any stylesheet in regular font, both element's own and inherited. To see the source of a CSS property, click the expand icon (![Expand icon] todo: expand-icon.png) next to a CSS property. + +![Declared properties] todo: declared-properties.png + +To see the declaration in the **Styles** tab, hover over the expanded property and click the ![Arrow-right icon] todo: arrow-right-icon.png arrow button. + +![The arrow button next to the property] todo: the-arrow-button-next.png + +To see the declaration in the **Sources** pane, click the link to the source file. + +![The link to the source file] todo: the-link-the-source-file.png + +For properties with multiple sources, the **Computed** tab shows the [Cascade winner](https://developer.mozilla.org/docs/Web/CSS/Cascade#cascading_order) first. + +![A property with multiple sources] todo: a-property-multiple-sources.png + + + +#### Runtime + +The **Computed** tab lists property values calculated at runtime in pale text. + +![Property values calculated at runtime] todo: property-values-calculated.png + +In this example, Microsoft Edge calculated the following for the `