Firebug Tip: Trace Styles
by Honza- Published:July 13th, 2012
- Comments:11 Comments
- Category:Firebug, Firebug Tip, Planet Mozilla
Firebug 1.10 has been released today and one of the new features introduced in this version is called Trace Styles.
This feature allows tracing all places which affected specific CSS property, whether explicitly or by inheritance. The list also shows which property is actually applied.
This feature is integrated into the Computed side panel (available within the HTML panel) where every CSS property is expandable.
Of course, you need Firebug 1.10+ to try out this feature.
See all Firebug tips
Explicit CSS Properties
Let's see an example showing more explicit CSS properties (with different values) set on one element.
.a { color: red; }
.b { color: green; }
</style>
<span class="a b">Hello World!</span>
- There are two CSS rules applied on the same element: a, b
- Both rules modify the color CSS property
- The a rule is overwritten by b since b is defined later.
- That's why Hello World! text is green and the rule a crossed out in the Computed panel.
Inherited CSS Properties
This example demonstrates how to trace also inherited properties.
.a { color: red; }
.b { color: green; }
body { color: purple; }
</style>
<body>
<span class="a b">Hello World!</span>
</body>
- The example extends the previous by appending one more rule: body
- We are again inspecting the same span element
- There are three CSS rules now, two explicit and one inherited.
- The new body rule (inherited) is grayed out since it's overwritten by b rule
So, if you are trying to figure out why your CSS property doesn't have any effect, you can effectively use this feature and see (a) whether the property is actually applied and (b) whether it isn't overwritten by another property.
Happy Firebugging!
11 Comments
Great explanation, Honza!
Just want to note that a detailed description of the Computed side panel is also available at https://getfirebug.com/wiki/index.php/Computed_Side_Panel.
Sebastian
[...] See, there are three places trying to set the font-size of the selected element (the one in black succeeded). Of course, the blue text/location on the right is click-able and navigates the user the right place. See also detailed explanation. [...]
[...] منبع: http://www.softwareishard.com/blog/firebug/firebug-tip-trace-styles Tagged: [...]
Excellent!!!!!!!!!!!!!
@notengoideacove
hm, I thoungh @Explicit CSS Properties@ was before version 1.10
@STEVER: the corresponding issue report is here:
http://code.google.com/p/fbug/issues/detail?id=2916
And its label says: fixed-1.10-a8 (so introduced in 1.10 alpha 8). So, perhaps you have been already using in in 1.10 alpha or beta releases.
Honza
[...] http://www.softwareishard.com/blog/firebug/firebug-tip-trace-styles/ [...]
[...] справа — кликабелен, ведёт на описания правил. См. подробное описание (англ.). (Аплодисменты — информативность этой панели [...]
Great article, I didn't know about this - although I proclaim my new live html/css/js code editor (LIVEditor) has a Firebug-like UI for tweaking css in real-time 😉
[...] its treatment options. Visit: drspencepentland.com for treatment of endometriosis in Vancouver. Detailed explanation of what endometriosis is, how it effects fertility, and its treatment options.....youtube.com/v/LcGc3RnuhXo?fs=1&rel=0" type="application/x-shockwave-flash" width="425" height="355" [...]
[...] kw="weight+loss+tips" num="24" ebcat="-1"] [wprebay kw="weight+loss+tips" num="25" ebcat="-1"] 100 Weight Loss Tips 100 weight loss tips with detailed explanationsChange font size, color, type, a...%3Dguid-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB0071NOALO" [...]