

Avoid browser-specific CSS hacks with CssUserAgent (cssua.js) - mckamey
http://cssuseragent.org/

======
erikpukinskis
Seems like a neat project. I wonder if it wouldn't be better to use feature-
based classes instead of browser-based classes though.

In the example they have IE5&6 specific code:

    
    
        .ua-ie-5 .logo-area,
        .ua-ie-6 .logo-area
        {
        /* IE versions < 7.0 don't fully support transparent 24-bit PNGs */
          background-image: url(logo.gif);
        }
    

But wouldn't it be more sensible to have something like this:

    
    
        .no-png-support
        {
          background-image: url(logo.gif);
        }
    

That way you hit all relevant browsers... not just the ones whose quirks you
know about?

------
morganpyne
My first reaction to this is that it is using user-agent sniffing which is
always considered a bad idea. Capabililty detection seems to be the way to go
for this kind of thing.

Why would I ever want to use this instead of something like modernizr.js?

~~~
chime
Capability detection works well for some cases, not all. I was working on a
web-app today and was trying to make a menu-bar using ul/li with small icon
images and no matter what I did, every single browser (chrome/ff/ie/opera)
rendered slightly differently. In one browser I had to add display:block and
in another, position:relative. Putting position:relative for all browsers did
not work. One browser needed line-height:14px while another needed 20px.

I didn't want to spend 3 hours finding the root cause or the most elegant
solution to this annoying little problem. So I just did _line-height:20px and
it lined up perfectly in IE. And I used jQuery.browser.opera and
addClass(".fixopera") to make sure it worked in Opera. Detecting the box-model
etc. could help if it was related to box-model issues. When text and images
just don't line up, what should I use?

~~~
mckamey
Use CssUserAgent and be done with it.

------
8ig8
In my experience, if you're using a lot of browser hacks then you're doing
something wrong. With that said, IE continues to be the problem child, so most
of the time a hack or two is required. In this case, I think Paul Irish's
method helps tremendously without the overhead of JS...

[http://paulirish.com/2008/conditional-stylesheets-vs-css-
hac...](http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-
neither/)

~~~
mckamey
That's a creative solution. Too bad it only works for IE.

------
Gertig
This looks like a very cool project Stephen. I thought it would have been nice
to show a side by side comparison of with and without CssUserAgent.

~~~
mckamey
Interesting. As in a toggle to add/strip the classes back off again?

