slayeroffice - web experiments gone horribly awry

03.12.2004 - Style Sheet Viewer Favelet

At work we're in the process of re-vamping our main web based application to fall in line with XHTML/CSS standards with a very CSS Zengarden approach to templatizing the documents -- the idea being generalized markup with CSS controlling the know, the whole presentation/markup seperation dogma.

In working on it, I've found it a bit of a pain in the ass to consult the various style sheets that control each individual template's appearence (based on myriad rules and variables) to see who's doing what and where, so once again it's a favelet to the rescue.

This newest addition to the Tools section is the Style Sheet Viewer for Mozilla & Firefox. It will create a DIV element that overlays the document and list all the style sheets referenced therein with their selectors and rules. It works for LINK's, inline STYLE's and one-level @import rules. (Right click that link and hit "Bookmark this Link")

I've tested it on a number of sites and the only ones it has difficulty with are sites that reference style sheets on different domains, such as Gamespot, which throws an "Access to restricted URI denied" exception, and Simon Willison's site, which causes it to throw a long-winded component exception which shall require further investigation.

As an aside, while researching this project, I came across the documentation for ownerRule on Mozilla's Gecko DOM Reference.

"Note that if the value of the ownerNode property on the current STYLE element is NULL, then then ownerRule returns the rule that blah. And vice versa."

Comments have been closed for this post.