Day #11 Internet Explorer Hacks

Final Result Use this for reference!

Conditional Comments

Instructions: Ugh, yes, Internet Explorer is still a thing. Luckily, with CSS, you can bend it to your will, or just straight up give it the Vulcan Death Grip.

Create some IE Conditional Comments and view the result in Net Renderer if you're viewing this from a live server. Otherwise, just take my word for it ;)

These are HTML comments, as you might have recognized. What you would do is place the conditional comment in the head of your HTML file, below your stylesheet reference.

Within the comment, you could add anything from HTML to inline CSS, or a link to an external stylesheet specifically for Internet Explorer! Only IE will recognize this comment, which means you can do anything to manipulate the CSS specfically for IE!

For example:
<head>
  <link rel="stylesheet" href="app.css">
  <!--[if IE]> <link rel="stylesheet" href="ie.css"> <![endif]-->
</head>

Here are the different types of conditional commenst you can use.

<!--[if IE 6]> Internet Explorer 6 <![endif]-->
<!--[if IE 7]> Internet Explorer 7 <![endif]-->
<!--[if IE 8]> Internet Explorer 8 <![endif]-->
<!--[if IE 9]> Internet Explorer 9 <![endif]-->


To style for a specific version of IE or lower, use the following.

<!--[if lte IE 6]> Internet Explorer 6 or less <![endif]-->
<!--[if lte IE 7]> Internet Explorer 7 or less <![endif]-->
<!--[if lte IE 8]> Internet Explorer 8 or less <![endif]-->
<!--[if lte IE 9]> Internet Explorer 9 or less <![endif]-->


To style for a specific version of IE or higher, use the following.

<!--[if gte IE 6]> Internet Explorer 6 or greater <![endif]-->
<!--[if gte IE 7]> Internet Explorer 7 or greater <![endif]-->
<!--[if gte IE 8]> Internet Explorer 8 or greater <![endif]-->
<!--[if gte IE 9]> Internet Explorer 9 or greater <![endif]-->


To style for all applicable versions of IE (6 - 9), use the following.

<!--[if IE]> Internet Explorer 6 - 9 <![endif]-->

Information About this lesson

What are we making?

Fun & fancy ways to manipulate Internet Explorer to our will!

Where can I use it?

In your websites, client projects and applications as a way to get around those pesky Internet Explorer bugs!

How compatible are these styles with major browsers?

Check the CSS3 styles from your stylesheet on this website. It allows you to see the compatibility of every CSS style with major browser.