When writing pages for the Web, there are times when something displays differently in Internet Explorer than in Firefox or other Web browsers. When this happens, you have three choices: leave the differences, change the code so that it displays the same in all browsers, or use different code for different browsers. If you need to use different code for different browsers, there are two options: conditional comments or CSS hacks. Conditional comments are preferred since they are HTML valid and can be placed in any location in the document where comments can be placed.
Instructions
Conditional Comments
-
1
Create a comment with a conditional statement and the code to be displayed if the condition is met. Internet Explorer can read these conditional comments, while other browsers ignore them as comments:
<!--[if IE ]>
This will be displayed just for Internet Explorer
<![endif]-->
If you want to target a specific version of IE, give the version number, after IE:
<!--[if IE 7 ]>
This is display in Internet Explorer 7
<![endif]--> -
2
Add operators as needed. These operators allow for more precise targeting. The operator options are:
lt: Less than
let: Less than or equal to
gt: Greater than
gte: Greater than or equal to
!: Not
&: And
|: Or
(): Used to surround a subexpression
true: True
false: False
Some examples are:
<!--[if lt IE 7 ]>
This will be displayed in browsers less than Internet Explorer 7.
<![endif]-->
<!--[if (IE 6)|(IE 8) ]>
This will be displayed in Internet Explorer 6 and Internet Explorer 8.
<![endif]-->
<!--[if !IE 7 ]>
This will be displayed in Internet Explorer, except Internet Explorer 7.
<![endif]--> -
3
Target a Cascading Style Sheet (CSS). You cannot use comments within a style sheet, so the most common way to use style sheets' conditional comments is to have a separate style sheet for IE (or specific versions of IE), and target them with conditional comments. In the following example, main.css will be displayed in all browsers, anything in ie.css will be used in all ie versions and ie7.css will be used just for IE 7.
<link href="main.css" rel="stylesheet" type="text/css">
<!--[if IE ]>
<link href="ie.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css">
<![endif]--> -
4
Use to target HTML. While conditional comments are mostly used for CSS, they can also be used to display specific HTML for different versions of IE. Use operators to point to which version of IE you need and add the HTML you want within the comment.
<!--[if IE 8]>
<p>This will only be displayed in Internet Explorer 8</p>
<![endif]-->
<!--[if lte IE 7]>
<p>This will only be displayed in Internet Explorer 7 or earlier</p>
<![endif]--> -
5
Target JavaScript. Conditional comments can also be used to target JavaScript or other client-side code. Be sure that the placement of the comment is valid.
-
6
Use CSS hacks only if you have to. While conditional comments are best practice, some will use CSS hacks to target Internet Explorer. Before deciding to use them, it is best to know why they are not best practice.
CSS hacks are often not valid markup, causing the code to not pass validation. CSS hacks are also not future proof. When IE 8 was released, a lot of people had to go back to their code and make changes so that the pages were not broken in IE 8. Using code that validates will help keep this from happening.
If a CSS hack is still needed, there are various hacks that work in different versions:
color: red; /*will display in all browsers that don't get overridden below*/
color: orange\9; /*will display in IE 8 or below*/
*color: yellow; /*will display in IE 7 or below*/
*+color:green; /*will display only in IE 7*/
_color:blue; /*will display in IE6 or below*/
color: purple\0/; /*will be displayed in IE 8 only. Should be the last item in list*/ Tips & Warnings
Tips & Warnings
- Avoid CSS Hacks whenever possible
No comments:
Post a Comment