By Craig Buckler

Microsoft Drop Conditional Comments in IE10

By Craig Buckler

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=""></script>

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!

  • CC lived their life and it’s good they’re on the way out.

    On a side note, I’ve actually used XML Data Islands quite a lot and I wish they were standard. Well done IE !

    I also like SQLite as a UA embedded SQL database engine, for the same reasons. Well done Op !

    I wouldn’t mind to have them both as standards.

  • This is awful – you can’t really predict all the bugs we’re going to see – variable opacities with rounded corners, dropshadows and gradients all on a jQuery carousel, hosting a flash movie player?

    If anything, the other browser manufacturers should be supporting CCs, because nothing is bug free.

    CCs are unobtrusive and keep things well-organised.

    I only really use CCs for IE6 issues though, very rarely will I create one for IE7 and above.

    Also, let’s say we get stuck with IE10 for a while because microsoft can’t launch another OS in a timely matter – FF, Chrome, Opera and Safari will all race ahead and we may be stuck with supporting a piece of junk (again), CCs must stay

    Either that or MS shouldn’t be allowed to have IE pre-installed on the OS

    • “Either that or MS shouldn’t be allowed to have IE pre-installed on the OS”

      And who exactly should enforce that? As a software developer, do you really want some arbitrary faceless bureaucrat telling you what features can and cannot be included in your software design?

    • “You can’t really predict all the bugs we’re going to see – variable opacities with rounded corners, dropshadows and gradients”

      But how many of those make a site unusable?

      “…hosting a flash movie player”.

      You use feature detection. That’ll never disappear – especially while Apple devices remain popular.

      • then we can look to VML scripts such as CSS-PIE that break page zooming functionality in IE7, rendering some sites inaccessible as an example of a total break with little alternative

        just left wondering what will happen when microsoft bork a feature in a future release, how we’ll be able to get out of jail without UA-sniffing or vague feature detection

        • Experimental CSS3 properties normally have a vendor prefix: Microsoft use -ms. If a feature doesn’t work as expected in a specific browser, you can remove its property.

          Solutions such as CSS-PIE have their place, but I prefer progressive enhancement. If a browser doesn’t support a CSS3 property, simply make sure it works without it.

  • wow, they needed like 5 years to get to their senses. Good plan though.

  • Wow, this is a biggie!

    Whilst I agree that it’s great to have nice tidy CSS and not lots of ifs and buts, I would like to see the browser in action before I rule out the need to target it in some way

    I was looking forward to developing sites when IE9 came out, but just after it did a stumbled across some typical Microsoft oddness with it!!

    • exactly my point.

      if the browser isn’t going to update itself and instead roll out with each version of windows then CCs should remain…

      maybe this is the plan for internet explorer? either that or a move to leave IE persistent for a few more years in corporate environments

  • Do you need CCs for other browsers?
    Were you concerned that your Firefox 3 code would fail in Firefox 5 or vice versa?

    IE is moving toward a good level of W3C standards support. Those standards evolve so you’ll always require feature detection. CCs were a temporary fix during the dark days of IE development.

  • No browser supports all CSS3 features. Every browser has quirks and oddities but the situation is improving rapidly.

    Besides, the majority of sites won’t fail because the user cannot see a gradient or text-shadow.

    • Anonymous

      Yea, they won’t see a CSS gradient or text shadow because a majority of users are on IE, version 9 or not.

      Try pushing the boundaries of CSS3 more when you develop. You’ll start to feel the same way as we do when it comes to IE9.

      • Why is it a problem? So what if IE users don’t get text shadows or rounded corners – does it cause your website to fail?

        Pixel perfection across multiple browsers is a pipe dream. The concept of progressive enhancement has been around for more than a decade.

        • Anonymous

          Radial & linear gradients go a long way for high traffic sites (yea I know I’m harping on this :)). While it would be great to use these features in ie9 we still have to worry about sprites and cutting images. Why can’t MS release a quick patch (similar to ffx 3.5 -> 3.6) to support these? Instead we have to wait another year for this (and all the other CSS3 items) to work in IE. And of course that version won’t be available in either XP or Vista.

          I agree no text-shadows won’t make your website “fail” but it does help tons with readability with text on a light-colored background.

          We are experimenting with Chrome Frame and their CFInstall script with the “user=true” param. If it goes smoothly supporting LTE ie9 won’t be as much of an issue.

          • Why not use a solid-color background in IE? It’s only a problem if you or your clients are demanding the same look on all browsers. It’s futile.

          • Anonymous

            For full body radial gradients the savings are pretty substantial. Can’t do solid background colors on those unfortunately.

            The underlying point is we shouldn’t be making excuses for Microsoft (which we’ve been doing for 10 years), we should be demanding better browsers. They are getting better, just not nearly as fast as the competition.

            IE10 looks promising, again only if you have Windows 7. IE9 was a step in the right direction, but still a perfect candidate for Google Chrome frame. :p

          • You mean like every single client (private sector and government) I’ve ever had in my 16 ears of web development? There are two types of clients: Those that state that the site needs to look the same across all browsers, and those that assume that requirement is a given.

          • No font face looks the same in all browsers. So, for one, theoretically, I have a lot of explaining to do to my client even before I start.

            Secondly, just in case the client decided to go the @font-face route, I’m curious how do I explain to the client the missing features in some cases, and what is your solution when he assumes this to be a requirement, no matter what?

            Pixel perfect cross browser it’s a myth. Unless the design is really poor, the font stacks are really basic etcetera. This would not sell nor land me more jobs, that’s for certain.

  • That’s my main concern too. With luck, IE10 will be released within a year of IE9 but even that’s too slow.

    • Anonymous

      no its not too slow. That is just about right. Firefox and Chrome will never get corporate adoption at a new version every 3-5 months. There is just no way to certify a hugely dynamic browser for corporate apps yet. Maybe in another 3 years when XP is as good as dead can be we can accelerate development because the standards should be pretty uniform, but not today.

  • I’ve said many times that Microsoft should do something for XP users – even if that means recommending another browser. Unfortunately, that’s not within their commercial interest and we have a duty to support what people are using.

    However, I disagree that CCs are necessary. With the exception of the HTML5 shim, I’ve never used them. That includes complex client-side apps which worked in IE5.5 and IE6.

    Pixel and feature parity across all browsers is an unachievable goal, but it’s still possible to support legacy browsers. For example, if speed becomes an issue, fallback to an alternative technology. You simply cannot depend on canvas in IE8 and below so use a static image, Flash, Sliverlight, etc. Those users may have a degraded experience but the app will still work.

    If you’re spending 50% of your time fixing IE6-8 bugs, you either have unrealistic expectations or need more IE coding experience.

    • I’ve used them also when using font-face, because the it’s an easy way to serve ‘web safe’ fonts to older browsers with bad font rendering while giving newer browsers a better experience. It’s not perfect, but it solves some problems. I do wish FF3 had the same feature, though.

  • Anonymous

    Current template is completed with IE6 warning.

  • I haven’t used IE for years for reasons like this

  • Agreed. I’ve mainly seen CCs used for quick and dirty CSS hacking. Unfortunately, those fixes start mounting up and quickly become an unmanagable tangle of files.

  • Joshua Melvin

    I have also run into the problem that unless I updated my version of OSX, I couldn’t update my version of Safari. This problem is not specific to MS, it’s more of an issue that OS developers obviously want the “default” browser for their OS to take advantage of the backend capabilities that the OS can provide to the browser.

  • I just paid $22.87 for an iPad2-64GB and my girlfriend loves her Panasonic Lumix GF 1 Camera that we got for $38.76 there arriving tomorrow by UPS. I will never pay such expensive retail prices in stores again. Especially when I also sold a 40 inch LED TV to my boss for $675 which only cost me $62.81 to buy. Here is the website we use to get it all from, CoolCent. com

  • I just paid $22.87 for an iPad2-64GB and my girlfriend loves her Panasonic Lumix GF 1 Camera that we got for $38.76 there arriving tomorrow by UPS. I will never pay such expensive retail prices in stores again. Especially when I also sold a 40 inch LED TV to my boss for $675 which only cost me $62.81 to buy. Here is the website we use to get it all from, CoolCent. com

  • IK_83

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

    The fact that Microsoft have spectacularly failed to achieve this in all previous attempts makes me very skeptical they will even bother trying to make this happen for IE10!

Get the latest in Front-end, once a week, for free.