How to Target Chrome Only, Not All Webkit Powered Browsers

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

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.

Can you target Google Chrome?

@media screen and (-webkit-min-device-pixel-ratio:0) {

    /*Chrome CSS here*/

    #cartUpdate {
        position:absolute;
        width:160px;
        height:30px;
        left:660px;
        bottom:40px;
    }
}

Fixed the problem :)

UPDATE

This resource works better: CSS browser/OS selectors with JS.

How can I achieve a consistent layout in all browsers?

I find the best policy to avoid pain is to follow these rules:

1. Build in a more-compliant and developer-friendly browser like firefox first, test thoroughly in IE (and safari/chrome(webkit) and opera) periodically.
2. Use a strict doctype- you don't necessarily need perfect markup, but it should be very good — good enough to avoid browser quirks modes, since quirks are by definition not standard
3. Use a reset style sheet. Note that depending on the sheet's contents this item may be incompatible with the goal of #2.
4. Use a javascript framework like jQuery or Prototype - they can hide some javascript and DOM incompatibilities.
5. Use good semantic layout- it's more likely to degrade nicely for a mis-behaving browser
6. Accept that it won't be perfect and don't sweat the really small variances

Follow those rules and there aren't as many problems in the first place.

For a TODO reference, see this question:

https://stackoverflow.com/questions/72394/what-should-a-developer-know-before-building-a-public-web-site

Chrome conditional comments

You can target WebKit based browsers using this in your CSS

@media screen and (-webkit-min-device-pixel-ratio:0) { 

Body {}

}

Perhaps this will help?

How do I add a css line ONLY for Safari

This is not possible since you would be applying the same property to Chrome as well. As Chrome, and Safari both use the -webkit- prefix.

But you could do this in PHP.

<?php
    $browser = get_browser();
    if(strtolower($browser->browser) == 'safari') {
        echo '<link href="safari.css" rel="stylesheet" type="text/css" />';
    } 
?>

Replace safari.css with your own stylesheet. Credit to @theorise

---

Related Topics