Is there a way to apply styles to Safari only?

Question

I'm trying to find a way to apply CSS just to Safari, but everything I find also applies to Chrome. I know these are currently both WebKit browsers, but I'm having problems with div alignments in Chrome and Safari; each displays differently.

I have been trying to use this but it affects Chrome as well:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  #safari { display: block; } 
} 

Does anyone know of another one that will just apply to Safari?

Answer 1

actually there is a solution to detect Safari (no matter which version) by using CSS @supports.

@supports not (fill: context-stroke) {
/*CSS*/
}

If you check caniuse you will see Safari has never supported context-stroke

Answer 2

• UPDATED FOR SEQUOIA & SAFARI 18.0.1 Update (Fall 2024 Update) *

PLEASE PLEASE -- If you are having trouble, and really want to get help or help others by posting a comment about it, Post Your Browser and Device (MacBook/IPad/etc... with both browser and OS version numbers!)

Claiming none of these work is not accurate (and actually not even possible.) Many of these are not really 'hacks' but code built into versions of Safari by Apple. More info is needed. I love the fact that you came here, and really want things to work out for you.

If you have issues getting something from here working on your site, please do check the test site via links below -- If a hack is working there, but not on your site, the hack is not the issue - there is something else happening with your site, often just a CSS conflict as mentioned below, or perhaps nothing is working but you may be unaware that you are not actually using Safari at all. Remember that this info is here to help people with (hopefully) short term issues.

The test site:

https://browserstrangeness.bitbucket.io/css_hacks.html#safari

AND MIRROR!

https://browserstrangeness.github.io/css_hacks.html#safari

NOTE: Filters and compilers (such as the SASS engine) expect standard 'cross-browser' code -- NOT CSS hacks like these which means they will rewrite, destroy or remove the hacks since that is not what hacks do. Much of this is non-standard code that has been painstakingly crafted to target single browser versions only and cannot work if they are altered. If you wish to use it with those, you must load your chosen CSS hack AFTER any filter or compiler. This may seem like a given but there has been a lot of confusion among people who do not realize that they are undoing a hack by running it through such software which was not designed for this purpose.

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

Please note: if you are using Chrome [and now also Firefox] on iOS (at least in iOS 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. More about that here: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ Firefox for iOS was released in Fall 2015. It also responds to the Safari Hacks, but none of the Firefox ones, same as iOS Chrome.

ALSO: If you have tried one or more of the hacks and have trouble getting them to work, please post sample code (better yet a test page) - the hack you are attempting, and what browser(s) (exact version!) you are using as well as the device you are using. Without that additional information, it is impossible for me or anyone else here to assist you.

Often it is a simple fix or a missing semicolon. With CSS it is usually that or a problem of which order the code is listed in the style sheets, if not just CSS errors. Please do test the hacks here on the test site. If it works there, that means the hack really is working for your setup, but it is something else that needs to be resolved. People here really do love to help, or at least point you in the right direction.

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

You should try this one first as it covers current Safari versions and is pure-Safari only:

This one still works properly with Safari 18.0.1 (Fall-2024):

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

@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)

This hack I created over many months of testing and experimentation by combining multiple other hacks.

NOTES: like above, the double media query is NOT an accident -- it rules out many older browsers that cannot handle media query nesting. -- The missing space after one of the 'and's is important as well. This is after all, a hack... and the only one that works for 6.1 and all newer Safari versions at this time. Also be aware as listed in the comments below, the hack is non-standard css and must be applied AFTER a filter. Filters such as SASS engines will rewrite/undo or completely remove it outright.

As mentioned above, please check my test page to see it working as-is (without modification!)

And here is the code:

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

    }
}}

For more 'version specific' Safari CSS, please continue to read below.

/* Safari 11+ */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {

    .safari_only { 

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

    }
}}

One for Safari 11.0:

/* Safari 11.0 (not 11.1) */

html >> * .safari_only {

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

}

One for Safari 10.0:

/* Safari 10.0 (not 10.1) */

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

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

}

Slightly modified works for 10.1 (only):

/* Safari 10.1 */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {

    .safari_only { 

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

    }
}}

Safari 10.0 (Non-iOS Devices):

/* Safari 10.0 (not 10.1) but not on iOS */

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

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

}

Safari 9 CSS Hacks:

A simple supports feature query hack for Safari 9.0 and up:

@supports (-webkit-hyphens:none)
{

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

}

A simple underscore hack for Safari 9.0 and up:

