CSS hack for ONLY Safari
Updated information due to changes in web development, since this was asked and HTML5 became the new standard:
html[xmlns*=""] body:last-child #widget { background:#f00; }
html[xmlns*=""]:root #widget { background:#f00; }
They worked great for Safari 2-3, but not the later versions of safari that came later. They also required a more descriptive doctype / html specification. Here's the previous standard:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML5 removes this, however, with a simple and fairly straightforward:
<!DOCTYPE html>
<html>
Other ways to customize Safari only, not Chrome / Opera, and work in HTML5:
This file works correctly 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 above, you need to use the following couple of css hacks at this time. One for 6.1-10.0 should come with one that handles 10.1 and up.
So, just about I developed for Safari 10.1+:
Double ads are important here, do not delete them.
/* 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 if SCSS or another toolkit is having problems requesting nested media:
/* 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 works for 6.1-10.0, but not 10.1 (late March 2017 update)
<style type="text/css">
/* 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;
);}
}
</style>
These combinations of css hacks are actually new, as from this post, I hope people find it handy. The point is that I have handled them myself for many hours of testing and preparation, so maybe you saw parts of them that looked familiar there, it wasn't copied from any site in this form, but personally changed personally to achieve this result. At the time of this posting, Safari is in version 8 and Chrome is in version 37.
Remember, if you are using an iOS device (tested on iOS 7 and 8 platforms) Chrome displays Safari as it uses the built-in Safari engine. This is not "Chrome" at all, but what I see, but Safari with a different look. Chrome hacks don't affect it, only Safari. More on this here: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/
And to see how it works:
<div class="safari_only">
Only Safari shows up in blue on gray here.
</div>
On a test page for this and many other CSS browser hackers I've worked on:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari OR https://browserstrangeness.github.io/css_hacks.html#safari
a source to share
You might be better off changing this property with javascript which checks which browser you are in .
Otherwise, one of the other questions pointed to this . It allows you to specify CSS properties for each browser using javascript as well.
a source to share