How exactly do they work? What I'm getting at is all the time when I'm looking at source code on the internet, they're used to include external style sheets if the browser being used is some version of Internet Explorer. What I don't get is how that would help, because the default style sheets have already been written into the HTML. Wouldn't the different style sheets clash with each other
Yes they would. I haven't see the pages you're talking about, but my guess is they're using one as a standard CSS base and then loading tweaks and fixes to replace non-working styles for certain browsers.
I think that a simple example would be the best way to explain how a conditional comment works.
In the example below, you will see that the div id="foo" has its color set to firstly to green and secondly to red.
The methodology of CSS means that second rule will overide the first and set the color to red.
This same principle applies to the conditional comment.
IE reads the color as blue and this overides the red.
Of course, for the conditional comment to be effective it must follow rather than precede the original stylesheet.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#foo {
color:green;
color:red;
}
</style>
<!--[if IE]>
<style type="text/css">
#foo {
color:blue;
}
</style>
<![endif]-->
</head>
<body>
<div id="foo">
This text will colored red unless your browser is IE.
If that is the case then it will be blue.
</div>
</body>
</html>
Bookmarks