If Not Internet Explorer Conditional HTML

Hero image for If Not Internet Explorer Conditional HTML. Image by Luke van Zyl.
Hero image for 'If Not Internet Explorer Conditional HTML.' Image by Luke van Zyl.

If you have been in frontend web development for any period of time you will no doubt be familiar with the method of feeding specific versions of the Internet via conditional comments. Up until the release of Internet Explorer 10, you could use these to target Internet Explorer, or more specifically by identifying versions or ranges of IE like so:

<!--[if IE 6]>  Content here will only be rendered by Internet Explorer 6<![endif]--><!--[if lt IE 9]>  Content here will be rendered by Internet Explorer 8 and all versions below.  Note: not IE 9<![endif]--><!--[if lte IE 9]>  Content here will be rendered by Internet Explorer 9 and all versions below.  Including IE 9<![endif]--><!--[if IE]>  Content here will be rendered by all versions of Internet Explorer up to (but not  including) IE10 where support for these conditional comments stopped<![endif]-->

This works because other browsers only infer that the block is enclosed within comments (<! and >) and so skips the content of the block altogether.

These have been used for years to enclose browserspecific stylesheets, scripts, and even unsupported browser messages. You can see the official Microsoft documentation here. Note that official support for this method of targeting Microsoft browsers stopped in 2016 with the release of Internet Explorer 10.


Targeting Not Ie Browsers

The flip side to this is that you can also target nonInternet Explorer browsers in a similar fashion:

<![if !IE]>  Internet Explorer will ignore this<![endif]><![if !(IE 8)]>  Only Internet Explorer 8 will ignore this<![endif]><!--[if !IE]-->  Internet Explorer will ignore this too<!--[endif]-->

The important thing to note here is that the markup is very slightly different: browsers other than Internet Explorer will always render whatever you place within these conditionals because they aren't actually comments as is the case with the first examples here.

Because these blocks aren't inside comment start and end tags (again: <! at the start, > at the end), all browsers except for Internet Explorer will display and process the contents. Internet Explorer will look at the vector to determine whether or not to render the contents.

This vague distinction between using comments and not using them has tripped up many new and frustrated developers over on Stack Overflow.

It is probably for the best that Microsoft did decide to discontinue


Categories:

  1. Cross‑Browser Compatibility
  2. Development
  3. Front‑End Development
  4. HTML
  5. Internet Explorer