My contemplations and diurnal novelties are publicized here


Hacks are dangerous, since they are based on non-standard exploits, you can’t predict how they are going to behave in future browsers. IE problems can be better solved with conditional stylesheet. IE provides comment tags, supported all the way up to the current IE 10 to target specific versions, as well as greater-than/less-than stuff for targeting multiple versions at once.

Why use conditional stylesheets?

  • You got problems, they need fixing
  • 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.

The Code

This would go in your <head> with all the other regular CSS <link> CSS files. The opening and closing tags should be familiar, that’s just regular HTML comments. Then between the brackets, “IF” and “IE” should be fairly obvious. The syntax to note is “!” stand for “not”, so !IE means “not IE”. gt means “greater than”, gte means “greater than or equal”, lt means “less than”, lte means “less than or equal.”

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]–>

Universal IE 6 CSS

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 serve 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.

<!–[if !IE 6]><!–>

<link rel=”stylesheet” type=”text/css” media=”screen, projection” href=”REGULAR-STYLESHEET.css” />

<!–<![endif]–>

<!–[if gte IE 7]>

<link rel=”stylesheet” type=”text/css” media=”screen, projection” href=”REGULAR-STYLESHEET.css” />

<![endif]–>

<!–[if lte IE 6]>

<link rel=”stylesheet” type=”text/css” media=”screen, projection” href=”http://universal-ie6-css.googlecode.com/files/ie6.0.3.css&#8221; />

<![endif]–>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: