is there a css hack for safari only NOT chrome?

Question

im trying to find a css hack for just safari NOT chrome, i know these are both webkit browsers but im having problems with div alignments in chrome and safari, each displays

Answer 1

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 2

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 3

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 4

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 5

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 6

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