CSS Hacks, Firefox 3.5, and Google Chrome

Question

I searched around and supposedly body:nth-of-type(1) used in CSS to customize only for Safari and Google Chrome.

So Mozilla also reads correctly. I searched ten times more, but didn't come up with anything, so I'm here.

Is CSS hacked only for Google Chrome?

Answer 1

@media screen and (-webkit-min-device-pixel-ratio:0) { ... styles go here ... }

No CSS only for Chrome (AFAIK) except Chrome and Safari. You may consider a Javascript solution.

UPDATE January 22, 2013: As mentioned in the comments, this may be more secure. I could not find a suitable alternative.

Answer 2

It is better to avoid such hacks, as they depend on the availability of new standards. It is clear that new standards will be increasingly available on other platforms over time. In other words, it is a mistake to assume that this browser is [a specific browser] because it has [some specific CSS function].

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

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

Add to WebKit targeting (thanks to Eric Wendellin):

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

Perhaps you can also reliably use the "object recognition" style of CSS hacks in constructions like this to isolate versions, since you have already correctly isolated the engine, and you can more confidently assume that there will be no difference in the characteristics between versions of this engine change over time.

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

Answer 3

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

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

Hope this is what you are looking for. Here is the website of the website:

http://webkit.org/

Answer 4

The @supports discovery feature works for Chrome 28 and later.

 /* Chrome 28+ */ @supports (-webkit-appearance:none) { .selector { color:red; } } 

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

There are many others that I have developed for specific new versions. I hope you will like it.