safari only css hack,CSS hack for Safari ONLY

Updated info due to changes in web development since this was asked and HTML5 has become the new standard:

html[xmlns*=""] body:last-child #widget { background:#f00; }

html[xmlns*=""]:root #widget { background:#f00; }

These worked great for Safari 2-3 but not newer safari versions which came later. They also required a more descriptive doctype/html spec. Here is the previous standard:

HTML5 removes this however with the plain and rather basic:

Other ways to target only Safari, and not Chrome/Opera, and works in HTML5:

This one still works properly with Safari 10.1:

/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .safari_only {

color:#0000FF;

background-color:#CCCCCC;

}

To cover more versions, 6.1 and up, at this time you have to use the next pair of css hacks. The one for 6.1-10.0 to go with one that handles 10.1 and up.

So then -- here is one I worked out for Safari 10.1+:

The double media query is important here, don't remove it.

/* Safari 10.1+ (which is the latest version of Safari at this time) */

@media not all and (min-resolution:.001dpcm) { @media {

.safari_only {

color:#0000FF;

background-color:#CCCCCC;

}

}}

Try this one if SCSS or other tool set has trouble with the nested media query:

/* Safari 10.1+ (alternate method) */

@media not all and (min-resolution:.001dpcm)

{ @supports (-webkit-appearance:none) {

.safari_only {

color:#0000FF;

background-color:#CCCCCC;

}

}}

This next one works for 6.1-10.0 but not 10.1 (Late March 2017 update)

/* Safari 6.1-10.0 [not 10.1+] */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media

{

.safari_only {

color:#0000FF;

background-color:#CCCCCC;

}

}}

/* Safari 6.1-7.0 */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)

{

.safari_only {(;

color:#0000FF;

background-color:#CCCCCC;

);}

}

These combination css hacks are actually new as of this posting, I hope people find it handy. Meaning that I crafted these myself with many hours of testing and preparation so while you may have seen parts of them that look familiar out there, this was not copied from any site in this form but modified personally by myself to achieve this result. At the time of this posting Safari is in version 8 and Chrome is in version 37.

Please be aware that if you are using an iOS device, (tested on iOS 7 & 8 platforms) Chrome renders as Safari since it uses the built-in Safari engine. It is not 'Chrome' at all from what I can see, but Safari with a different look. Chrome hacks do not affect it, only the Safari ones. More about that here: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/

And to see it work:

Only Safari shows up in blue on gray here.

Live test page for this and many more CSS browser-specific hacks I have worked on: