Frage

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.

War es hilfreich?

Lösung

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.

Andere Tipps

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

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top