Friday, April 12, 2013

List of Internet Explorer (9 and below) Conditional HTML Comments

Internet Explorer 7 Logo
Below is the list of the common (HTML comments) syntax for Internet Explorer browser. It works like the IF-ELSE of IE, only for version 9 and below. The new IE 10+ ignores these (IE 10 and above have implemented most of the latest dynamic web styling technology)
<!--[if IE]>
This is the notification for all IE users
<![endif]-->

<!--[if IE 6]>
This is the notification for IE 6 users
<![endif]-->

<!--[if IE 7]>
This is the notification for IE 7 users
<![endif]-->

<!--[if IE 8]>
This is the notification for IE 8 users
<![endif]-->

<!--[if IE 9]>
This is the notification for IE 9 users
<![endif]-->

<!--[if gte IE 8]>
This is the notification for users using IE 8 or higher
<![endif]-->

<!--[if lt IE 9]>
This is the notification for users using lower than IE 9
<![endif]-->

<!--[if lte IE 7]>
This is the notification for users using lower than or equal to IE 6
<![endif]-->

<!--[if gt IE 6]>
This is the notification for users using greater than IE 6
<![endif]-->

<!--[if !IE]> -->
This is the notification for non IE users
<!-- <![endif]-->
This is the notification result, according to the browser you're using right now :
This is the notification for non IE users

Abbreviations
lt : less than
gt : greater than
lte : less than or equal to
gte : greater than or equal to
You can use those "if"s to wrap the internal <style> or external CSS link.
So, try it out. BTW, you don't have to use all the codes there, just pick one or two that suits your design need.

To make the notification popped out, you can create a box with CSS (limit it to CSS level 2) to wrap the text, then place it on the top section of your blog. For instance :
<div style="background:red; width:300px; color:yellow; font-weight:bold; padding:10px; margin:auto; text-align:center;">
<!--[if !IE]> -->
  This is the notification for non IE users
<!-- <![endif]-->

<!--[if IE]>
  This is the notification for all IE users
<![endif]-->
</div>
Then, change the sentence inside that conditional IE "if" to your own words, or put a picture over it, or even create another CSS styling. The element wrapped within the IE HTML comment will be shown/hide depends on which comment you use. For the example above, the notification word for IE users will be shown to IE users, and not to non-IE users, back and forth. You can also wrap your entire HTML <body> section with it. BUT, not recommended. I suggest to use it for wrapping particular-specialized styling and script element, like example below.


Using it for styling and script, external and internal
You can use it to control the appearance of certain CSS or the execution of a particular script, such as :
<!--[if IE]>
<!--external stylesheet-->
<link href='your-external-CSS-for-IE9-' rel='stylesheet' />

<style>
  /*--your CSS for IE9- users--*/
</style>

<!--external JavaScript-->
<script src='your-external-script-for-IE9-' />

<script>
  // your JavaScript
</script>
<![endif]-->


That's about it. I hope this could be useful of some sort.

Further reading resources : Quirksmode and CSS-Tricks

No comments:

Post a Comment

Tell me what you think...