CSS hack: Difference between revisions

Revision as of 23:19, 13 July 2007

Revision as of 21:26, 31 July 2007

Line 6:

=== Conditional Comments ===

Conditional Comments are supported by Microsoft Internet Explorer (version 5 onwardsor greater[http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp]). They allow web developers to show or hide [[HTML]] code based on the version of the viewer's browser.

There are two types of conditional comments, downlevel revealed which is a proprietary Microsoft HTML tag and downlevel hidden which are ignored by non Microsoft browsers because they are treated as a standard comment.

Line 12:

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.

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

<pre>

<!--[if IE 7]>

Line 18:

<![endif]-->

</pre>

This tag will let IE 7 read the specified CSS file while IE 6 or less will ignore it. Browsers other then IE will also ignore it because it looks like a standard HTML comment. With different uses of this tag you can also single out IE 6, IE 5, or versions of IE that are greater or lesser then a specified version.

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

Below is an example of a "downlevel revealed" conditional comment:

<pre>

<![if !IE]>

Line 25 ⟶ 27:

<![endif]>

</pre>

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

Microsoft acknowledges this method is not standardized markup for comments[http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp], intending these tags to be overlooked by other browsers and expose the content in the middle. Some web developers use an alternative technique[http://www.456bereastreet.com/archive/200511/valid_downlevelrevealed_conditional_comments/] for downlevel-revealed conditional comments in order to only use standardize markup.

<pre>

Line 33 ⟶ 36:

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

</pre>

Adding the dashes before and after each if statement tag completes them as a valid HTML comment and leaves center code open to rendering on non-IE browsers.

While this method is also functional in current versions of Internet Explorer, there is no guarantee that future versions will continue to operate this way.

Note: Internet Explorer 4 and below do not support conditional comments.