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?
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.
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.
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 ;-)
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.
Related
I was wondering this while I was learning some front-end web development. But does anyone understand what the point of the menu tag is for html if the tag is not supported in all major browsers? When I was inspecting some web page I saw its use then looked on the w3schools website for more info about it, and it states that there its not supported in any browsers.
In this specific case:
The menu element was introduced in HTML 3.2, did not see wide take up from browser authors, was deprecated in HTML 4 and removed in HTML 5.
It has no place on the modern web.
In more general terms:
Most features of web standards have limited support from browsers when they are first introduced. Often their effects can be replicated in browsers that do not support them using CSS and/or JavaScript.
Sometimes take up of a feature is so poor that it gets removed from the standards again (although modern approaches to writing standards mean they will tend to live in a draft state until it is clear if the support is going to be good enough).
It is up to the page author to decide when there is sufficient client support for a feature for it to be worth using, and how much effort they wish to go to in order to make it work in older browsers.
Features of HTML5 are no doubt very compelling but is it a good time to start development in HTML5 ?
I just have started development in HTML5 and realized at the time even not all HTML5 input types are supported by all browsers. It means it is not sure about basic stuff like input forms.
Please share how you are managing these things ? (Using HTML5 code with browsers currently supporting HTML5)
HTML 5 is still under development so you've got to be careful. Certain features, such as the more basic ones like <header> and <footer>, are less likely to change before the final release. The doctype decleration is unlikely to change. I wouldn't rely on the multimedia support as supported formats vary widely accross browsers.
The momentum behind HTML5 is strong and it is indeed a good time to get started if you have not already.
At the lowest level, you would need to write feature detection in your pages to see if the particular browser supports the HTML5 feature that you want to use.
I suggest the following:
Use sites like caniuse.com to determine the current support for a particular feature across browsers.
Use templates like HTML5 Boilerplate, which give you a structure for the HTML5 page that you can use , with support for various shims that bring in support for HTML5 features in older browsers.
If you prefer doing the detection yourself, use a library like Modernizr.
As with all cross-browser development, you can never rely on any support in the browser. If you target older browsers, then do not rely on HTML5 features. I haven't had problems with using the HTML5 doctype in older browsers, but specific features can be troublesome — e.g. you can use <header> elements, but IE won't let you style them in any way as it disregards header styles as invalid.
As long as you need to support old enough browsers, it will never be a good time to start using HTML5. The only thing that decides whether it's okay to use HTML5 is which browsers you want to support.
HTML5 is much easier then previous ones, It has developed allot in input fields, though its still under development and not complete yet.
You can check here http://html5test.com/ which browser supports HTML5 how much?
Currently, Chrome is the best that supports the HTML5 more than any other web browser.
-Thanks.
Take a look at the table in this wikipedia article. There is a lot of variability amongst browsers as to which parts of HTML5 are currently supported. This website tests your web browser to see which features it supports, so install a bunch of different browsers on your computer and test them for yourself.
The new forms attributes and tags in HTML5 are great. Unfortunately, there is only limited support for these in Chrome and Firefox, and essentially no support of these in IE9 and below.
I have investigated using Modernizr and HTML5 polyfills to polyfill this functionality in browsers lacking native support. However, there seems to be a large number of polyfills for HTML5 forms functionality, such as webshims lib, webforms2 and h5f (see for example the listing at https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) and I am not sure which one or ones I should invest the time in learning.
Which one of these HTML5 forms polyfills would give me the broadest coverage in terms of HTML5 features and browser coverage?
I have used Webshims Lib and like it because:
It runs 'more lightweight' if a browser supports more HTML5 form features natively (which, of course, should do any good polyfill).
You can simply use the declarative markup (attributes) of HTML5 forms in all cases.
The project seems to be more 'alive' than others.
By the way, the Webshims creator answered another question on stackoverflow quite convincingly: html5 forms with polyfills - is it worth it?
I want to use HTML5 because it supports in Iphone also and I really liked its capabilities but what can I do if it is not fully compatible with all browsers? Specially IE family. So is there a way by adding some js script e.t.c. so that HTML5 and its js api work normally in IE also as it works on other browsers like chrome, firefox and opera e.t.c.? So that I can use it without thinking of browser compatibility issues. There are also many game engines in html5 but what if this is not supported major IE browsers. Or can some one tell that how much advantage can I take of html5 without thinking of compatibility issues?
Thanks in advance
You can use http://html5boilerplate.com/ together with http://code.google.com/p/html5shiv/ and you're good to go.
For some other cool features, like video in old IE, you need to use workarounds like Flash for video and Javascript libs for canvas.
Simply put, if the markup is valid in HTML 4, change the Doctype and it will work as HTML 5.
If you want to use the new elements like <article> or <footer>, you will need to include a small javascript snippet in order to register those new types.
document.createElement("article");
document.createElement("footer");
This will make these new elements usable and stylable like an ordinary <div> element
Polyfills let you use new HTML5 apis on older browsers. The Modernizr project keeps a list of good ones: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
They are only supported in new browsers. I think everyone here knows that. But if majority of users are still on older browsers that don't support CSS3/HTML5, shouldn't that push developers to use older scripting languages (ie:HTML4/CSS2).
They are both draft specifications which are partially supported (to various degrees) in current browsers.
shouldn't that push developers to use older scripting languages (ie:HTML4/CSS2).
Leaving aside neither of those being scripting languages…
Using draft features can provide a better experience in some browsers, while the fallback is still acceptable.
JavaScript can sometimes be used to support browsers which don't have native support for a feature (although usually with a performance hit for those browsers).
Building around draft features provides practical experience with how those features work (and helps determine if there needs to be more work on the design before the feature goes into a final specification).
Building JS based around draft features gives common ground for different developers to aim for when building scripts to achieve a specific task. This increases the interoperability and ability to switch third party scripts.
No, we as developers need to push forward. Tools like Google Chrome Frame and Explorer Canvas will allow us to push the edge without too much worry about the browsers that can't keep up.
As #Rob states most of HTML5 is just HTML4 with defined error handling. Assuming you are not using the new parts of HTML5, there are no disadvantages and several benefits to using the HTML5 doctype now, including a better spec and a better validator.
A lot of CSS3 (rounded corners, drop shadows, RGBa, #font-face…) can be used as progressive enhancement on top of CSS2.1 rules. Conveniently this is also the CSS3 that is most implemented.
I think this question points to either a misunderstanding of HTML5 & CSS3, or a misunderstanding of underpinning concepts like progressive enhancement, the web trifle/layer cake, and the cascade.
For further explanation, please refer to: Do websites need to look exactly the same in every browser
What HTML5 can you reasonably expect to be able to use reliably cross-browser in the early months of 2010?
As the article above states, there is ExplorerCanvas until IE supports the <canvas/> tag.
There is also svgweb until IE supports SVG.
And Microsoft announced CSS3 support in IE9. As IE is pushed through Windows Update, I'm not afraid of using CSS3 and HTML5 right now.
shouldn't that push developers to use
older scripting languages
(ie:HTML4/CSS2)?
If that's your only question, then your answer is yes. "Most" developers are still using HTML 4.01 and mostly CSS2 for the reasons you stated: they're well supported on today's popular browsers. :D
See these:
should I switch to html5?
support of CSS3 among common browsers (not very good yet..)
I'd say, use the broadly supported options now but make sure that your designs degrade 'gracefully' with browsers that don't support these new features as they will just ignore them.
HTML5 is mostly backwards compatible with HTML4.01, and the same browsers will still be able to handle HTML4.01 elements. Like all properties in CSS, developers will be aware and careful of how the CSS3 properties they use will affect users who can't see them (typically IE users).