CSS & Me

Friday, January 14, 2005

Every so often I take a look at an application and think, hmmm, with a couple tweaks I could have this UI looking really nice, but when I go to check-in the style sheet changes I realize I only have read-only access. Then I remember - after my last set of tweaks they revoked my commit privileges on all css files. Sigh. The measures people take when they don’t agree with your sense of color and style.

Over the years I’ve recognized the flexibility style sheets offer, and I’ve designed (in the architecture sense) with css in mind. Still, I’ve never felt completely comfortable with css, partly because I have nightmares of looking at bug tracking entries circa year 2000. You know, the entries that look like “Fonts are offset 1 pixel to the left on browser version 4.35.7654.2 when system time between 1300 and 1315 hours.”. Since one big customer has an affinity for browser version 4.35.7654.2 it’s time to tell a dev to work around another CSS quirk and re-test on 18 browser versions. Today, Google turns up over 300,000 hits for “yet another css bug” – yikes.

Another problem is digging into the CSS files someone else wrote. It can prove difficult to piece together what I’m seeing on the screen with the styles in a css file. A great tool to help put this type of puzzle together is the web developer extension for FireFox. Is there anything comparable for IE?

Finally, CSS files never seem to shrink – they only grow bigger. New styles are added, old styles never disappear. Someone needs to write some sort of refactoring / optimization tool for CSS. Or have they already?

Not that I’d be able to use the tool, seeing as how I’m banished from styleland.

Course I do have the admin password to use in a pinch….


Comments
Rhys Jeremiah Friday, January 14, 2005
I have written something which can help with the development of CSS in IE. It's basically an explorer bar with an edit control which displays and allows you to alter the CSS of a page, similar to the edit css functionality on the web developer extension: http://www.hairy-spider.com/blog/permalink.aspx?guid=1ade8d2f-9f15-4cd7-ae7f-0e643de2946b
<br>
<br>It's not particularly bug free as I wrote it to suit my limited needs.
<br>
<br>Also you maybe interested in the document examiner menu extension also for IE and also on my site. This broadly mimics the DOM Inspector for firefox. http://www.hairy-spider.com/blog/permalink.aspx?guid=ca421d9e-aba1-4681-8810-c34db252877e
<br>
<br>Nothing like a bit of shameful self promotion ;)
Jeremy Friday, January 14, 2005
CSS typically doesn't have refactoring because by large most &quot;web developers&quot; don't seem to consider it as important as say index.html in terms of content.
<br>
<br>Personally I can't stand extrenuous unnecessary information from anything I do and since a CSS file has to be DOWNLOADED, keeping it small is a very big goal of mine. Sure it eliminates the need for CSS on every single page but if your CSS file is bigger than index.html then you have some serious problems. Well, it illudes to serious problems but there may be a valid reason why a CSS file is bigger than the HTML content on the site.
<br>
<br>I do believe CSS to be as important as the HTML itself because without CSS it would have to be included in the file. Why should it be any different if it's stored in some file that is common to every page?
<br>
<br>I believe much of the problem is developer's don't hold CSS files as important as the content so it's treated like a second-class citizen when it shouldn't be. Posts like this will hopefully help kick other developers in the butt so that all of their code is maintained properly (not just the code that matters)
Milan Negovan Sunday, January 16, 2005
There's a similar toolbar for Internet Explorer\Win (http://www.nils.org.au/ais/).
<br>
<br>The problem with IE lies deeper, though. Not a single toolbar or refactoring tool can accommodate all the CSS bugs IE is replete with. Ironically, it's the worst common-use browser today.
<br>
<br>I find working with CSS exciting and rewarding. It allows me to approach web UIs in a much different way than the &quot;traditional&quot; way of building web apps with server controls. You have to be prepared for a lot of hair pulling, though. :) It's good when browser bugs are documented. It's worse when they are not.
<br>
<br>Good luck and let me know if you need help with CSS.
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!