Question

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.

Était-ce utile?

La solution

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.

Autres conseils

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top