CSS hack: Difference between revisions

Revision as of 18:21, 24 June 2007

Revision as of 18:34, 24 June 2007

Line 7:

Conditional comments can be used to hide certain styles from a specific browser, or even to supply a tailored style sheets for individual browser versions.

This is an example of "downlevel hidden" conditional comment: (that is, the content is only visible to IE)

<pre>

<!--[if IE 7]>

<style type="text/css">

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

p {text-decoration:underline; /* Underlines paragraph text in Internet Explorer 7, but no other browser */}

</style>

<![endif]-->

</pre>

This is an example of "downlevel revealed" conditional comment:, which is recommended by microsoft for when the content should be exposed to non-IE browsers.

<pre>

<![if !IE]>

<stylelink rel="stylesheet" type="text/css" href="non-ie.css">

p {text-decoration:line-through; /* line-through paragraph text in browsers other than Internet Explorer */}

</style>

<![endif]>

</pre>

However, this is invalid HTML, so an alternate form has been recommended by others. [http://www.456bereastreet.com/archive/200511/valid_downlevelrevealed_conditional_comments/]

<pre>

<!--[if !IE]>-->

<link rel="stylesheet" type="text/css" href="non-ie.css">

<!--<![endif]-->

</pre>

Note that IE 4 does not support conditional comments at all.

=== "Hacks" ===