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.

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 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;
 
    }
}

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;
    );}
}