Conditional HTML and CSS for IE

As budding web site builders, we learn how to manipulate our webpages with a few taps of our keys. With a few fairly simple commands, we can transform our webpages into sophisticated marvels. And after we finish creating our webpages, millions have the capability of enjoying our webpages on Safari, Firefox, Internet Explorer and a few other browsers. As web designers, we are to some extent aware that not all browsers are equal. What looks brilliant on Firefox may look a bit wonky on Internet Explorer.

Due to that fact, all web designers are encouraged to check how their webpages will look on as many browsers as possible. The differences that appear between browsers must be carefully planned and implemented. Conditional HTML and CSS is one type of difference that you can plan into your website design to implement two different website designs across browsers.

What is Conditional HTML and CSS?

Conditional HTML and CSS is a code that is only recognized by Internet Explorer. Before you start trying to write conditional HTML, you will need to check that you did not download Internet Explorer 10. IE 10, much like all the other browsers, does not recognize conditional code. If the vast majority of browsers do not recognize HTML, why learn conditional code? Conditional code allows you the pleasure of inserting text that will only be seen on IE 9 and below. It also allows you the pleasure of setting up two different design schematics for your webpages. Below I have included what my webpage with conditional HTML looks like on IE 9 and Firefox.


Non-Internet Explorer

IE 9:

Internet Explorer Conditional

CSS IE Change

Viewing conditional code with Internet Explorer

If you are going to try conditional HTML and CSS, you will need to be able to view what changes you are making to your webpages with IE 9 and below. This means that you will need to either get rid of IE 10 or download an app that will allow you to view your webpages with previous versions of IE.

  • To return to IE 9 by removing IE 10.
  • Download IE-Tester. This will allow you to view your webpages on all the previous versions of IE without returning to IE 9 on your own computer.

Insert Text with HTML with Conditional HTML

When you have decided to include conditional HTML into your webpage, you type <!—[if IE]> to initiate the conditional code. Next you type what you want to include. This can be anything from a word to a chart. End the conditional code by typing <![endif]–>. (Pic: Internet Explorer Conditional.)

Alter Your CSS Style Sheet with Conditional CSS

Your conditional CSS style sheet should be included after your regular CSS style sheet. Remember to end your normal style sheet with </style> before beginning your new style sheet.

  • You begin by typing
  • <!–IE only style overrides default –>

<!–[if IE]>

<style type = “text/css”>

  • Treat it like you would the traditional style sheet. If you do not know how to include a style sheet into your document, you should check out some other free articles on the web or sign up for one of the HTML classes available online.
  • End the conditional CSS style sheet with </style>


CSS HTML Internet Explorer

Before you post your new webpage on the web, you need to check how your webpage will appear on all browsers. And don’t forget to gaze in wonder at your IE 9 prepped webpage. Internet Explorer is moving away from conditional commands, but that doesn’t mean that you can’t enjoy it while you can.

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts

Leave a Reply