SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast Davve's Avatar
    Join Date
    Jan 2002
    Location
    Norrkoping, SWEDEN
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Possible to backtrace applications of styles to a certain element or class?

    Is there any application like Web Developer or similar that makes it possible to backtrace css applications? What I mean is:

    Say I have this span.class, and it has been styled from different sheets, say sheet1.css, sheet2.css, and also from some inline styles:
    HTML Code:
    <link href="sheet1.css"/>
    <link href="sheet2.css"/>
    
    <body>
    <span class="class" style="color: red"></span>
    </body>
    Code:
    /* sheet1.css */
    .class {color: blue;}
    
    /* sheet2.css */
    .class {color: yellow;}
    Sometimes it'd be really nice to have some kind of tool of backtracing the styles; to know from where the different styles came, and in what order.

    I am right now in the middle of a pretty big e-commerce web application and the CSS nest is getting rather nasty. Combined with different browser bugs, I've had some really tough problems.
    David Andersson Davve
    -MSc in Media Technology and Engineering:
    Working at AdLibris

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've come across similar problems in the past when I've inherited other people's code and it's something that I never found an easy solution for.

    Sometimes it may be easier just bite the bullet and combine stylesheet's to save time in the long run but more often than not I've just gone with it and tried to tidy things up as I run into a problem.

    The dust me selectors plugin might be useful as it'll tell you which styles in which stylesheets aren't being used on that specific page

    http://www.sitepoint.com/dustmeselectors/

    But there's nothing more specific to what you're after that I've come across.

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Opera's Developer Console and the Firefox add-ons DOM Inspector and Firebug can both do this. Point and click on an element and they will show you exactly which style rules affect the element and in which cascade order.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Enthusiast Davve's Avatar
    Join Date
    Jan 2002
    Location
    Norrkoping, SWEDEN
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to the both of you! The tools really helped in tracking down my problem.
    David Andersson Davve
    -MSc in Media Technology and Engineering:
    Working at AdLibris


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •