Working CSS Hack for Safari and Chrome

Posted on | July 8, 2009 | No Comments

I need code to set the right padding of the element in all browsers and then reset it in Safari 3.0 and Chrome. I tried hack for safari and chrome.

Example: Put pound sign ( # ) after a semi-colon ( ; )

#mainNav li { margin:0 26px 0 0; }
#mainNav li { margin:0 26px 0 0; #} /* -- for all non Safari browsers -- */

But It does not worked with me as because of higher version of browsers. It does not work after Safari 3.0 Version.
Then I try new and working hack for this problem. It worked with me.

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
}

The above code targets both Safari 3.0 and Google’s Chrome. Hopefully, it will be a future-proof hack, since the -webkit part of the selector will probably not be adopted by other browsers.

Example:

#mainNav li { margin:0 34px 0 0; }

@media screen and (-webkit-min-device-pixel-ratio:0) { /* hacked for chrome and safari */
#mainNav li { margin:0 26px 0 0; }
}

Comments