Microsoft Drop Conditional Comments in IE10

549-ie10-conditional-comments

Microsoft added many features to Internet Explorer over the years. Several revolutionized the web forever (XMLHttpRequest, the DOM, XML tools, font embedding, browser add-ons). Some never caught on. Some were truly awful.

The team intends to remove several of the less-successful legacy features in IE10 (perhaps they read #7 in 10 Ways Microsoft Could Make Us Love IE Again?) I suspect you’ve never coded XML Data Islands and Element Behaviors, but you’ve almost certainly used Conditional Comments. They’re about to disappear from IE forever.

Conditional Comments 101

Ensuring you web site or application works in all browsers is tough. It’s made particularly difficult when you have to support older editions of Internet Explorer. IE6 was released in 2001, IE7 in 2006, and IE8 appeared in 2009. Whatever your opinion of Microsoft, it’s unreasonable to expect a 10 year old browser to render the same as Firefox 5 or Chrome 12.

Web developers are particularly scathing about IE6. Many months are spent building fantastic web sites and applications only to find they break in IE6 at the eleventh hour. Fortunately:

  • IE6 bugs are well-documented and it’s possible to overcome the majority of issues — especially if you test early and often.
  • Microsoft provide Conditional Comments so developers can add custom CSS and script fixes which target a specific version of IE.

Examine the source of almost any HTML5 page and you’ll find this code in the head:


<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

It loads a shim in IE8 and below which allows the developer to style new HTML5 elements such as header, article, and footer. It’s not required in IE9 and other browsers with native HTML5 support — they ignore the script.

Conditional Comments are incredibly useful but, personally, I always felt a little uncomfortable using them:

  1. They smell a little like browser sniffing — which stinks.
  2. They’re rarely necessary. The majority of IE6 problems can be solved with a display:inline; here or a position:relative; there. While competing browsers don’t require those properties, they don’t have a negative impact other than a few bytes of extra bandwidth. I prefer my CSS properties in one place rather than distributed between two or more files.
  3. Conditional Comments are abused. I’ve had the misfortune to work on systems where developers created three or four separate stylesheets which targeted individual browsers. Simple property updates required changes to every file.

Why Remove Conditional Comments?

IE8 is normally well-behaved and you’ll only require the HTML5 shim (see above). With a few CSS3 exceptions, IE9 renders as well as any other browser. Hopefully, IE10 will catch-up — or even overtake — Firefox, Chrome, Opera and Safari.

Conditional Comments are not required. There’s no need for “[if IE 10]“ because pages will render (mostly) the same in all modern browsers.

That said, it’s not the end of feature detection and progressive enhancement. Not every browser supports CSS3 transformations, web sockets, geo-location and client-side storage. Even with support, the user can often disable or refuse permission for an operation.

In addition, Conditional Comments will not disappear from IE6, 7, 8 and 9. You can still target those browsers should the need arise but it will become less necessary over time.

I applaud Microsoft’s decision. It’s a bold move since they could have easy kept Conditional Comments and I suspect its removal will horrify some developers. However, the company is adhering to its “same markup” philosophy and ensuring HTML, CSS and JavaScript just work regardless of the browser or version.

It’s the right thing to do. Let’s hope the demise of ActiveX, Compatibility View and the old IE7 toolbars won’t be too far behind!

This entry was posted in Client Side Coding, conditional comments, CSS, discussion, HTML5, ie, ie10, ie6, ie7, ie8, ie9, News & Trends and tagged , , , , , , , , , . Bookmark the permalink.