_:not(a,b), .safari_only {

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

}

Another one for Safari 9.0 and up:

/* Safari 9+ */

_:default:not(:root:root), .safari_only {

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

}

and another support features query too:

/* Safari 9+, < 13.1 */

@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {

    .safari_only { 

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

    }
}

One for Safari 9.0-10.0:

/* Safari 9.0-10.0 (not 10.1) */

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

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

}

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

/* Safari 9 */

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

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

}

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

/* Safari 9.0 (iOS Only) */

@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{

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

}

one for Safari 9.0+ but not iOS devices:

/* Safari 9+ (non-iOS) */

_:default:not(:root:root), .safari_only {

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

}

And one for Safari 9.0-10.0 but not iOS devices:

/* Safari 9.0-10.0 (not 10.1) (non-iOS) */

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

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

}

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; 

    );}
}

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:

/* Safari 6.1-10.0 (not 10.1) (non-iOS) */

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

    }
}}

To use them:

<div class="safari_only">This text will be Blue in Safari</div>

---

Usually [like in this question] the reason people ask about Safari hacks is mostly in reference to separating it from Google Chrome (again NOT iOS!) It may be important to post the alternative: how to target Chrome separately from Safari as well, so I am providing that for you here in case it is needed.

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.

My old media query combo I put on browserhacks still works just for Chrome 29+:

/* Chrome 29+ */

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

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

    }
}

An @supports feature query works well for Chrome 29+ as well... a modified version of the one we were using for Chrome 28+ below. Safari 9, the coming Firefox browsers, and the Microsoft Edge browser are not picked up with this one:

/* Chrome 29+ */

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

    }
}

Previously, Chrome 28 and newer were easy to target. This is one I sent to browserhacks after seeing it included within a block of other CSS code (not originally intended as a CSS hack) and realized what it does, so I extracted the relevant portion for our purposes:

[ NOTE: ] This older method below now pics up Safari 9 and the Microsoft Edge browser without the above update. 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 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */

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

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

    }
}

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:

/* Chrome 22-28 */

@media screen and(-webkit-min-device-pixel-ratio:0)
{
    .chrome_only {-chrome-:only(;

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

    );}
}

