bitstorm.org

Push the web forward

On January 12th, 2016, Microsoft stopped supporting Internet Explorer 9 and 10. As a webdeveloper, it might be time to stop supporting IE9 and IE10 too. At the time of writing, in January 2016, the worldwide market share of IE9 and IE10 is less than 1.3% for each browser. Check the statistics from your own site, because the IE usage on your site might even be less.

Two years earlier, Microsoft already stopped support for IE8. At that time I wrote an article about which features you can use when you dropped support for IE8. The list of new features you could use was quite large. Now, when dropping IE9 and IE10, the list of new features is even larger!

Below you’ll find all new features supported in Chrome, Firefox, Safari, Internet Explorer 11 and Edge.

CSS

While all the other browsers supported impressive CSS effects for years, we had to wait until version 10 to see it in Internet Explorer. Now we can use these features without workarounds or fall-backs:

• Gradients - declare a gradient in CSS without the need to load PNG files
• Transitions - for simple animations
• Animation - for more complex animations with keyframes
• 3D Transforms - move your HTML elements in 3D space

We finally can bring our webpages and interfaces to the next level. But there’s more. We now also have some new layout modules:

• Multi-column layout - neatly arrange text in columns
• Flexible Box Layout - the solution where floats gave us a headache

IE also introduces Grid layout, were you can define where elements should appear in a grid, very powerful for making responsive websites. But here IE is the leader of the pack and we have to wait until other browsers will support Grid layout as well. IE also introduces Regions to let text flow from element to element. Here we also have to wait since it’s only supported by IE and Safari right now.

Some other CSS features we can use now:

• font-feature-settings - cool features for typography lovers
• user-select: none - prevent text from getting selected when clicked
• text-shadow - now text can have shadows, too
• border-images - define borders with an image
• pointer-events - usually used to make elements invisible to clicks

As a bonus, IE can now support more than 31 style sheets per webpage (yes, that limit existed) and pixel values can now be specified in decimals.

HTML

Most HTML improvements are about forms.

• New form elements
• Range input type - input values with a slider
• Progress element - show the progress of a process
• New input types
• Email
• Telephone
• URL
• Number
• Search
• And new attributes
• pattern - to match a value to a regular expression
• spellcheck - enable the spell checker for this element
• placeholder - show text when the field is empty
• autofocus - for automatically giving focus to this element
• multiple - for being able to select multiple files
• accept - for accepting only certain file types

These new form elements and attributes also need two new CSS pseudo classes and one pseudo element:

• :invalid - style invalid elements
• :valid - style valid elements
• ::placeholder - style the placeholder text

With the Constraint Validation JavaScript API, validation of the form can also be controlled by JavaScript.

And with the new FormData API, forms can easily be send to the server with the updated XMLHttpRequest 2.

There are also a couple of new attributes:

• sandbox - prevent attacks by isolating an iframe from its parent page
• hidden - a better way of hiding elements
• async - loads external scripts asynchronous so it doesn’t block loading the page
• prefetch - load a resource in the browser cache for future use

Conditional comments are no longer supported and are now treated like the other browsers do: as comments.

Binary files

JavaScript always had a hard time dealing with binary data. This is fixed with the addition of the following API’s.

• Base64 - encode from binary to ascii and vice versa
• Blob - Binary Large OBjects to store binary data
• Data URLs - construct a file from a URL so you can include files inline in your source code
• File and FileReader - read files from the local computer
• XMLHttpRequest 2 - send and receive binary data to and from the server and also track upload and download progress

Webapps

Writing a webapp and running it on all devices sounds ideal, except when webapps are very restricted. A lot of API’s are added to make webapps more capable.

• History and PageTransitionEvent - navigate to different URL’s and still stay in your single page application
• Application cache - make webpages available offline, but unfortunately, with lots of problems
• Web Workers - let processes do its work in het background. Break out of JavaScript’s single thread paradigm and use all CPU’s at the same time.
• requestAnimationFrame - synchronise your animations with the refresh rate of your screen for smooth movements
• Web Sockets - makes it possible to have a prolonged, two way communication with the server
• Page Visibility - get notified when the user is going from or to your webpage
• Performance.now - make time measurements with a higher resolution
• Channel messaging - communicate with pages in iframes, even from different domains
• IndexedDB - access local databases from your webpage
• Cryptography - an API to encrypt, decrypt, hash, verify and sign data within the browser
• WebGL - use the power of your GPU and play, for example, impressive video games

EcmaScript 2015

A small subset of EcmaScript 2015 (ES6) can already be used.

• const - Use this instead of var for constant values
• Set/Map/WeakMap - Set and Map are standard data structures. WeakMap is like Map, but data can also be garbage collected
• Typed Arrays - Define arrays of a certain type, for example 32 bit unsigned, very useful in combination with WebGL

Zepto and Polymer

Now we can finally use some modern JavaScript libraries and frameworks. For example Zepto, a lightweight jQuery replacement.

A interesting framework that can now be used is Polymer, build on top of Web Components, a set of powerful and promising web standards still in development.

HTTP

The following two security features require changes in the webserver, so they’re probably more interesting for system operators:

• Content Security Policy - prevent cross-site scripting attacks
• HTTP Strict Transport Security (HSTS) - lets the browser use https instead of http

HTTP/2, formerly SPDY, is the next version of the HTTP protocol with several improvements, so now is a good time to update your webserver.

Other improvements

• Strict Mode - enable the ES5 strict mode and catch more bugs
• SVG filters - use the powerful SVG filters like blurring and blending
• PNG favicons - it’s no longer necessary to use the strange .ico format
• matchMedia - makes the CSS @media media selector available in JavaScript too
• devicePixelRatio - useful to find out whether a high screen resolution like Retina is being used
• classList - finally a way to easily add, remove and check for classes in vanilla JavaScript
• WebVTT - add subtitles to video
• Media Source Extensions - have more control of the media that is played in an audio or video element, enables streaming audio and video

Safari is the new IE

In the past, the features you could use on your website were limited by IE. While other browsers supported many features for years, you had to wait for support in IE before you could use them, or use workarounds or fall-backs.

Now it’s the other way around and IE11 ships with some nice new features not always supported in the other browsers. The most absent browser here is Safari. Once a browser ahead of the rest, now it looks more like it takes the place IE used to have.

Features in IE11, Chrome and Firefox, but not in Safari, are:

• Intl (Internationalization) - show numbers and dates in a format used in a specific country and language
• Datalist - enable the combobox form element: type text and select from a list
• User Timing - like the High Resolution Time API, but more extensive
• Resource Timing - measure very precise how long it takes to load a resource
• Screen Orientation - reading and locking the screen orientation is still not supported on Safari iOS.
• let - an ES6 addition to JavaScript to have block scoped variables in addition to the usual function scoped variables

Take a look at caniuse.com to see which features are supported in which browser.

Conclusion

Internet Explorer and its successor Edge made great progress and catched up with the other browsers. The web platform is becoming more and more mature and the horizon of a webdeveloper becomes wider and wider. Which new features can improve the website you’re working on? Share it with the rest of your team and push the web forward.