[Wsuug] Conditional CSS revisited

Wed Sep 17 12:18:57 EDT 2008

Jason Wilson wrote:
> Nah, didn't sound like an attack at all.

Good.  ;)

> Now for starters, I haven't actually seen it employed before, I have 
> seen the conditional-css site before and was instantly put off of it. I 
> suppose don't knock it before you try it comes into play there, but oh 
> well.
> 
> You are right that my preferred method is to have additional style 
> sheets. The big motivator there for me is ease of maintenance.

Noted. And in its defense, recommendations are to use their technique
on small to moderate sites, to not use it on large sites.

> This Conditional CSS method requires you to muddy your stylesheet with 
> inline conditional comments, so yes, you only have one stylesheet but 
> that sheet is a mess of non-standard code. When a new browser comes 
> along (such as IE7) you add even more inline. When something changes you 
> have to wade through this pile of declarations to figure out what you want.

I believe the best practice is to separate typographic styles from
structural styles, screen from print, etc. when venturing into multiple
style sheets territory.

That said, at some point it becomes a question of whether it is better
to search your one file for X or open the 2nd, 3rd, 4th etc. sheet to
search it for the target selector.

> With the method I use, I have maybe a small handful off conditional 
> comment in my <head> tag that call in the patch stylesheets when 
> appropriate and all of those style-sheets contain standard CSS.
> 
> With the Conditional CSS method here, you have one massive sheet that is 
> loaded all the time for everyone and also has to be processed by PHP 
> every time.
> 
> It just works better for me, especially on large sites, to separate out 
> all of my tweaks and non-standard stuff so that I can get to them 
> quickly and so that I only use them when absolutely necessary.

Okay.

This seems like a good juncture to make a small confession. On first
viewing the conditional-css.com site, I did not read thoroughly enough
and I came away thinking that the "service" on the right-hand side of
the home page screen was a utility to ginny up an existing style sheet,
given inputs of root and conditional style sheets. My mistake.

Now I realize, it provides a required, helper utility to parse and make
sense of the ginnied up style sheet.

Still though, this would seem to be the server-side browser sniffing
that was mentioned as being better than conditional comments on the
markup side not so long ago. This technique ultimately presents clean
code to the end user: http://conditional-css.com/demo/ - View it in
different browsers, inspect the style sheet for each one. Can you find
evidence of the conditionals anywhere?

Who is opposed to shiny, sparkling clean code at the presentation level?
Sure, it means slightly more obfuscated code behind the scenes, so do
microformats - which I half-heartedly oppose because they increase my
work load, even though I really do intuitively understand the benefits
they provide. If only one true standard would emerge from that morass.

Reese