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 too. I searched ten times more but came up with nothing, so here I am.

Is there a Google Chrome-only CSS hack?

Solution 1

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

Solution 2

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.

Comments

[talkingD0G]

When I add your above CSS, firefox and IE kinda go wonky and don't read any of my CSS that's below the @media screen block. Do you know what could be wrong?

[talkingD0G]

I just added the CSS code to the bottom of the page - solved the issue. Thanks!

[cimmanon]

This might not be a reliable way to target WebKit browsers anymore, as browser vendors have begun adopting webkit prefixes as well as their own: glazman.org/weblog/dotclear/index.php?post/2012/02/09/…