CSS Hacks for Safari 6.1, 7, 8, 9 and 10 (Not Chrome!)

These are my legal CSS Hacks for fixing web browser quirks or outright bugs. Please enjoy, I have been working on them for years. May it help you if you need them. Please read here first: [What are these CSS Hacks Anyway?] Then check my [Live CSS Hacks Test Page] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

Safari has changed since version 6.1, as many have noticed.

Please note: if you are using Chrome on iOS (at least in versions 6.1-9) and you wonder why none of the hacks seem to be separating Chrome from Safari, it is because the iOS version of Chrome is using the Safari engine. It uses Safari hacks not the Chrome ones. More about that here: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/

That out of the way here are hacks for you to use for more recent versions of Safari.

For 9 specifically, I have been working on a page for that, so – rather than retype the same code, go here for hacks to affect Safari 9 (including a hack for iOS only now): My Safari 9 CSS Hacks

This hack I worked out by combining multiple other hacks is for 6.1+:

/* Safari 6.1+ (10 is the latest version of Safari at this time) */

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

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

Author: Jeff Clayton

Below are hacks that separate 6.1-7.0, and 7.1+
These also required a combination of multiple hacks in order to get the right result:

/* 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; 

    );}
}

Author: Jeff Clayton

Here is one for Safari 8 and newer:

/* Safari 7.1+ */

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

  color:#0000FF; 
  background-color:#CCCCCC; 

}

Author: Jeff Clayton

To use them:

This text will be Blue in Safari

To see them working live, I have created a test page here:

http://browserstrangeness.bitbucket.org/css_hacks.html#webkit

Advertisements

IT Director/Senior Software Engineer, Photographer I test and create new CSS web page formatting hacks for BrowserHacks.com for the purpose of repairing web sites. PS-- CSS hacks are fun, but please attempt good CSS first unless in a bind. See Test Pages: https://browserstrangeness.bitbucket.io and https://browserstrangeness.github.io

Tagged with: , , , , , , , , , , , , ,
Posted in Apple, Computers, CSS, CSS Hacks, Hacks, iOS, Macintosh, OS X 10.10 Yosemite, OS X 10.6 Snow Leopard, OS X 10.7 Lion, OS X 10.8 Mountain Lion, OS X 10.9 Mavericks, Safari, Safari-All, Tech, Web, Web Browser, Web Browsers
16 comments on “CSS Hacks for Safari 6.1, 7, 8, 9 and 10 (Not Chrome!)
  1. thanks for your tips, really helpfull.

    Like

  2. This is the only solution that worked after many, many hours of banging my head against a brick wall. Thank you!!!

    Like

    • Jeff Clayton says:

      You are very welcome – it took a very large amount of time and effort to create these as I had the same frustration — and keeping the results to myself seemed a little unfair!

      Like

  3. Aspriant says:

    Thanks for your Awesome Article.

    Like

  4. Geraldo Luiz says:

    Thank you very much.

    Like

  5. guldoe says:

    Thanks for all, are any hack safari vs chrome in ios

    Like

  6. Kapil says:

    Awsome Buddy
    Great Help
    Great Thanks

    Like

  7. THANK YOU!!! At approximately 10:30 this morning, the “Safari 8 and newer” hack made it possible for me to not have to delay our departure this afternoon for D.C. to visit our daughter on her spring break. (I’ll ask my wife to send some good karma your way.)

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: