jfriend
Oct-24-2005, 01:36 PM
When trying to figure out what is the minimum amount of CSS in order to display something that is currently hidden on the page, I'm wondering if there is any sort of tool that will show me which CSS rules are causing something to be hidden? I have the FireFox web developer toolbar which is very useful, but I haven't found this in it.
What happens now is that you have to manually build a tree of the class and ID hieararchy in the relevant part of the page and then try to make sure that everything in that tree is turned on or you have to search all the CSS that governs the site to try to figure which things in the parent chain are getting turned off. Neither is all that easy.
As an example, I found that:
#smugmug #albumNav_bottom {display:block;}
would turn the bottom navigation and shopping cart buttons on, but the less specific CSS:
#albumNav_bottom {display:block;}
would not turn it on and I'm trying to figure out why.
This particular example is complicated by the fact that there are more than 10 class and IDs involved in the parent chain for the bottom shopping cart buttons and it could be any one of them that has a rule on it that's keeping it from showing. I'd love a tool that would show me which more specific rule is hiding it.
The reason I think this is important is that if you just hack your CSS without really understanding it, then you can end up with CSS that is both brittle (breaks easily when the site changes) and you can end up with CSS that is hard to maintain. In this particular example, I just want shopping cart buttons at the bottom for any view that would normally have shopping cart buttons and I'd rather not have to name out all the page themes in individual rules just to make that true because that makes my CSS more brittle in the future (e.g. it breaks everytime a new standard theme is created).
Do such CSS tools exist?
What happens now is that you have to manually build a tree of the class and ID hieararchy in the relevant part of the page and then try to make sure that everything in that tree is turned on or you have to search all the CSS that governs the site to try to figure which things in the parent chain are getting turned off. Neither is all that easy.
As an example, I found that:
#smugmug #albumNav_bottom {display:block;}
would turn the bottom navigation and shopping cart buttons on, but the less specific CSS:
#albumNav_bottom {display:block;}
would not turn it on and I'm trying to figure out why.
This particular example is complicated by the fact that there are more than 10 class and IDs involved in the parent chain for the bottom shopping cart buttons and it could be any one of them that has a rule on it that's keeping it from showing. I'd love a tool that would show me which more specific rule is hiding it.
The reason I think this is important is that if you just hack your CSS without really understanding it, then you can end up with CSS that is both brittle (breaks easily when the site changes) and you can end up with CSS that is hard to maintain. In this particular example, I just want shopping cart buttons at the bottom for any view that would normally have shopping cart buttons and I'd rather not have to name out all the page themes in individual rules just to make that true because that makes my CSS more brittle in the future (e.g. it breaks everytime a new standard theme is created).
Do such CSS tools exist?