Advanced Search

Conditional Style Sheets for IE

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. Target ALL VERSIONS of IE
  2.  
  3. <!--[if IE]>
  4. 	<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
  5. <![endif]-->
  6.  
  7. Target everything EXCEPT IE
  8.  
  9. <!--[if !IE]><!-->
  10. 	<link rel="stylesheet" type="text/css" href="not-ie.css" />
  11.  <!--<![endif]-->
  12.  
  13. Target IE 7 ONLY
  14.  
  15. <!--[if IE 7]>
  16. 	<link rel="stylesheet" type="text/css" href="ie7.css">
  17. <![endif]-->
  18.  
  19. Target IE 6 ONLY
  20.  
  21. <!--[if IE 6]>
  22. 	<link rel="stylesheet" type="text/css" href="ie6.css" />
  23. <![endif]-->
  24.  
  25. Target IE 5 ONLY
  26.  
  27. <!--[if IE 5]>
  28. 	<link rel="stylesheet" type="text/css" href="ie5.css" />
  29. <![endif]-->
  30.  
  31. Target IE 5.5 ONLY
  32.  
  33. <!--[if IE 5.5000]>
  34. <link rel="stylesheet" type="text/css" href="ie55.css" />
  35. <![endif]-->
  36.  
  37. Target IE 6 and LOWER
  38.  
  39. <!--[if lt IE 7]>
  40. 	<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
  41. <![endif]-->
  42.  
  43. <!--[if lte IE 6]>
  44. 	<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
  45. <![endif]-->
  46.  
  47. Target IE 7 and LOWER
  48.  
  49. <!--[if lt IE 8]>
  50. 	<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
  51. <![endif]-->
  52.  
  53. <!--[if lte IE 7]>
  54. 	<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
  55. <![endif]-->
  56.  
  57. Target IE 8 and LOWER
  58.  
  59. <!--[if lt IE 9]>
  60. 	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
  61. <![endif]-->
  62.  
  63. <!--[if lte IE 8]>
  64. 	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
  65. <![endif]-->
  66.  
  67. Target IE 6 and HIGHER
  68.  
  69. <!--[if gt IE 5.5]>
  70. 	<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
  71. <![endif]-->
  72.  
  73. <!--[if gte IE 6]>
  74. 	<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
  75. <![endif]-->
  76.  
  77. Target IE 7 and HIGHER
  78.  
  79. <!--[if gt IE 6]>
  80. 	<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
  81. <![endif]-->
  82.  
  83. <!--[if gte IE 7]>
  84. 	<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
  85. <![endif]-->
  86.  
  87. Target IE 8 and HIGHER
  88.  
  89. <!--[if gt IE 7]>
  90. 	<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
  91. <![endif]-->
  92.  
  93. <!--[if gte IE 8]>
  94. 	<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
  95. <![endif]-->
  96.  
  97. Universal IE 6 CSS
  98.  
  99. Dealing with IE 6 and below is always an extra-special challenge. These days people are dropping support for it right and left, including major businesses, major web apps, and even governments. There is a better solution than just letting the site go to hell, and that is to server IE 6 and below a special stripped-down stylesheet, and then serve IE 7 and above (and all other browsers) the regular CSS. This is been coined the universal IE 6 CSS.
  100.  
  101. <!--[if !IE 6]><!-->
  102.   <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
  103. <!--<![endif]-->
  104.  
  105. <!--[if gte IE 7]>
  106.   <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
  107. <![endif]-->
  108.  
  109. <!--[if lte IE 6]>
  110.   <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
  111. <![endif]-->

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.