CODEWITHSUNDEEP
cssbrowser
Guybrush Threepwood
Guybrush Threepwood

Reputation: 3493

How can I differentiate Safari and Chrome in CSS?

I know I can use conditional CSS to differentiate webkit browsers from others, but it is my understanding that both chrome and safari are webkit browsers. How would I differentiate between the two? There is a safari specific fix that makes chrome pixelate the Nivo Slider when it gets small, and I need to get this working for both browsers.

The Safari fix is:

img{
    -webkit-transform: translate3d(0, 0, 0);
}

My Conditional Code is:

[if Webkit] img {
     -webkit-transform: translate3d(0, 0, 0);
}

Thanks!

Upvotes: 0

Views: 1459

Answers (1)

S. Ahn
S. Ahn

Reputation: 663

If you are using JavaScript, this code fragment will distinguish Safari from Chrome:

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
    $('html').addClass('safari-only');
}

For a CSS-only hack, try this (don't know if it works):

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

For your specific case, with JavaScript:

JS:

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
    $('img').addClass('safari-only');
}

CSS:

img.safari-only {
     -webkit-transform: translate3d(0, 0, 0);
}

CSS only:

img:not(:root:root) {
     -webkit-transform: translate3d(0, 0, 0);
}

Upvotes: 1

Related Questions