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.

UPDATED for Safari 10.1 (Late March 2017 Update)

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.

Please be aware that these are hacks, and some of them are truly non-standard CSS code (which is why only some browsers are affected by them) and will not filter through SASS or other compilers or filters because they try to remove the non-standard data or convert to cross-browser form which completely destroys what we are trying to do here. To use them anyway, in many cases you must use your filter first, then apply the hack afterward. Such is the nature of a hack and does require the extra work of either including an external unfiltered CSS file or code block afterward. 

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

Here is one for Safari 7.1 and newer:

/* Safari 7.1+ */

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

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

}
Author: Jeff Clayton

Here is one I worked out for Safari 10.1+:
(YES the double media query is a necessity!)

/* Safari 10.1+ */

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

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

    }
}}

Author: Jeff Clayton

This hack I worked out by combining multiple other hacks is for 6.1-10.0 (not 10.1):

/* Safari 6.1-10.0 (10.1 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 is a hack that separates 6.1-7.0 from the above 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

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.io/css_hacks.html#webkit

and mirror here:

http://browserstrangeness.github.io/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
35 comments on “CSS Hacks for Safari 6.1, 7, 8, 9 and 10 (Not Chrome!)
  1. thanks for your tips, really helpfull.

    Like

    • Jeff Clayton says:

      Most welcome, glad my efforts could help!

      Like

    • Leonie says:

      Message from 2017 here!

      We have just applied this fix in a bootstrap 4 based template and it works.
      However, with the 2nd empty media query the scss compiler (obviously) throws an error for improper syntax.
      Adding it after it has been compiled was not a viable long-term solution, so we tried removing the 2nd media query altogether.
      We have tested it, the compiler agrees and it works!

      Thank you very much for this amazing fix, it has surely prevented a brain bleed 😉

      Like

      • Jeff Clayton says:

        You will find problems with the hack by removing it, the second media query rules out MANY other browsers. In other words you have rendered much of what it does useless. The ones with real ‘hack’ potential work because they are only allowed through browsers that allow an error to pass through. The way you have to use those is enter them after the scss processor is complete. What you have is just a partial. If you aren’t worried about 6.1-7.0 you can do the 7.1+ (includes also 6.2 because that patch update was added by apple much later) and it should compile okay.

        Liked by 1 person

      • Jeff Clayton says:

        You may be able to get it to compile by changing the @media { part to say @media all and {
        [add ‘all and’ to the second query] and it may pass inspection. Current browsers handle nested media queries as a standard so scss may be okay with it.

        Like

      • Leonie says:

        Hmm, good to know.
        We ran into issues on Safari 6.0.2 up to the latest safari browsers.

        First we tried ‘all’ and the compiler removed the entire bit of code. Will try ‘all and’ and get back to you.

        Many thanks for your swift reply and advice!

        Like

      • Jeff Clayton says:

        dual media queries weren’t available in safari until 6.1 fyi so that will not work for 6.0.X — however you can use one that targets 5.1-6.0 (it also affects very old chrome versions nobody uses any more so should not cause problems) — this one should do the trick: _::-moz-svg-foreign-content, :root .selector { property:value; }
        (chrome 10-24 is the old set i mean but should not be an issue)

        Like

      • Leonie says:

        Adding and all to the second media query in .scss doesn’t compile sadly.
        I suppose there is no real way other than adding it in after compiling. Which will suck – the site is going live but will be added to in the future –
        We can not forget to keep putting it in manually after compiling the scss files every time we change something in the scss files.

        Like

      • Jeff Clayton says:

        Of course, that is just the nature of the beast with non-standard (browser-targeted) css hacks that rely on bugs rather than programmatic forms. And you are welcome of course.

        Liked by 1 person

      • Jeff Clayton says:

        Depending on the hack, be sure you have the missing space after the ‘and’ and if you are using one that has extra brackets and semicolons they both are ones that should irritate scss — if either are removed you have the same issue– lack of capability — here is the missing space i refer to (not a mistake): and(-webkit-min-device-pixel-ratio:0)

        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

  8. Shane says:

    Do we replace .safari_only with the name of the class we are modifying?

    Like

  9. Sidhi says:

    Hey Jeff Thanks for the hacks that you provided but when I use css hack for safari 10+ my whole app doesn’t come up. I wanted to fix the footer in safari. the footer looks good in chrome,IE and firefox. We use angular2. Is there any thing else that can be done. Example:
    .footer {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 40px;
    @media not all and (min-resolution:.001dpcm) { @media
    {
    .safari_only {

    position: fixed;

    }
    }}

    }

    Please let me know if you have any other hack.

    Like

    • Jeff Clayton says:

      Media queries go outside of general css – you need to try this instead – post your media query after the rule not within it. Try it like this:

      .footer {
      position: relative;
      bottom: 0;
      width: 100%;
      height: 40px;
      }

      @media not all and (min-resolution:.001dpcm) { @media
      { /* Safari 10+ css goes here */

      .footer {
      position: fixed;
      }

      }}

      That should do it for you. Treat media queries (and supports features for that matter) as wrappers instead of regular css code and it will help you in general. Note that you also needed to change the class name from safari_only to footer so that it will override it in sequential order on the css document page.

      Like

  10. Elena says:

    hello, can u please help me….. i also have a problem with scss – and it doesn’t compile – mistakes…..”Error: media query expression must begin with ‘(‘”

    /* Safari 10.1+ */

    @media not all and (min-resolution:.001dpcm) { @media
    {
    @media(max-width: 320px){
    margin-right: 1px;
    }
    }}

    /* Safari 6.1-10.0 (10.1 is the latest version of Safari at this time) */

    @media screen and (min-color-index:0)
    and(-webkit-min-device-pixel-ratio:0) { @media
    {
    @media(max-width: 320px){
    margin-right: 1px;
    }
    }}

    /* Safari 6.1-7.0 */

    @media screen and (-webkit-min-device-pixel-ratio:0)
    and (min-color-index:0)
    {
    @media(max-width: 320px){
    margin-right: 1px;
    }
    }

    it doesn’t work…..maybe u will see the mistake

    Like

  11. Elena says:

    sorry. correction:

    @media not all and (min-resolution:.001dpcm) { @media
    {
    .mob-verify {
    @media(max-width: 320px){
    margin-right: 1px;
    }
    }
    }}

    /* Safari 6.1-10.0 (10.1 is the latest version of Safari at this time) */

    @media screen and (min-color-index:0)
    and(-webkit-min-device-pixel-ratio:0) { @media
    {
    .mob-verify {
    @media(max-width: 320px){
    margin-right: 1px;
    }
    }
    }}

    /* Safari 6.1-7.0 */

    @media screen and (-webkit-min-device-pixel-ratio:0)
    and (min-color-index:0)
    {
    .mob-verify {
    @media(max-width: 320px){
    margin-right: 1px;
    }
    }
    }

    Like

  12. Jeff Clayton says:

    the problem is that you are trying to put a media query within another css block. media queries need to be wrappers for css not the other way around. Also, the missing space is a hack not needed here, a space should be after @media. This one should read like so for example:
    /* Safari 6.1-7.0 */

    @media screen and (-webkit-min-device-pixel-ratio:0)
    and (min-color-index:0)
    {
    @media (max-width: 320px) {
    .mob-verify {
    margin-right: 1px;
    }
    }
    }

    Like

    • Jeff Clayton says:

      By that token the other two should be inverted (.mob-verify within the inside media query for them as well) — if SCSS hates it you may also have to use the hack AFTER SCSS as I have heard that SCSS does not always like nested media queries to begin with.

      Like

  13. Paul Brady says:

    Thanks Jeff. Valuable stuff here.

    But sadly, the Chrome 10.1 hack fails in my SASS validation. 😦

    Like

    • Jeff Clayton says:

      I know, SASS validation and other tools are looking for standard CSS that works with ALL browsers. The reason it works, and how you have to use it with a site that filters code — many CSS hacks cannot be resolved that way: You have to apply the hack AFTER the SASS validator. It is not valid code for most browsers, which is why it works only for Safari. That is also why it is legitimately termed ‘a hack’.

      Like

  14. Jeff Clayton says:

    Elaborating– the reason it is like that with Safari is that it takes more than a simple CSS change to work with Safari and separate it from Chrome. This problem has required more aggressive methods that rely on how it handles error checking among other things. While Firefox has it’s own simpler methods, Safari and Chrome attempt to share the same webkit under the hood. To separate them, one must rely on finding CSS that does not process or validate in one browser but is allowed by the other. So while some CSS hacks are simple and will validate through filters or compilers, not all of them will do that because the way they work is to confound all browsers except the target, not be allowed by them.

    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: