What is better: CSS hacks or browser detection?
The problem is that you only really get one shot at the css (since it is pretty much static content at the client)... you can't (easily) adapt it to suit on the fly at the client - so for those tricky incompatible cases (and there's too many of them), detection is sadly the best route. I can't see this changing very soon.
With javascript, you can often avoid much of this pain through libraries like (as you state) jQuery - and checking for functionality support rather than identifying the specific browser (most of the time). There are some cases you need to know exactly (the box model, for example).
How to do browser detection with jQuery 1.3 with $.browser.msie deprecated?
I was facing something similar, there's no $.support.png (p.ej.), so I need to use the $.browser.version yet, maybe we can just keep asking for more $.support.XXXX properties, as much as needed.
How to Identify Microsoft Edge browser via CSS?
/* Microsoft Edge Browser 12-18 (All versions before Chromium) */
This one should work:
@supports (-ms-ime-align:auto) {
.selector {
property: value;
}
}
For more see: Browser Strangeness
Operating sytem detection for CSS hacks (aka need a PC only CSS hack)
The CSS Browser Selector can target different OS's. :)
CSS Hacks, Firefox 3.5 and Google Chrome
@media screen and (-webkit-min-device-pixel-ratio:0) { ... styles go here ... }
There is no CSS for only Chrome (AFAIK) but Chrome AND Safari. You may consider a Javascript solution.
UPDATE Jan 22, 2013: As mentioned in the comments, this may no longer be safe. I could not find a suitable alternative.
Different CSS files for Different Browsers
I know only for ie:
<!--[if IE]><link href="/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
also js detection
Related Topics
Bootstrap Responsive Columns Height
Avoid Z-Index Working Relative to the Parent Element
Svg with Radialgradient Not Work in Browsers
Re-Order Entire Page with CSS Flexbox
Sass and Combined Child Selector
How to Turn on Visual Studio 2010 .CSS Intellisense on .Less File
How to Get a Responsive Button in Bootstrap 3
How to Add Badge on Top of Font Awesome Symbol
CSS Keyframe Animation CPU Usage Is High, Should It Be This Way
Css-Only Acrylic Material from Fluent Design System
Google Chrome CSS Doesn't Update Unless Clear Cache
Fluid Container in Bootstrap 3
How to Specify Font Attributes for All Elements on an HTML Web Page
How to Add Multiple Classes in Material UI Using the Classes Props
Putting -Moz-Available and -Webkit-Fill-Available in One Width (CSS Property)
How to Calculate Percentages in Less CSS
Google Chrome, Flash and Z-Index Wrong Behaviour
Using :Focus Pseudo Class on Li or Other Element Else Than A,Input,Button, etc