Skip to main content

How to Conditionally Add Style Sheets for IE

Why use conditional stylesheets?

  • You got problems, they need fixin'
  • Keeps your code hack-free and valid
  • Keeps your main stylesheet clean
  • Perfectly acceptable technique, sanctioned by Microsoft
And remember, these conditional tags don't have to be used only for CSS. You could load JavaScript, or even use them down in the content of your site to display special IE-specific messages.

Target ALL VERSIONS of IE

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Target everything EXCEPT IE

<!--[if !IE]><!-->
        <link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

Target IE 7 ONLY

<!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Target IE 6 ONLY

<!--[if IE 6]>
        <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Target IE 5 ONLY

<!--[if IE 5]>
        <link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Target IE 5.5 ONLY

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

Target IE 6 and LOWER

<!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
        <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

Target IE 7 and LOWER

<!--[if lt IE 8]>
        <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Target IE 8 and LOWER

<!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
        <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Target IE 6 and HIGHER

<!--[if gt IE 5.5]>
        <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

<!--[if gte IE 6]>
        <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

Target IE 7 and HIGHER

<!--[if gt IE 6]>
        <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

<!--[if gte IE 7]>
        <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

Target IE 8 and HIGHER

<!--[if gt IE 7]>
        <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
        <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

Comments

Popular posts from this blog

HTML5 Attributes

Standard Attributes: The attributes listed below are supported by almost all the HTML 5 tags: Attribute Options Function accesskey User Defined Specifies a keyboard shortcut to access an element. align right, left, center Horizontally aligns tags background URL Places an background image behind an element bgcolor numeric, hexidecimal, RGB values Places a background color behind an element class User Defined Classifies an element for use with Cascading Style Sheets. contenteditable true, false Specifies if the user can edit the element's content or not. contextmenu Menu id Specifies the context menu for an element. data-XXXX User Defined Custom attributes. Authors of a HTML document can define their own attributes. Must start with "data-". draggable true,false, auto Specifies whether or not a user is allowed to drag an element. height Numeric Value Specifies the height of tables, images, or table cells. hidden hidden Specifies whether element should be visi...

What is SASS?

Examples: Mixins CSS #data { float: left; margin-left: 10px; } #data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; } Examples: Selector Inheritance SCSS .error { border: 1px #f00; background: #fdd; } .error.intrusion { font-size: 1.3em; font-weight: bold; } .badError { @extend .error; border-width: 3px; } SASS .error border: 1px #f00 background: #fdd .error.intrusion font-size: 1.3em font-weight: bold .badError @extend .error border-width: 3px Examples: Selector Inheritance CSS .error, .badError { border: 1px #f00; background: #fdd; } .error.intrusion, .badError.intrusion { font-size: 1.3em; font-weight: bold; } .badError { border-width: 3px; } Examples: Conditional Statements SASS =views-row($margin: $baseline, $divide: false, $border_color: #CCC) +pie-clearfix @if $divide border-bottom: 1px solid $border_color margin-bottom: $margin * 0.5 @else margin-bottom: $margin * 0.5...