Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog
Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog

Find invalid, overridden, inactive, and other CSS

Published on

This guide assumes that you're familiar with inspecting CSS in Chrome DevTools. See View and change CSS to learn the basics.

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 and make sure that your new CSS is actually applied to the element.

Sometimes, you'll see your new CSS in the Elements > Styles pane 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 pane

The Styles pane recognizes many kinds of CSS issues and highlights them in different ways.

Invalid

The Styles pane crosses out properties with invalid syntax and displays Warning. warning icons next to them.

Invalid CSS properties.

Overridden

The Styles pane crosses out properties that are overridden by other properties according to the Cascading order.

In this example, the width: 300px; style attribute on the element overrides width: 100% on the .youtube class.

Inactive

The Styles pane displays in pale text and puts Information. 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.

Important
  • The pale inactive properties differ from pale non-inherited properties. Inactive properties have icons.

  • Hover over the Information. icon to get a hint at what went wrong.

Inactive CSS declaration with a hint.

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 pane lists properties in Inherited from <element-name> sections depending on their default inheritance:

  • Inherited by default are in regular text.
  • Non-inherited by default are in pale text.
Important
  • The pale non-inherited properties differ from pale inactive properties. Non-inherited properties don't have icons and are in the corresponding sections.
  • Overriding default inheritance doesn't affect the way the Styles pane displays the properties: pale or not.
The 'Inherited from body' section listing inherited and non-inherited CSS.

Shorthand

Shorthand (concise) 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 pane displays shorthand properties as Drop-down. drop-down lists that contain all the properties that are shortened.

The shorthand property with a drop-down list.

In this example, two of four shortened properties are actually overridden.

Non-editable

The Styles pane 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—Chrome's default stylesheet.

    The CSS from user agent stylesheet.
  • Style-related HTML attributes on the element, for example, height, width, color, etc. You can edit them in the DOM tree and this updates the CSS in the Styles pane, but not the other way around.

    In this example, the height="48" attribute on an <svg> element is set to 50. This updates the corresponding property under svg[Attributes Style] in the Styles pane.

Inspect an element that still isn't styled the way you think

To get a hint at what goes wrong, open the Computed pane to see the "final" CSS applied to an element and compare to that you declared.

The Elements > Styles pane displays the exact set of CSS rules as they are written in various stylesheets. On the other hand, the Elements > Computed pane lists resolved CSS values that Chrome uses to render an element:

  • CSS derived from inheritance
  • 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 pane

The Computed pane also displays various properties differently.

Declared and inherited

The Computed pane lists the properties declared in any stylesheet in regular font, both element's own and inherited. Click the Expand. expand icon next to them to see their source.

Declared properties.

To see the declaration in the Styles pane, hover over the expanded property and click the Arrow right. arrow button.

The arrow button next to the property.

To see the declaration in the Sources pane, click the link to the source file.

The link to the source file.

For properties with multiple sources, the Computed pane shows the Cascade winner first.

A property with multiple sources.

Runtime

The Computed pane lists property values calculated at runtime in pale text.

Property values calculated at runtime.

In this example, Chrome calculated the following for the <ul> element:

  • The width relative its parent, <div>
  • The height relative to its children, the two <li> elements

Non-inherited and custom

To make the Computed pane show all properties and their values, check Checkbox. Show all. All properties include:

Important

Overriding default inheritance doesn't affect the way the Computed pane displays the properties: pale or not.

To break this big list into categories, check Checkbox. Group.

All properties grouped.

This example shows the initial values for non-inherited properties under Animation and custom properties under CSS Variables.

Search for duplicates

To investigate a specific property and its potential duplicates, type that property name in the Filter textbox. You can do this both in the Styles and Computed panes.

The Filter textboxes on Styles and Computed panes.

See Search and filter an element's CSS.

Find unused CSS

See Coverage: Find unused JavaScript and CSS.

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.