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.
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.
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