CSS Output & Performance
Debugging CSS
Trace computed values, layout constraints, stacking contexts, and overflow with browser developer tools. It provides a repeatable workflow for matched rules, computed values, box dimensions, Grid and Flex overlays, stacking contexts, overflow, and reduced test cases.
CSS debugging is the process of identifying the browser rule or layout constraint that produced a result. Developer tools expose that evidence directly.
Randomly changing declarations can hide the symptom while leaving the cause in place. Start with the affected element, inspect the winning and crossed-out rules, then check the computed value and layout model. Grid overlays, flex inspectors, stacking-context indicators, and accessibility panels narrow the problem further. This topic also connects with Cascade & Inheritance and CSS Specificity.
Inspect the element before editing the stylesheet
The Styles panel shows matched and overridden declarations. The Computed panel shows the final value and often links back to the rule that supplied it. Check pseudo-classes, inherited rules, layers, and invalid declarations.
Make invisible constraints visible
Example
css
/* Temporary diagnostic rule */
* {
outline: 1px solid rgb(255 0 0 / 0.18);
}- Use the Grid and Flex overlays to see tracks, gaps, free space, and alignment.
- Inspect the box model for unexpected padding, borders, or collapsed margins.
- Look for
min-width: autowhen flex or grid content will not shrink. - Inspect stacking-context badges before raising z-index.
- Use the Accessibility panel to check the computed name and contrast.
- Emulate media features such as reduced motion and forced colors.
Reduce the case
Copy the smallest failing markup and styles into an isolated page. Remove declarations until the failure disappears, then restore the last relevant rule. A reduced case exposes interactions faster than random property changes.
Debugging Checklist
| Check | What it reveals | Browser tool |
|---|---|---|
| Matched rules | Which declarations matched and which were overridden. | Styles panel |
| Computed value | The final value after the cascade. | Computed panel |
| Box dimensions | Content, padding, border, and margin sizes. | Box model |
| Layout tracks | Flex and Grid alignment and track boundaries. | Layout overlay |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Debugging CSS example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
/* Temporary diagnostic rule */
* {
outline: 1px solid rgb(255 0 0 / 0.18);
}
</style>
</head>
<body>
<main><section class="layout"><article><h1>Inspect this layout</h1><p>Open developer tools and inspect the box model, matched rules, and computed values.</p></article><aside>Sidebar</aside></section></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| Core CSS inspection | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- A crossed-out declaration is not necessarily wrong; it may simply have lost the cascade. An unrecognized or invalid declaration is usually marked differently.
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Inspect the winning declaration and layout constraints before adding another override.
Once the responsible constraint is known, create the smallest fix at the same level: change the track, minimum size, containing block, or cascade relationship that caused the result. Reduce complicated failures to a small document before reporting a browser bug or adding a compatibility workaround.