CSS hack for Safari ONLY

css safari

34,591

Solution 1

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:

<!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 the plain and rather basic:

<!DOCTYPE html>
<html>

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)

<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 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:

<div class="safari_only">
   Only Safari shows up in blue on gray here.
</div>

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

https://browserstrangeness.bitbucket.io/css_hacks.html#safari OR https://browserstrangeness.github.io/css_hacks.html#safari

Solution 2

You might be best off changing that particular property with javascript that verifies what browser you're on .

Otherwise one of the other questions pointed to this. It lets you specify CSS properties on a per-browser basis, also using javascript.

34,591

Author by

Jakub Lédl

Updated on August 16, 2020

Comments

Jakub Lédl over 3 years

I'm solving one task and I need to create a piece of CSS what would apply only in Safari, NOT the other WebKit browser (mustn't apply in Chrome, f.e.). Please, could anyone toss in some ideas?
Jakub Lédl almost 14 years

Yeah, but this allows only for [safari3] (I use 4) or [safari], which applies for Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome.
Jon W almost 14 years

Take a closer look at the javascript which verifies what browser you're on. Doing it manually, you should be able to specify exactly the behavior you want.
Rob over 12 years

While @JonW probably has the best answer so far, without the markup, this has turned into a horrible question overall.
Rolf over 9 years

Thanks for the useful answer
Jeff Clayton over 9 years

Most welcome - Safari 8 support additions and updates are above in the edits