CODEWITHSUNDEEP
cssgoogle-chromesafarimedia-queries
jennz0r
jennz0r

Reputation: 1583

Is it possible to target Chrome only, not all Webkit powered browsers?

Vaguely related to this question, but not quite the same. I'd like to target Chrome ONLY, without targeting Safari.

I used the following media query, but it targets both Chrome and Safari:

@media screen and (-webkit-min-device-pixel-ratio: 0) { 
    h1, h2 {
        font-weight: bold;
    }
}

Chrome does a great job at rendering the header elements in bold even though a bold version of the font I'm using doesn't exist. Safari... not so much. Hence the super specific targeting. For reference, the font is Cody Star.

Upvotes: 0

Views: 893

Answers (2)

Hbirjand
Hbirjand

Reputation: 1965

Safari,Chrome,Opera all of them are Web-kit browsers, so it's very difficult to find a CSS or media query hack to target this browsers specifically,

but here is a JavaScript code that will target the Google Chrome, not all the versions of Google Chrome,But Chrome 14 and later.

var isChrome = !!window.chrome && !!window.chrome.webstore;

if you want to know more information,please refer to my answer,for this question

Upvotes: 1

Dov D.
Dov D.

Reputation: 530

There are browser-specific CSS hacks that might work for this problem now, but they certainly aren't supported.

IMHO, your best bet is to add a class to the body tag using JavaScript that reads your navigator.userAgent and use that class (body.chrome for example) to target Chrome.

Upvotes: 1

Related Questions