Subscribe to RSS Feed

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.

Explicit CSS Properties

Let's see an example showing more explicit CSS properties (with different values) set on one element.

<style type="text/css">
.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.

<style type="text/css">
.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!


Rss Commenti

11 Comments

  1. 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

    #1 Sebastian Z.
  2. [...] 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. [...]

    #2 Firebug 1.10 New Features ✩ Mozilla Hacks – the Web developer blog
  3. [...] منبع: http://www.softwareishard.com/blog/firebug/firebug-tip-trace-styles Tagged: [...]

    #3 فایرباگ 1.10 – Trace کردن استایل | محمد فلاحت
  4. Excellent!!!!!!!!!!!!!
    @notengoideacove

    #4 Hugo Cabrera
  5. hm, I thoungh @Explicit CSS Properties@ was before version 1.10

    #5 STEVER
  6. @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

    #6 Honza
  7. #7 Firebug 1.10 Sürümü Yenilikleri / Fatih Hayrioğlu'nun not defteri
  8. [...] справа — кликабелен, ведёт на описания правил. См. подробное описание (англ.). (Аплодисменты — информативность этой панели [...]

    #8 [Перевод] Firebug 1.10 — новые возможности | wp2005 [Перевод] Firebug 1.10 — новые возможности |
  9. 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 ;)

    #9 Edwin Yip
  10. [...] 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" [...]

    #10 Endometriosis & Infertility - Infertility In Female.com | Infertility In Female.com
  11. [...] 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" [...]

    #11 100 Weight Loss Tips | weight loss diet information, dieting and weight loss, weight loss for men and women

Sorry, the comment form is closed at this time.