IE8 and Earlier - Are we done yet?

Internet Explorer Logo

As CSS3 and the new functionality being added to JavaScript becomes more and more desirable - as well as the folks trying to use the new stuff in HTML 5 that actually adds nothing of value - there is a want amongst developers, myself included, to give the cold shoulder to older outdated browsers like Internet Explorer. They are chock full of bugs, require endless workarounds, fail to live up to the standards of their time much less the standards of today, and are an all around pain in the ass.

Or at least, that's what most developers would have you believe. RIGHT... What's a cubit? To be frank, given what HTML is supposed to be for - device neutral delivery of content - dropping minimal support for any legacy browser is completely missing why HTML even exists!!!

The problem as I see it is not one of the older browsers lesser capabilities, but unrealistic expectations on the part of designers and developers when it comes to what you can do in these older browsers. They MAKE these problems instead of simply accepting practical limitations of what can and cannot be done; limitations they should already be paying heed to if they care at all about usability and accessibility! As such, I consider the proper answer to this problem to be: Graceful Degradation

This is an age-old technological term for a device that even when it fails, continues to try and provide basic functionality just without all the bells and whistles. Basically if something does go wrong, or some of the fancy parts fail, you don't have a complete collapse of the entire system. It is one of the core concepts of HTML, CSS and JavaScript and how they are SUPPOSED to interact. The idea being that the result may not be pretty, it may not be what the "designer" envisioned, but it is still useable and doing what a website is supposed to do -- DELIVER CONTENT TO USERS!

The whole idea is that if CSS is missing/blocked/unsupported or flat out does not apply, that the MEANINGS of the HTML tags will still convey your content to users. That's why we HAVE tags in the first place; otherwise we might as well have nothing but <span> tags. This must extend to many of the new CSS3 features. I'm often shocked at the endless bloated scripttardery people throw at their sites just to try and get rounded corners, transitions, drop-shadows and gradients in legacy versions of Internet Explorer. Again, to be brutally frank if people using out of date browsers don't get rounded corners and drop-shadows, OH WELL!!! -- that is what I mean by an unrealistic expectation!

Much the same can be said of JavaScript. There's what a decade ago we used to call the "unwritten rule of JavaScript" - sadly I seem to be one of the few who remembers it and ever took it to heart. That rule is:

If you cannot make a fully functional page without scripting FIRST, you likely have no business adding JavaScript to it!

The whole reasoning behind that is good JavaScript - well written and serving a legitimate purpose - should enhance a page's functionality, NOT SUPPLANT OR BE THE ONLY MEANS OF PROVIDING IT!!! That way should JavaScript be blocked (which a lot of people do now), be unavailable, or just do something that doesn't apply to the user-agent that's visiting the page, the site is still useful to end users!

So if fancy bits of your scripting doesn't work in legacy IE, but you wrote the page so it still works WITHOUT scripting... WHO GIVES A FLYING PURPLE FISH!?! Add in some of that capabilities detection you should ALWAYS have before using any feature, and if something you are trying to do isn't supported, don't do it, and instead allow it to fallback on the native behavior of the HTML!

... and I say the same about most of the new tags in HTML 5. MOST of them, like <article>, <section>, <header>, <footer>, <aside>, and <nav> serve no legitimate purpose and are redundant to existing tags like numbered headings and horizontal rules; at least if you know the first damned thing about logical document structure and what those tags MEAN. They do NOT mean "text in different sizes" or "draw a line across the screen"!. There's no reason to use them, and if you just skip using them you don't need any of that "shim" or "polyfill" scripttardery to try and make them work in older browsers. Only the tags shoved down our throats whether we like it or not like <audio> and <video> are a major worry, but that's why you just put a <object> inside them as the fallback!

So what am I saying here? It's not about dropping support, it's about not bending over backwards to make legacy browsers behave like modern ones. LET the people on those crappy older browsers get a working but less fancy version of your site. This is something you should have in your page anyways since that's the entire POINT of HTML! That's why techniques like progressive enhancement exist, to provide that graceful degradation on less capable user agents.

See Also: (other articles)

Projects

  • elementals.js
    A lightweight JavaScript library focusing on cross browser support, ECMAScript polyfills, and DOM manipulation.
  • eFlipper.js
    An image carousel script using elementals.js
  • eProgress.js
    A JavaScript controllable progress bar using elementals.js. Based on the nProgress project that relies on the much heavier jQuery library.

/for_others

Browse code samples of people I've helped on various forums. These code snippets, images, and full rewrites of websites date back a decade or more, and are organized by the forum username of who I was helping. You'll find all sorts of oddball bits and pieces in here. You find any of it useful, go ahead, pick up the ball, and run with it.