CSS, How To tweak css for only Safari?

by admin on Aug.14, 2009, under Tutorials

If you have spent anytime dealing with CSS you have run into issues with a browser rendering code incorrectly. You may even have gone as far as to make several style sheets and use a browser check to tell the browser which one to use. Most of my websites dont need more then one style sheet. I have come to realize that if I am more then a few pixels of then my code is somehow incorrect.

Still there is always that one issue. FrenchSquared was perfect in all the current major browsers except Safari and in Safari only the footer was off by 10px. I mean really 10px. There was no way I was going to write a browser check for Safari over 10 lousy pixels.

Instead in the bottom of my CSS I added the code:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
#footer { padding-top:10px; }
}

I have no idea why tis works but it does. In Safari 3.0 and 4.o you can add @media screen and (-webkit-min-device-pixel-ratio:0) to the style sheet and place whatever correction you need inside that tag. None of the other browsers will see this code.

I simply create a separate tag for Safari and now everything looks great with one CSS page.