HN Explorer

10 comments

[ 3.1 ms ] story [ 33.8 ms ] thread
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?
[deleted]
(comment deleted)
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?

mckamey
Fair enough but CssUserAgent is a far lighter solution than Modernizr. I find that 99.9% of my CSS is the same per browser so I just need a slight tweak here or there which CssUserAgent does without a lot of overhead. Modernizr is about 5x the size and spends time manipulating lots of DOM objects to test features which might not even be used.
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...

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