3

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?

AstroCB
  • 12,337
  • 20
  • 57
  • 73
Jakub Lédl
  • 1,805
  • 3
  • 17
  • 26
  • Well, I help my pal, who's kinda stupid, and he created a mixed layout with both Divs + CSS and tables. Now, I found a way to get these tables right in Safari, but on the other hand, they're totally wrong in Chrome. – Jakub Lédl May 18 '10 at 20:13
  • 3
    Safari and Chrome use the same rendering engine, Webkit. Are you sure you've isolated the problem? – ceejayoz May 18 '10 at 20:20
  • you might want to check this one: http://stackoverflow.com/questions/927626/how-do-you-deal-with-internet-explorer it's for IE but has the css if system in it – fmsf May 18 '10 at 20:21
  • 1
    @Jakub Lédl, may I suggest that you urge your friend to fix the layout, and avoid browser-sniffing/targeting? It's almost always easier in the long-run. – David Thomas May 19 '10 at 00:07
  • I think he'll do so the next time. He said that this layout was just too complex to be done without table layout. Not my opinion, though. I showed him the Blueprint CSS framework ;-) As for this problem, I finally decided to solve it server-side (`request.user_agent`). – Jakub Lédl May 19 '10 at 17:42

3 Answers3

11

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

Jeff Clayton
  • 7,053
  • 1
  • 31
  • 36
1

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.

Jon W
  • 15,480
  • 6
  • 37
  • 47
  • Yeah, but this allows only for [safari3] (I use 4) or [safari], which applies for Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome. – Jakub Lédl May 18 '10 at 20:23
  • 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. – Jon W May 18 '10 at 20:29
  • 1
    While @JonW probably has the best answer so far, without the markup, this has turned into a horrible question overall. – Rob Jan 10 '12 at 00:36
0

One of these should work:

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

html[xmlns*=""]:root #widget  { background:#f00;  }
mVChr
  • 49,587
  • 11
  • 107
  • 104