26

Is there such a thing as conditional comments for Chrome?

I have a page that renders differently in Chrome when compared to Firefox.

Thanks

Razor
  • 17,271
  • 25
  • 91
  • 138

5 Answers5

55

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?

George Wiscombe
  • 1,422
  • 1
  • 13
  • 13
  • Non-webkit browsers don't have a `-webkit-min-device-pixel-ratio` (of zero or otherwise), and so fail the second part of the conditional. – JohnK Mar 23 '13 at 19:18
  • This worked for me! however i still have a question, excuse me if this may sound stupid question for some experts but is there any risk that this would be taken under consideration by other browsers after they got updates? ex firefox ? thank you – Mbarry Apr 14 '13 at 12:58
  • +1 from me. @Mbarry: firefox will never adopt a css property with "webkit" in it. these css vendor prefixes are *at the moment* quite clearly set, the future is certainly open and some would argued years ago to abandon them, changing to "beta" prefixes fo instance. Anyway for now they are here. – citykid Jun 04 '13 at 09:56
13
<!--[if IE 8]><div id="bodyContainer" class="IE8"><![endif]-->
<!--[if !IE]>--><div id="bodyContainer" class="W3C"><!--<![endif]-->
<script type="text/javascript"> 
    if (navigator.userAgent.toLowerCase().match('chrome') && document.getElementById('bodyContainer'))
        document.getElementById('bodyContainer').className = document.getElementById('bodyContainer').className + " chrome";
</script>

Then you use CSS to tweak your styles specifically for Chrome.

DmitryK
  • 5,542
  • 1
  • 22
  • 32
5

Both HTML conditional comments and Javascript conditional compilation directives are only supported by Internet Explorer 4-8 to the best of my knowledge.

dpq
  • 9,028
  • 10
  • 49
  • 69
4
<!--[if !IE]>-->

This isn't just a Chrome conditional comment - this hits all browser that aren't IE... firefox, safari, etc. If using PHP - try this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Browsser Detection</title>

<link rel="stylesheet" href="Main.css" type="text/css">

<?php 

$msie        = strpos($_SERVER["HTTP_USER_AGENT"], 'MSIE') ? true : false; 
$firefox    = strpos($_SERVER["HTTP_USER_AGENT"], 'Firefox') ? true : false;
$safari        = strpos($_SERVER["HTTP_USER_AGENT"], 'Safari') ? true : false;
$chrome        = strpos($_SERVER["HTTP_USER_AGENT"], 'Chrome') ? true : false;

if ($msie) {
echo '
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css" type="text/css">
<![endif]-->
';
}
if ($safari) {
echo '<link rel="stylesheet" href="safari.css" type="text/css">';
}

?>

</head>
<body>

    <br>
    <?php
    if ($firefox) { //Firefox?
    echo 'you are using Firefox!';
    }

    if ($safari || $chrome) { // Safari?
    echo 'you are using a webkit powered browser';
    }

    if (!$msie) { // Not IE?
    echo '<br>you are not using Internet Explorer<br>';
    }
    if ($msie) { // IE?
    echo '<br>you are using Internet Explorer<br>';
    }
    ?>

    <br>

</body>
</html>

Credit to John for posting: http://www.killersites.com/forums/topic/2731/firefox-google-chrome-browser-detecion-using-conditional-comments-hack/

recursive
  • 83,943
  • 34
  • 151
  • 241
Lorenzo816
  • 87
  • 7
3

The conditional operation will work because other browsers will parse the If IE8 block as an HTML comment, but not the !IE block because the inside of it is wrapped in --> and

Therefore, for all non-IE browsers the body class will indeed equal W3C.

This is all by the way, though, because the IE comment block is not needed to identify the browser specifically as chrome - the JS block on its own will do that, provided the user has JS turned on of course.

p.g.l.hall
  • 1,961
  • 2
  • 15
  • 26