Need CSS only for chrome

Question

Can you please explain me How can I target css only for Google Chrome?

Thanks Rakesh Prajapati

Answer 1

CSS Solution

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    div{top:0;} 
   }

JavaScript Solution

if (navigator.appVersion.indexOf("Chrome/") != -1) {
    // modify anything you want 
}

Possible duplicate with: How to apply specific CSS rules to Chrome only?

Answer 2

Please note that, Google Chrome, Safari, Opera all of them are webkit browsers,so it you want to target this browser specifically that would be a real challenge, and as I know there is no media queries hacks of css selector hack available for this, But this piece of Javascript code is really effective,

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

And it will work on Chrome browser 14 and later, if you want to know more about the Chrome browser hacks,please refer to my answer here.

Answer 3

to be honest i dont know if you can specifically target a css for a broswer but Ill toss a quick idea. You could detect the browser with Jquery and set the css programmatically. Jquery has that ability. for example.

$("#infot").css("top",$("#header").height()+ offseth + "px");

since jquery can detect browsers (webkit/firefox and ie) and chrome is a webkit browser you could do the following

if($.browser.webkit){
                adjustSizes();
            }