Written by Steven Roberts, Web Designer & Front-End Developer at Better.
The world of web development and technologies is a weird and wonderful place where there is almost always at least a few ways to accomplish the same goal and implement a feature or design.
The problem we have is that some of these implementations are much easier for us (the developers) but these, easier to implement methods, tend to be the least supported methods.
New techniques, properties and tools are being released almost weekly now making it really difficult to keep up-to-date with the latest and greatest on the web.
We’re constantly using tools like Google Analytics trying to work out the oldest browser we need to support on your website based on the browsers your customers are using. This usually results in us landing on something like IE9 or 10 as a minimum for browser support.
This poses a problem for the developer as IE9 is now more than 5 years old, released March 14, 2011. The code we use to build the web has moved on quite a bit in the last 5 years offering developers tonnes of tools, new code and systems which, as developers, we’re chomping at the bit to use, test and try.
Most of these tools we simply have to keep an eye on until they’re supported well enough for us to use in production websites. At the least we’ll be waiting for six months to a year maybe, at most it could be 3 or 4 years, by which time a whole bunch of new, better and more exciting tools have been released. It’s like constantly playing catch up in a field which will never stop changing and evolving. That might sound like a complaint but it’s really not, this is what keeps our jobs exciting and keeps us constantly learning and evolving our skills.
How does the browser work?
I’m going to give you a very basic understanding of how a web browser works so you can see the problems we’re facing here. (If you’re a developer or already have an understanding of this feel free to skip to the next section).
When you type in the address of a website, the browser will lookup the address of the website and match it to an IP address, this is the address of the server where the files which makeup the website are stored. This isn’t really the important bit, the important bit for the purposes of this blog is what happens next.
So you‘ve typed the address into the address bar and hit enter, the browser has found the server and started to download the files. From here the browser gathers the files required to display the website and then starts to render the page.
This is where the problem lies and the differences occur from browser to browser. Most of the popular web browsers have their own rendering engine. The rendering engine is an integral part of the browser which translates the code we’ve written into the page you’re looking at, without it you would end up with just text on a page. The different rendering engines used by browsers all interpret the code we write slightly differently, for the most part the differences are quite minor but older versions of IE don’t even come close to the expected result using their outdated rendering engines.
The rendering engines in the ‘modern’ web browsers (Firefox, Chrome, Safari and Edge) have a process in place allowing them to push updates to not just the browser (for security purposes) but also to the rendering engine allowing new code to be implemented in the browser as part of an auto-update.
Browser updates
While we’re on the subject of auto-updates, the modern web browsers (same as mentioned above) all have the ability to push updates to their software which are performed in the background without the user needing to do anything. This is great for developers as users of modern browsers will, 99% of the time, have the most up-to-date version of the browser. Older browsers, cough Internet Explorer, do not have the same facilities available to them, meaning pushing updates is really difficult for Microsoft and forcing users to update and adopt the newest version isn’t very easy once they have pushed an update, requiring the user to implicitly opt in to updating the browser.
Goddammit Internet Explorer (IE)
So older versions of IE don’t get the latest updates, yet we want to use the latest and greatest code, methods and tools so we rely on polyfills.
A polyfill on the web is a piece of code (usually JavaScript) which allows the older browsers to support some of the newer tools. The problem with using these is that they add extra weight to the page, requiring the user to download more files and code when they’re using IE. Polyfills can only go so far too, allowing a JavaScript implementation of some elements but not others. So what do we do about the rest? That’s where graceful degradation comes in.
Graceful degradation
For the most part when an old rendering engine comes across some code it doesn’t understand it simple ignores it and moves on. So purely presentational features which aren’t supported by old browsers (animations, transitions, rounded corners, shadows, blend modes, placeholders and multiple background images to name a few) simply do not work in IE. This can sometimes limit the design for all of the other (more capable) browsers just so that it works to an acceptable level in IE.
So what does the future hold?
With Microsoft dropping support for all versions of IE except 11 as of 12th January 2016, the future is looking pretty good, and once support for IE11 has been dropped, unfortunately not yet given a date (I suspect it will happen when support for Windows 8 is dropped, maybe 2 or 3 years from now), that will only leave the new modern browsers all of which support auto-updates allowing them to push updated rending for new elements as part of the browser. Hooray, all our problems are solved… Well not quite.
Oh, why not?
While all the modern browsers have the ability to push updates to the user they all follow their own road maps for which features to implement and in which order.
So while a new (or new-ish) feature maybe supported by Chrome it might not work in Firefox or vice-vera.
There is new syntax (code) which allows developers to provide chunks of code when a feature is or isn’t supported. While this is better than the problems we were facing with old versions of IE, it’s still not ideal.
Another problem is that the browser makers are also proposing new code to be implemented by all browsers, some of which will never make it to production so they’re all competing with each other to have the coolest, newest implementations and features.
This is a problem we will most likely face indefinitely, until all of the browser makers make a list and agree on a set of features to implement by a certain date before moving onto the next batch. This is idealistic and most likely won’t ever happen as it would require all of the browser big boys (Microsoft, Google, Apple and Mozilla) to work together and all agree on matter.
Moving forward
With support for IE being dropped (except IE11) we can use most of the new browser features and provide fallbacks for when they are not. This has been the case for most of my career and I don’t really expect it to change.
So next time you’re wondering why your website doesn’t have buttons with nice rounded edges in internet explorer, or doesn’t have a placeholder on the ‘subscribe to newsletter’ box, this blog should help to explain why.
If you’ve got a website design or development project you would like to discuss, get in touch on 01642 989158 or studio@betterbrandagency.com, or submit a project enquiry and we’ll call you right back.
