It's no secret that developers across the globe resent Internet Explorer. It's disregard for standards are a burden, often requiring a parallel development effort just to cater for its inadequacies. Newer versions aren't much better, and in some cases exacerbate the problem. This year saw Internet Explorer 6 drop below 10%, and Google has dropped support for it; and (perhaps most importantly) the upcoming release of Internet Explorer 9, what can we expect to see changing?
The fall of Internet Explorer 6
Without a doubt Internet Explorer 6, a browser nearly as old as this millennia, is wrought with the most problems -- as to be expected. With Internet Explorer 6 out of the picture we can finally start to use some of the great technologies CSS2 has brought us:
- CSS Event Selector Support (well, just :hover) - IE6, unfortunately, has spotty support for even the most basic selectors. :hover and :active only work on anchor tags, :focus support is non existent, alongside :before and :after. Unfortunately Internet Explorer 7 doesn't really improve much on this, except for with :hover. But :hover is still a huge improvement, so worthy of going on this list.
- CSS HTML Selector Support - HTML Selector support gives support traversal and attribute rules, such as * (which IE6 does support), + (select the adjacent element, for example li.first + li{} or > (select only the direct children, for example ul > li{}). Add on to this the :first-child selector, and you can drop a lot of your HTML class names (think ul:first-child as opposed to li.first). Also included in this list is the [attr=] rules, which version 7 has full support for. This means no more classing your inputs, you can just add a rule such as input[name="submit"]{margin:10px}, and it'll work across the range of browsers. Beautiful.
- CSS3 Selectors - As crazy as this might sound, IE7 actually supports some CSS3 selectors, so dropping IE6 will give you the ability to use advanced CSS3 selectors, such as ~ (which is like +, but + only selects the next sibling (so a limit of 1), where as ~ selects any following siblings). CSS3 also brought support for advanced [attr=] selectors, so you can use semi-regex pattern matching such CSS as a[href^="http://"].
- Max-Width, Max-Height CSS Rules - I think these are self explanatory, but IE6 is missing support for all but a tiny fraction of these rules, while IE7+ and the rest of the world support them perfectly. Dropping IE6 means you can finally flex your max-* muscle, which means more intuitive scalable web pages.
- PNG support - Ok, IE6 does support PNGs: badly - it messes up with the palettes in PNG8 files, and worse so, does not support Alpha transparency in PNG-24 files. If you're developing for the web, you likely know just how useful Alpha Transparent images are, but here is a concise summary. Now, you can hack PNG support into IE6, using Javascript and Microsofts own CSS filter rules, but you're just adding cruft and maintenance issues which can become a headache. Dropping IE6 from your vocabulary will mean you can finally stop using GIFs and switch for PNG8 and PNG24, and live a happy existence.
- ABBR Tag - Ok, not a big one, but still useful: IE7 recognised the abbreviation tag, improving on IE6's support of - well, ignoring it.
- Support for fixed backgrounds - Another small bug significant improvement, is IE7's support for background-position: fixed. Allowing the background to stay fixed on the screen while the user scrolls.
- Less use of hacks - It almost goes without saying, but the improvements made in Internet Explorer 7 have allowed developers to use less "hacks" to support later versions of IE: no more frustrating box-model bug, decent CSS selector support, PNG support! So when IE6 finally dissapears, you can expect less comments, and less CSS/Javascript hacks. This all amounts to less code, meaning less maintenance, meaning you get to spend more time doing the cool stuff than figuring out how to get IE6 working with your new site.
Can you drop Internet Explorer 6 support though?
In my mind, yes! There is very little reason to continue supporting IE6, Google haven't since March. Windows XP users can upgrade to IE7. Microsoft has issued automatic updates for IE7 to Home and Corporate users, and even removed the WGA requirement from IE7, so even pirated versions of Windows XP can get Internet Explorer 7. IE6 has seen a fairly steady decline in userbase (around 1% per month) which means by December 2010 IE6 could match the userbase of browsers such as Opera 9, and IE5 - perhaps it will see an even faster decline after the release of Internet Explorer 9. By then, IE6 usage could well be lower than Firefox 2., Mozilla 1., Seamonkey 1., Safari 3. and Opera 9.*. How many of those browsers do you support now? If you don't want to take into account the usage statistics, how about age? IE6 was released in 2001. Mozilla Firefox 1.0 was released in 2004, Netscape 7 in 2002, Netscape Navigator 4.8: 2002, Opera 6.0: 2002, Safari 1.0: 2003. How many of these do you support? I think the answer is clear.
Leaving Internet Explorer 7 behind
It is a bold suggestion right now to ditch Internet Explorer 7. IE7 was released in 2006: a 4 year old browser, aeons in computer years. But what would dropping IE7 even give you? What does IE8 have to offer?
- Full CSS Event Selector Support - As opposed to lackadaisical approach with event selectors, IE8 gives it the college try. :hover and :active are supported for all elements, not just anchor tags. :focus is fully supported. No more Javascript hacks for you!
- Full CSS HTML Selector Support - Selector support becomes more inline with other browers, including adding the :before and :after tags. These tags let you add an image, or text before or after an element. Adding to this, it supports the content: declaration married to this selector.
- Counter declaration support - This is a cool but seldom used declaration among the CSS2 ranks. Counter lets you assign list-style-type elements to any HTML element. This is actually more useful than it sounds. Consider h2:before{content:counter(section) ". ";} which will give every H2 element a number i.e turning "Heading" into "1. Heading", or perhaps this: img.fig:after{content:"Figure " counter(example,lower-alpha);} which would put, for example, "Figure a." after every
element. Nifty, no?
- Greater List-Style-Type Support - Speaking of List-Style-Type, IE8 comes with additional types according to the CSS 2.1 spec including decimal-leading-zero (01., 02.), lower-greek (α, β) and some of the more obscure such as georgian (ა, ბ) and armenian (ա, բ).
- More declarations - IE8 supports lots of other useful decelerations, for example outline (think borders that don't move the element), the fantastic display:inline-block (think a grid of icons on a page), and full support for the white-space declaration.
- Finaly, full CSS 2.1 Compliance - You can pretty much sum up all of the above into one, strong point: fully compliant CSS 2.1 support. IE8 passes the Acid2 Test, (although it gets a miserable 12/100 on Acid3). Hurray!
- localStorage and sessionStorage - One pretty important feature to HTML5 will be localStorage - the ability to store key/value storage in the browser, without using cookies. localStorage differs from Cookies in that it has no expiration, it is not send with every page request, can be pulled (very easily) on demand with Javascript, and it can store a huge amount more data (Each cookie can store 4kb, localStorage can store 10mb on IE8). sessionStorage is just like localStorage, but is cleared when the session is gone (i.e window closing). localStorage is an impressive feature of HTML5, although only the latest versions of many browsers support it (Firefox 3.5+, Safari 4+, Chrome 4+).
- Data-URI support - In case you don't know what data-uris are, they are strings that make up part of a binary file, usually an image. For example, a data-uri for a PNG image might look like this data:image/png;base64,iVBORw0KGg… This will then render that particular image as if it was a file. This is incredibly useful for small, compact pages - where you need a single image in an instance, or if you are needing to reduce server load through HTTP requests. You can embed data-uris into CSS and HTML, for example:
or div{background:url(data:image/png;base64,iVBORw0KGg…)}.
When can we rid of Internet Explorer 7?
Internet Explorer 7 is definitely on its way out. IE8 is taking place of IE7, as it is available for download on Windows XP, once again without the need for WGA. IE8 comes default on Windows 7, which seems to be taking the world by storm. IE8 is certainly in a position to replace IE7 in every way. IE7's userbase is only around 2% higher than IE6, and seems to remain in-line with IE6 as it falls, and with IE8 as it rises. As soon as May 2010 we could see IE7 drop below the 10% userbase threshold, and it could be as low as 2% by 2011, falling behind Opera. IE7's reign will most certainly last shorter than IE6, and rightly so. By this time next year, IE7 could be all but gone.
Getting Ready for Internet Explorer 9
Internet Explorer 9 was announced not so long ago, with impressive improvements in almost every field. When IE9 hits and has a significant userbase (lets dream here and say enough to put IE6/7/8 out of the picture), our internet lives will be a lot richer:
- Full CSS3 Selector Support - What? Internet Explorer 9 will fully support CSS3, ahead of time? Pinch me. But its true. Not only is that the case, but it actually passes every single selector test on css3.info. That puts it in line with Chrome 4, Safari 4, Firefox 3.5 and Opera 10! Advanced selectors like :last-child, :nth-child(), :nth-of-type(), :empty, :target, :disabled. These selectors will allow you to stop using Javascript to style pages for everything except animations.
- Support for CSS3 Colour Levels - Additions to CSS3 include the ability to set rgb(), rgba(), hsl() and hsla() colours. IE9 supports these. These apply to any declaration of colour, be it border, background or text.
- New CSS3 border & shadow declarations -border-radius is supported. As is border-image. Sadly text-shadow and box-shadow aren't (in the developer preview yet). Fingers crossed they will be!
- HTML5 Tags - Perhaps most impressively, IE9 will support HTML5 tags such as and Yay!
- SVG Support - Internet Explorer 9 will support Scalable Vector Graphics embedded in pages, this means where you don't need photographic images, you can use vectors instead. This will turn to be a massive improvement to the web as we know it.
- XHTML - Finally, at long last, IE9 will support true XHTML. This means advocates of XHTML can finally begin to use XHTML as it was meant to be used: as xml. Confused? Read my previous post on XHTML.
- JPG XR, TIFF, Colour Profiles - IE9, catching up and overtaking some browsers, will support JPG XR and Tiff Images as well as support ICC colour profiles
When will Internet Explorer 9 make our dreams come true?
Here's the stinger. IE9 isn't set to be released until late 2010. By which time hopefully you'll have ditched IE6 and possibly IE7. Unfortunately IE8 will still be around for atleast another year - possibly longer as it supports CSS 2.1, corporate users stuck in there ways (those ones that wouldnt budge off of IE6 for ages) will likely be afraid to move off of IE8 for a good while. To further add sting, IE9 wont be supported on XP, meaning we've got to get rid of a whole population of Windows XP users before we can think about entertaining all the wonderful elements of a full family of standards compliant CSS3, SVG, XHTML browsers. HTML5 and CSS3 aren't official standards yet either, so don't get too excited about seeing those with wide support just yet (most browsers still use their vendor prefixes, such as -moz- for CSS3 rules). We are, however, seeing a rapid acceleration in the advancement of the web. HTML4 is getting long in the tooth now, and so it is about time to get some excellent new features. I personally can't wait. Besides, I wouldn't waste too much time on wondering when IE9 will come out -- you've got plenty of CSS3 to learn before then…
Thoughts? Chat to me, @keithamus on Twitter