SiteCrafting, Inc.

World Wide by Browser	USA by Browser Version

This got me thinking:

What do YOU get when YOU drop support for IE7?

It turns out Internet Explorer 8 got a lot of things right. They added support for a slew of features that make building large web applications easier.  Below are a list of CSS and JavaScript APIs that were introduced in IE8 that are well supported by other browsers.

HTML

Data URIs

String encoding used for images and other media which can be put in a src or href attribute.

Example: Image with a dynamic graph

< img alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" height="16" width="16" />
                                

ARIA Support

HTML attributes which allow people with disabilities to use dynamic web pages.

Example: Alert the current time

< button role="alert" onclick="alert(new Date)">Now< /button>

CSS

display: table;

CSS property which causes an element to be displayed as a table, row, or cell

Example: Create a table using DIVs and classes

div.table { display: table; }
div.table div.row { display: table-row; }
div.table div.row div.cell { display: table-cell; }

:before / :after Selector

CSS pseudo-element selector for displaying text or images before or after an element's contents

Example: Show the image's title after the image

img[title]:after { content: attr(title); }

box-sizing

CSS property to specify whether an element's borders and padding are to be included in it's size calculation.

Example: Use same sizing model in all browsers

.example {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

Cross Domain Ajax

Ajax which loosens the same-origin policy.

Example: Send message between domains (IE8 only)

var xdr = new XDomainRequest();
xdr.onload = function(res) { console.log(res); };
xdr.open('get', 'http://example.com/xdr.php');
xdr.send();

Web Storage

Key / Value pairs for storing string data locally, like cookies, but for larger data sets.

Example: Store/Load a Data URI image

localStorage.setItem('star', img.src);
img.src = localStorage.getItem('star');

Native JSON Support

Native support for encoding / decoding data as JSON.

Example: Store an object in storage

localStorage.setItem('bigJSON', JSON.stringify(bigObject));
bigObject = JSON.parse(localStorage.getItem('bigJSON'));

querySelector / querySelectorAll

Native method to look up DOM elements using CSS selectors.

Example: Get the cells of a table

var cells = table.querySelectorAll('td');

postMessage

Unified form of message passing between windows and frames, including cross domain.

Example: Post a message between an iFrame (frame) and the parent window

window.onmessage = function (e) { console.log(e.data) };

frame.postMessage('data');

hashChange Event

Event that is fired the the URL's hash value changes.

Example: Animate page scroll to an element with matching ID

$(window).bind('hashChange', function() {
    $('html, body').stop().animate({ scrollTop: $(location.hash).offset().top });
});