NOTE: If you are new, change class name but leave this the same-> {-chrome-:only(;

Like the Safari CSS formatting hacks above, these can be used as follows:

<div class="chrome_only">This text will be Blue in Chrome</div>

So you don't have to search for it in this post, here is my live test page again:

https://browserstrangeness.bitbucket.io/css_hacks.html#safari

[Or the Mirror]

https://browserstrangeness.github.io/css_hacks.html#safari

The test page has many others as well, specifically version-based to further help you differentiate between Chrome and Safari, and also many hacks for Firefox, Microsoft Edge, and Internet Explorer web browsers.

NOTE: If something doesn't work for you, check the test page first, but provide example code and WHICH hack you are attempting for anyone to assist you.

Answer 3

Why not invert-detect apple pay? that's what we do:

@supports (not (-apple-pay-button-style: inherit)) {
.hide-apple-wallet-on-non-safari {
    display: none;
  }
}

Answer 4

It works in from 10 to 16 IOS version:

@supports (-webkit-hyphens:none){ 
    ...
}

Answer 5

...practically only for iSF3.2+(mSF4+)

@media (-webkit-transition) {/*CSS*/}

Why? https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transition

---

...only for iSF10.1+(mSF10.12.1+)

@supports (-webkit-appearance:-apple-pay-button) {/*CSS*/}

Why? https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_css

---

...only for iSF9+

@supports (-webkit-touch-callout:none) {/*CSS*/}

Why? https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout

See https://stackoverflow.com/a/47818418/18938887

Answer 6

Wordpress solution:

<?php
add_filter( 'body_class', 'browser_body_class' );

function browser_body_class( $classes ) {
    global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

    if( $is_lynx ) $classes[]       = 'lynx';
    elseif( $is_gecko ) $classes[]  = 'gecko';
    elseif( $is_opera ) $classes[]  = 'opera';
    elseif( $is_NS4 ) $classes[]    = 'ns4';
    elseif( $is_safari ) $classes[] = 'safari';
    elseif( $is_chrome ) $classes[] = 'chrome';
    elseif( $is_IE ) $classes[]     = 'ie';
    else $classes[] = 'unknown';

    if( $is_iphone ) $classes[] = 'iphone';
    return $classes;
}
?>

Answer 7

https://www.bram.us/2021/06/23/css-at-supports-rules-to-target-only-firefox-safari-chromium/#safari

@supports (background: -webkit-named-image(i)) {
// 
}

h1::after {
  content: "No";
  margin-left: .3em;
  color: red;
}

@supports (background: -webkit-named-image(i)) {
  h1::after {
    content: "Yes";
    color: green;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <h1>Safari?</h1>

</body>
</html>

Answer 8

Works on iOS 16 and macOS Ventura:

@supports (font: -apple-system-body) and (-webkit-appearance: none) {
  .body {
    background-color: red;
  }
}

Answer 9

If you are looking Safari specific browser hack

I tried this, and it's working for me (only for Safari)

@supports (-webkit-hyphens:none){
        @content
}
    
@media not all and (min-resolution:.001dpcm)
    { @supports (-webkit-appearance:none) and (stroke-color:transparent) {
            @content
    }
}

Answer 10

You can use a media-query hack to select Safari 6.1-7.0 from other browsers.

@media \\0 screen {}

Disclaimer: This hack also targets old Chrome versions (before July 2013).

Answer 11

This hack 100% work only for safari 5.1-6.0. I've just tested it with success.

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
     ::i-block-chrome, .yourcssrule {
        your css property
    }
}

Answer 12

When using this safari-only filter I could target Safari (iOS and Mac), but exclude Chrome (and other browsers):

@supports (-webkit-backdrop-filter: blur(1px)) {
  .safari-only {
    background-color: rgb(76,80,84);
  }
}

Answer 13

Note: If iOS-only is sufficient (if you're willing to sacrifice Safari desktop), then this works:

    @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */ 
    }

Answer 14

At the end I use a little JavaScript to achieve it:

if (navigator.vendor.startsWith('Apple'))
    document.documentElement.classList.add('on-apple');

then in my CSS to target Apple browser engine the selector will be:

.on-apple .my-class{
    ...
}

Answer 15

I have tested and it worked for me

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
 ::i-block-chrome, .myClass {
    height: 1070px !important;
  }
}

Answer 16

This works:

@media not all and (min-resolution:.001dpcm) { 
  @media {
    /* your code for Safari Desktop & Mobile */
    body {
      background-color: red;
      color: blue;
    }
    /* end */
  }
}

Answer 17

hi i ve made this and it worked for me

@media(max-width: 1920px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 5.5% !important;
        }
    }
}

@media(max-width: 1680px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 15% !important;
        }

    }
}

@media(max-width: 1600px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 18% !important;
        }

    }
}


@media (max-width: 1440px) {
@media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 24.5% !important;
        }

    }

}


@media (max-width: 1024px) {
@media not all and (min-resolution:.001dpcm) {
    @media {
        .photo_row2 {
            margin-left: -11% !important;
        }

    }

}

Answer 18

For those who want to implement a hack for Safari 7.0 and below, but not 7.1 and above -- use:

.myclass { (;property: value;); }
.myclass { [;property: value;]; }

Answer 19

It working 100% in safari..i tried

@media screen and (-webkit-min-device-pixel-ratio:0) 
{
::i-block-chrome, Class Name {your styles}
}

Answer 20

I like to use the following method:

var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) { 
  $('head').append('<link rel="stylesheet" type="text/css" href="path/to/safari.css">') 
};

Answer 21

By the way, for any of you guys that just need to target Safari on mobiles, just add a media query to this hack:

@media screen and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding: 10px; //or any property you need
    }
}

And don't forget to add the .safari_only class to the element you want to target, example:

<div class='safari_only'> This div will have a padding:10px in a mobile with Safari  </div>

Answer 22

Replace your class in (.myClass)

/* Safari only */ .myClass:not(:root:root) { enter code here }

Answer 23

Step 1: use https://modernizr.com/

Step 2: use the html class .regions to select only Safari

a { color: blue; }
html.regions a { color: green; }

Modernizr will add html classes to the DOM based on what the current browser supports. Safari supports regions http://caniuse.com/#feat=css-regions whereas other browsers do not (yet anyway). This method is also very effective in selecting different versions of IE. May the force be with you.

Answer 24

Sarari Only

.yourClass:not(:root:root){ 
    /* ^_^ */ 
}

Answer 25

There is a way to filter Safari 5+ from Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .myClass {
     color:red;
    }

    /* Safari only override */
    ::i-block-chrome,.myClass {
     color:blue;
    }
}