Cross Browser Handbook Blog

Welcome to the Cross Browser Handbook Blog.

Here I talk about cross browser issues and new developments.

IE 10: New HTML 5 features and their polyfills

10/30/2012 by Daniel Herken

In march 2011 Microsoft released Internet Explorer 9. This week, over 1,5 years later, Windows 8 and Internet Explorer 10 were released to the public. In a minute I'' describe the main new HTML 5 features implemented in Internet Explorer 10 but first let's look at some numbers.

While Microsoft took 19 months to create the next Internet Explorer, Google Chrome and Firefox pushed out 12 updates to there browsers and rendering engines. Moreover it will take at least another month until Internet Explorer 10 will be available for Windows 7 (Vista and XP users are stuck using IE 8 or 9).

I hope sincerely that Microsoft will speed up the development to keep up with browser development. Otherwise we will soon speak about IE-compatibility instead of general cross-browser compatibility.

But for today let's focus on the new HTML 5 features implemented in Internet Explorer 10.

HTML 5 and IE 10
I don't expect Microsoft to switch to a more rapid release cycle anytime soon so IE 10 should raise the bar regarding HTML 5 support. Does it? Let's find out.

Application Cache API
With the use of the HTML 5 application cache it’s easy to get your web application to work offline. This can be accomplished by creating a cache manifest file. In this manifest file you can specific resources the browser should download and use in case your application is running offline. An example of this manifest file you look like this:

CACHE MANIFEST /style.css /logo.png /application.js NETWORK: login.asp FALLBACK: /html/ /offlinemode.html
To get this working you need to specify this manifest file in the main page of your application.

<html manifest="app.appcache">

All major browsers starting with Internet Explorer 10 support the application cache API. To get support for the application cache in older browsers you can use Html5-gears which uses Google Gears to simulate the application cache API.

Drag and drop
The draggable attribute allows to make any HTML element inside the page draggable. In Internet Explorer 9 you could use the dataTransfer object to drag images, links and text. Starting in Internet Explorer 10 you can not apply the draggable attribute to each and every element on the page. Possible values are true, false and auto (default browser behavior).

<div id="testdiv" draggable="true">This is draggable</div>

Starting with Internet Explorer 10 all major browsers support the draggable attribute. Currently there is no script available to simulate the attribute in older browsers.

File API
One major shortcoming of web applications is working with files on the client side. Uploading and manipulating files was often only possible by using plug-ins like flash. The File API enables you to simply manipulate files and enhances the file upload user experience. A quick file upload example could look like this:

function startRead() { var file = document.getElementById('file').files[0]; getAsText(file); } function getAsText(readFile) { var reader = new FileReader(); reader.readAsText(readFile, "UTF-16"); reader.onprogress = updateProgress; reader.onload = loaded; reader.onerror = errorHandler; } function updateProgress(event) { if (event.lengthComputable) { var loaded = (event.loaded / event.total); if (loaded < 1) { // Here you could show the process to the user } } } function loaded(event) { var fileString = event.target.result; // Here you could manipulate the file } function errorHandler(event) { if(event.target.error.name == "NotReadableError") { // Error handling goes here } }

Starting with Internet Explorer 10 every major browser supports the File API. To get support in older browsers you can use FileReader.js.

History API
The back and forward buttons are the most used buttons inside the browser UI. The standard browser functionality works very well for static webpages but modern web applications don't work the same way. The HTML 5 History API enables you to manipulate the history state manually.

The history API allows for history navigation:
window.history.back(); window.history.forward(); window.history.go(-1); window.history.go(4);
Moreover you can manually push and replace the history state:
var stateObj = { foo: "bar" }; history.pushState(stateObj, "page", "bar.html"); history.replaceState(stateObj);

Starting with Internet Explorer 10 every major browser supports the History API. To get support in older browsers you can use HTML5-History-API.

Server-sent events
In the classic AJAX and JavaScript world every interaction starts with the client connecting to the server. So if a webpage needs periodical updates it needs to ask the server for it. With the introduction of the server-sent events this is no longer true. The server-send event can be used to push updates down to the client. A quick example:

<script type="text/javascript"> if (typeof (EventSource) !== "undefined") { var source = new EventSource("../Blog/serverside"); source.onmessage = function (event) { alert(event.data); }; } else { alert("No server-send event support"); } </script>

Every modern browser supports these server-sent events, starting with IE 10. To get support for server-sent events in older browsers you can use jQuery sockets.

Web workers
In the old HTML 4 world JavaScript is single threaded. This means if your JavaScript takes up a lot of time to execute the page appear to “hang” and the user cannot interact with it while JavaScript is running. This can be overcome by the HTML 5 web workers which enable you to run JavaScript in the background, without blocking the page interaction. You can start, send messages and terminate a web worker using JavaScript.

<script type="text/javascript"> var worker; function startWorker() { if (typeof (Worker) !== "undefined") { worker = new Worker("workers.js"); } worker.onmessage = function (event) { alert(event.data); }; else { alert("No web worker support."); } } function stopWorker() { worker.terminate(); } </script> The web workers are supported by all major browsers starting with Internet Explorer 10.

To get support for web workers in older browser versions you can use Web Workers API shim which uses Google Gears to simulate the web workers.

Web sockets
The HTML 5 web sockets are a technology designed to get real-time communication between the web server and browser using only HTTP communication. It works directly over TCP and can be used by JavaScript:

<script type="text/javascript"> function Test() { if ("WebSocket" in window) { var socket = new WebSocket("ws://theserver"); socket.onopen = function () { socket.send("Something"); alert("Sent something..."); }; socket.onmessage = function (event) { alert(event.data); }; socket.onclose = function () { alert("Connection closed"); }; } else { alert("No web socket support"); } } </script>

Currently all modern browsers, starting with Internet Explorer 10, do support web sockets.

To get support for web sockets in older browsers you can use jQuery Socket or Kaazing Web Socket.

Conclusion
In my opinion this is not an impressive list considering the 19 months development time and that all other major browsers already support this features. But there is a chance for Microsoft to catch up with the other browsers. If Microsoft is able to speed up the release process I see a chance to transform Internet Explorer into a current and well maintained browser.

Only the sour aftertaste remains that Windows XP and Vista users will not get any more browser updates. This means the need to support Internet Explorer 9 for the years to come. Come on Microsoft, don't miss this window!

Browser compatibility matters!

Learn to create modern and compatible websites

Welcome to the Cross Browser Handbook Blog.

IE 10: New HTML 5 features and their polyfills

10/30/2012 by Daniel Herken

HTML 5 and IE 10

Application Cache API

Drag and drop

File API

History API

Server-sent events

Web workers

Web sockets

Conclusion

Browser compatibility matters!