4 ms·

Avoid browser-specific CSS hacks with CssUserAgent (cssua.js)

17 points by mckamey 16y ago

Gertig 16y ago
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 16y ago
  Interesting. As in a toggle to add/strip the classes back off again?
deleted 16y ago
[deleted]
erikpukinskis 16y ago
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 16y ago
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 16y ago
  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 16y ago
  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 16y ago
    Use CssUserAgent and be done with it.
8ig8 16y ago
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-hacks-answer-neither/ http://paulirish.com/2008/conditional-stylesheets-vs-css-hac...
- mckamey 16y ago
  That's a creative solution. Too bad it only works for IE.

17 points by mckamey 16y ago

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 16y ago
Interesting. As in a toggle to add/strip the classes back off again?

deleted 16y ago

[deleted]

erikpukinskis 16y ago

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 16y ago

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 16y ago
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 16y ago
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 16y ago
  Use CssUserAgent and be done with it.

8ig8 16y ago

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-hacks-answer-neither/ http://paulirish.com/2008/conditional-stylesheets-vs-css-hac...

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