1

What are the features of HTML5 that can be reliably used today?

Microsoft has some cool HTML5 demos, but what part of it is classic EEE and what is them catching up?

Example of useful feature I found on SO: pushState.

Please give more thought than a page with comprehensive lists of tags and attributes of HTML5.
@Jan Zyka's http://slides.html5rocks.com answer is a great example. (Thank you!)

What are you actually using in production code today?

Community
  • 1
  • 1
tiago2014
  • 3,392
  • 1
  • 21
  • 28
  • @tiagoinu What versions of IE do you want to support? IE8 and above? – Šime Vidas Mar 10 '11 at 16:17
  • Hi @Šime Vidas. The more the merrier. (I'd like to point I'm not targeting cutting-edge web developers.) You probably are using HTML5 in your web applications, so: Which parts? – tiago2014 Mar 10 '11 at 16:37
  • @tiagoinu Hm, other than the new shorter notations for the DOCTYPE and META charset, I use data-* attributes. I haven't started using the new semantic elements, and I have no need for AUDIO/VIDEO/CANVAS/SVG currently. However, I do use jQuery, which makes use of a dozen of HTML5 features. – Šime Vidas Mar 10 '11 at 16:47
  • @Šime Vidas. That is good to know jQuery leverages HTML5; maybe I'm indirectly using HTML5 without knowing. Could you please point me to a blog post or documentation page talking about the HTML5 features jQuery makes use? – tiago2014 Mar 10 '11 at 17:05
  • @tiaoinu 1. data-* attributes (2 occurrences in the jQuery source code), 2. getElementsByClassName (7 occurrences), 3. setTimeout (5 occurrences) and setInterval (1 occurrence), 4. innerHTML (14 occurrences) ... there should be a couple more. I'm afraid there is no article that explicitly lists which HTML5 features are used in jQuery. – Šime Vidas Mar 10 '11 at 17:25
  • @Šime Vidas Isn't setTimeOut a javascript thing for ages? Also innerHTML in IE, and data-like attributes (without the prefix "data-"). I'll try to find more info, thanks for the head-start. – tiago2014 Mar 10 '11 at 17:31
  • @tiagoinu Yes, but they weren't standardized until HTML5 `:)`. However, data-like attributes without the data- prefix are invalid and must not be used. – Šime Vidas Mar 10 '11 at 17:52

4 Answers4

3

There is a site called When can I use... which lists a variety of HTML5, CSS3, and other modern web standards, and gives an indication of which browser versions support it.

Whether or not you can use a feature depends a lot on who your users are. If you're targeting cutting-edge web developers, then you can likely rely on them having much later versions of browsers than if you're targeting corporate accounting. So, you will need to decide which browser versions you must support, and do appropriate progressive enhancement or fallback to support older browsers while introducing newer features that they don't support.

Some HTML5, CSS3, and other features can be used in older browsers using "polyfills," which are implementations of missing features using JavaScript, Flash, proprietary features, and the like. For instance, you can use <canvas> elements in older versions of Internet Explorer by using ExplorerCanvas, which implements the HTML5 <canvas> element using JavaScript and Microsoft's proprietary VML. The "When can I use..." site lists polyfills for many features, so check the polyfills checkbox if you're willing to use polyfills.

Brian Campbell
  • 322,767
  • 57
  • 360
  • 340
1

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5_Canvas)
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5_Media)
http://caniuse.com/
https://developer.mozilla.org/en/HTML/HTML5 (what is implemented in Firefox)

List of HTML5 features that are implemented in IE8:

  • <meta charset="UTF-8">
  • the contenteditable attribute (making any HTML element editable)
  • the autocomplete attribute on form elements
  • the onhashchange event
  • drag and drop
  • data-* attributes

List of HTML5 features that are implemented in IE9 (additionally):

  • <canvas>
  • getElementsByClassName
  • <video> and <audio>
  • the new semantic elements(<section>, <article>, etc.)
  • inline SVG

Note: all of the above are implemented in the modern browsers.

Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
1

Check out http://slides.html5rocks.com/. It's really nice and updated regularly.

But don't try it in IE8 otherwise you might be disappointed ;-)

tiago2014
  • 3,392
  • 1
  • 21
  • 28
Jan Zyka
  • 17,460
  • 16
  • 70
  • 118
0

This page on the Browserscope website lets you choose versions of the same or different browsers (both desktop & mobile) & see how they stack up in supporting HTML5 features.

mvark
  • 2,105
  • 2
  • 21
  • 36