IE's Conditional Comments, Browser Prefixes & You

I miss how easy conditional comments were

First, let me tell you a story.

When I was growing up, Internet Explorer was all the rage. Everybody had it, everybody loved it and if you used something else you were "weird". I remember school kids bringing flash-drives with a strange, foreign program called "Firefox" on it that allowed us to hack around administration firewalls. Anybody who had one of these programs were like the Edward Snowden of 2004.

Fast forward 13 years and Internet Explorer is all but dead. Unlike other software programs that have monthly updates, IE didn't, and once HTML5 started rolling out the browser struggled to catch up. IE 9 came out with plans to play ball with Chrome and Firefox, but quickly ended up in the playpen with Netscape Navigator. IE 10 had a little more subsidence to it and got rid of a lot of the quirks IE 9 had, but it too fell by the wayside. IE 11 was a much better improvement but still too got left in the dust.

When Microsoft announced the death of Windows XP in 2014, along with it came the end of IE. All Windows computer received the "update or die" message and those old legacy browsers went along with them. The final nail went into the coffin of IE when Microsoft Edge came out. This browser has frequent updates, is fast, is slick and actually plays well with others.

Your Never Too Young for a Browser War Flashback

From the bygone Browsers Wars of the 1990s through to the end of IE today, a lot of war wounds have been left in our code. As somebody who started developing websites for IE6, I still put in the odd quirk for those older browsers. To me, these quirks and extra bits of code are like people who double space between sentences because they were taught to when typing on typewriters. I should probably stop, but I'm not the only one who codes for them.

If you're a blogger or you've ever touched code, you've probably seen some of these relics and not known what they were. The most popular are "Conditional Comments" and they look like this:

They look a lot like normal comments, but with an extra condition inside. IE stopped supporting them since IE 10 and now they are now considered legacy code. Even my code highlighter breaks when parsing them!

It would be nice to say that Conditional Comments are no longer needed. It's 2017, browsers have been around for decades and they should more or less display the same thing, right?



New Conditional Comments

Today people are still looking for the "Holy Grail" of Conditional Comments for IE 10, IE 11 and Edge. These involve everything from broken HTML to hacky CSS to CSS queries that target browser pixel ratios and colour contrasts.

Another technique developers use is called "Browser Sniffing". This is when JavaScript is used to "sniff" out the "User-Agent" string (similar to the maker and product number) of the browser and tweak their code for that. Browser sniffing was frowned upon during the days of Conditional Comments, but now it's making a sad return. To counter this, Edge's User-Agent now matches that of other browsers, like Chrome. Even jQuery, the popular JavaScript library, took this feature out of their code. They claim there should be no reason to sniff for browsers anymore.

What About The Future?

Back in 2014, there was another annoying feature like Conditional Comments going around, but they were called "browser prefixes". As new features were rolled out via HTML5 and CSS3, browsers would implement their own hacky version of them. When I started coding, you had to use them for almost everything, including rounding corners. Often times code would look like this:

Now we've tightened things up a bit:

But a lot of those prefixes still exist, especially when it comes to CSS transitions, transformations, animations and gradients. Now even CSS flexbox and sticky positioning are full of them. Over time these will get figured out, but for now they bloat our code.

The one browser that still needs them is Safari. Browser prefixes are still needed for a lot of things in Safari, and this is important since a lot of browsers in vehicles are running a version of it (like Tesla). As Safari moves up and becomes a better desktop browser, they're axing a lot of the prefixes, but older versions like Safari 5.1 all the way through to Safari 8 still need them.

I ragged on IE and Safari in this article of making things overly complicated, but Chrome isn't innocent of this either. While trying to be progressive, they have all sorts of CSS styles that only work for them and have developers scrambling to find alternatives. These include things like box reflections and text strokes.

As you code, you are bound to find these quirks, hacks, bugs and prefixes. They can be confusing if you don't know what they are, and sometimes very intimidating. I would say just to wait it out and that in five years or so they'll all be gone, but they've been hanging around since the 1990s so they probably aren't going anywhere anytime soon.

As the great Prince Hamlet kind of once said, "To hack or not to hack, that is the question."



Sign-up for inside tips for making
your website more beautiful!

* indicates required


Sign-up for inside tips for making
your website more beautiful!

* indicates required