Safari CSS Hacks

Applying changes only for Safari has been always a challenging task. Also adding the fact that Safari has changed since version 6.1 makes it even harder. In this article we are going to discuss Safari CSS hacks.

Chrome on iOS

if you are using Chrome on iOS (at least in versions 6.1 and newer) 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.

We start with Safari 6.1+ and then versions above it.

Safari Hacks

Safari 6.1+

By combining multiple other hacks for 6.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+ (9.0 is the latest version of Safari at this time)

Safari 9.0+

One for Safari 9+:

_::-webkit-:not(:root:root), .safari_only {

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

}
Safari 9

Safari 9 now includes feature detection so we can use that as well.

@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{

  .safari_only {
    color:#0000FF;
    background-color:#CCCCCC;
  }

}
Safari 9.0+ (iOS Only)

Now we can target iOS devices only. As mentioned above, since Chrome on iOS is rooted in Safari, it of course hits that one as well.

@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{
  .safari_only {
    color:#0000FF;
    background-color:#CCCCCC;
  }
}
Safari 9.0+ (non-iOS)

One for Safari 9+ but not iOS devices:

_:-webkit-full-screen:not(:root:root), .safari_only {

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

}
Safari 6.1-7.0

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:

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

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

    );}
}
Safari 7.1+

This one works properly with Safari 9.0 as well.

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

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

}
Safari 6.1+ (non-iOS)

Since I have pointed out the way to block iOS devices, here is the modified version of Safari 6.1+ hack that targets non-iOS devices:

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{
  @media {
    _:-webkit-full-screen, .safari_only {
        color:#0000FF;
        background-color:#CCCCCC;
    }
  }
}

Here are the basics, again check my test page for lots of specific versions of Chrome, but these cover Chrome in general. Chrome is version 45, Dev and Canary versions are up to version 47 at this time.

Chrome Only Hacks

You might want to add styles to Chrome only and not Safari.

Chrome 29+
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
    .chrome_only {

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

    }
}
Chrome 29+

The @supports feature query works well for Chrome 29+ as well.

@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
    .chrome_only {

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

    }
}

A modified version of the one we were using for Chrome 28+ is shown next. Safari 9, the coming Firefox browsers, and the Microsoft Edge browser are not picked up with this one.

Next, we look at Chrome 28+.

Chrome 28+

This older method below now picks up Safari 9 and the Microsoft Edge browser without the above update.

@supports (-webkit-appearance:none)
{
    .chrome_and_safari {

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

    }
}

The coming versions of Firefox and Microsoft Edge have added support for multiple -webkit- CSS codes in their programming, and both Edge and Safari 9 have added support for @supports feature detection. Chrome and Firefox included @supports previously.

Chrome 22-28

The block of Chrome versions 22-28 (If needed to support older versions) are also possible to target with a twist on my Safari combo hacks I posted above:

@media screen and(-webkit-min-device-pixel-ratio:0)
{
    .chrome_only {-chrome-:only(;
       color:#0000FF;
       background-color:#CCCCCC;
    );}
}

Be first to comment

Leave a Reply