- Published by
- Posted on
- Leave your thoughts
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.
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 –>
<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>
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.