I need some CSS to not get picked up by Safari or Chrome

[tosbourn]

Hey there,

I have a CSS issue, I have applied a set of styles to a checkbox in order to make it zoom correctly in IE8 (This is a must have feature for my customer).

However the solution requires some CSS which just isn't recognised by Safari or Chrome, to be honest I am not too worried about Chrome support for this particular audience, but Safari support is certainly something I need to achieve.

Basically I am wondering if anyone knows of a nice way of stopping Safari or Chrome from applying certain CSS rules?

[drhowarddrfine]

Use conditional comments for IE.

[tosbourn]

Cheers but I need Firefox et al to still work, it is an issue specific to those two browsers.

I think I am going to go with a PHP Browser Detect function and then call these extra CSS classes from one document if the browser isn't Chrome or Safari.

I will post up how I get on.

[drhowarddrfine]

Conditional comments only work on IE so Firefox and Safari will ignore them. So anything you want to feed IE and not the others, put them in conditional comments.

[Rowsdower!]

Originally Posted by drhowarddrfine

Conditional comments only work on IE so Firefox and Safari will ignore them. So anything you want to feed IE and not the others, put them in conditional comments.

I think you missed it, but the OP seems to want IE and FF to read and use the CSS and make it so that ONLY Safari and Chrome will ignore it. I would guess that there are two options for that:

1) To simply make Chrome and Safari NOT get a certain style at all - meaning that you could even leave those elements at their browser default...
For Mozilla-based browsers you can use the -moz- prefix to target only that browser type. This is the way you would write up the CSS in the main CSS file (basically just add that prefix only to the CSS you want Safari and Chrome to ignore). Then you'd just need to give IE those styles separately with conditional IE code to link the CSS in an ie-only CSS file.

2) To simply change the style for Chrome (and all other webkit browsers, just FYI) and Safari - meaning that you cannot use browser default styles for those elements anymore...
You could use the basic CSS file you already have and then add a second statement using the -webkit- CSS prefix to target Chrome and other webkit-based browsers and specify different CSS if that fixes the problem. Safari can be similarly targeted (with a hack) described here:
http://dustinbrewer.com/css-hackgett...ari-to-behave/

The second method assumes that there is CSS you can apply to fix those two browsers which would not be the case if, for example, you wanted to see default input or button styles in those two browsers. In a case like that you would have to use the first method I mentioned.