CSS Hacks, Firefox 3.5 and Google Chrome

Question

I searched around and allegedly, body:nth-of-type(1) is used in CSS to target only Safari and Google Chrome.

Lo and behold, Mozilla reads it properly to

Answer 1

It's best to avoid these kinds of hacks, as they depend on the availability of emerging standards. Quite obviously, emerging standards will increasingly be available on more platforms as time goes on. In other words, it's a mistake to assume that a given browser is [some specific browser] because it has [some specific CSS feature].

Eric Wendelin's answer is a good one for targeting WebKit browsers. There's also a good way to target Gecko browsers:

@-moz-document url-prefix() {
    /* Gecko-specific CSS here */
}

Add in WebKit targeting (thanks Eric Wendelin):

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Webkit-specific CSS here */
}

You can probably also reliably use the "feature-detection" style of CSS hacks within constructs like that to isolate versions, as you've already correctly isolated the engine, and you can more safely assume that the feature disparity between versions of a given engine won't shift over time.

Obviously the best way to isolate IE and its various versions is to use conditional comments, which IE has supported for many versions.

Answer 2

Any of the -webkit selectors should work for just Chrome and Safari.

http://qooxdoo.org/documentation/general/webkit_css_styles

Hope this is what you're looking for. Here's the webkit website:

http://webkit.org/

Answer 3

@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.

Answer 4

The @supports feature detection works for Chrome 28 and newer now.

/* Chrome 28+ */

@supports (-webkit-appearance:none) { .selector { color:red; } }

I posted this to browserhacks - so either test it at browserhacks.com or my live personal css hacks test site at http://browserstrangeness.bitbucket.org/css_hacks.html#chrome.

There are many others there that I have worked out for specific newer versions as well. I hope you enjoy them.