I would like to know if HTML5 validation could already by used as a substitute to javascript validation.
HTML validation is so much easier and I want to implement it in my website but I am not sure of it is safe enough.
HTML5 validation is a feature that is fully implemented in several browsers, but is not fully implemented in many older browser versions, notably IE <10, Safari (all versions), as well as older versions of Chrome, Firefox, and Opera.
For those browsers that do not support it, however, you should look into using a Javascript polyfill such as Modernizr to ensure that users with other browsers will have their inputs validated as well. (There may be other polyfills available, but Modernizr is the most popular and widespread option currently available)
Check out this resource for HTML5 validations (see the required attribute). It goes on to explain browser compatibility:
http://diveintohtml5.info/forms.html
Related
In http://html5please.com the each features listed by saying use with Polyfill or Fallback. I was wondering what is the different both? kindly help me in understanding the different.
Thanks in advance.
Polyfill replaces the feature with the same functionality but implemented with supported technologies, so you're still able to use the same API as in new browsers. For example, classList only supported starting from IE10, but you can add a script written in js that adds a classList object to any dom element so you don't need to rewrite your code to detect a browser or a feature.
Fallback usually replaces the feature with simplified functionality or third-party plugin or even error message. For example, if the browser does not support video tag, you can replace it with a flash plugin.
UPD: You can also check this question for more information.
Use with Polyfill means that there is some JavaScript code available to do more or less the same thing as the native browser feature.
Use with Fallback means that it isn't practical to emulate the feature using JavaScript, and you should provide some fallback so that the page still works on less capable browsers, albeit with reduced functionality.
Polyfill: A polyfill in web development is code that implements a feature on web browsers that do not support the feature. It usually refers to a JavaScript library that implements an HTML5 or CSS web standard, either an established standard (supported by some older browsers) or a proposed standard (not supported by any browsers) on existing browsers. "A polyfill is a shim for a browser API," according to the definition.
Fallback: The function is usually replaced with generalised functionality, a third-party plugin, or even an error message as a fallback.
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?
Hi kind people of the internet,
Why doesn't Modernizr work in IE for a simple HTML5 input field?
I posted something similar yesterday, but didn't seem to explicitly explain the issue clearly enough, as the answers seem to point towards loading/referencing yet more libraries to shim/crutch IE.
Here's my page: http://www.msa.saccounty.net/utilitybilling/streetview/TestHTML5pagev6.aspx
I'm attempting to validate the input of an account number using HTML5 as follows:
<label for="account">Account Number: </label>
<input id="account" name="inputAccount"
placeholder="input billing account number"
pattern="/(^500)|^\d{11}"
required
autofocus
type="text"/>
If I'm understanding things properly, by referencing Modernizr on my page, HTML5 should simply work in old browsers, including IE?...or am I being naive?...if Modernizr doesn't really fix anything for IE, then I'm a bit befuddled about what all the hype is.
Things work great in Firefox, Chrome, Safari...but alas not in IE8. So what might I be doing wrong with Modernizr?...in theory I shouldn't have to use yet-another js library to make HTML5 work in IE.
thanks in advance
Modernizr does not make HTML5 "work" in browsers, but allows you to detect HTML5 features so you can have a fallback solutions for old browsers while taking advantage of HTML5 features in the browsers that do understand them.
It is feature detection and nothing more, used for progressive enhancement. Basically you use Modernizr to check if a feature exists. If so, use it. If not - use a fallback
Just read the first paragraph of the Modernizr documentation:
Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.
(My emphasis at the end [theirs at the beginning].)
The hype is that all of this feature-checking is pre-built, comprehensive, maintained, and (in some cases) non-trivial.
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.
Can someone help me to find out the list of all Supported Browsers for JSF2?
Technically the JSF is converted to html on the server side like JSP and php and such, so unless you are doing something really crazy or using a feature not supported by certain browsers yet (CSS3 or HTML5) it should work with most browsers
(source: I've used my JSF apps on IE, Firefox, Chrome, and Opera Mobile with no issues so far)
I wasn't able to find a place online that officially lists supprted browsers, only sites like IceFaces and RichFaces
just found this, not actually looking for it but thought it might be useful
CaniUse.com lets you select features and then it shows a table of browsers and whether they support the features or not