CODEWITHSUNDEEP
cssfirefoxgoogle-chrome
Razor
Razor

Reputation: 17498

Chrome conditional comments

Is there such a thing as conditional comments for Chrome?

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

Thanks

Upvotes: 26

Views: 54481

Answers (5)

Lorenzo816
Lorenzo816

Reputation: 87

<!--[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/

Upvotes: 4

George Wiscombe
George Wiscombe

Reputation: 1422

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?

Upvotes: 55

dpq
dpq

Reputation: 9268

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

Upvotes: 5

p.g.l.hall
p.g.l.hall

Reputation: 1961

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.

Upvotes: 3

DmitryK
DmitryK

Reputation: 5582

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

Upvotes: 13

Related Questions