What Is the Meaning of Polyfills in HTML5

What is the meaning of polyfills in HTML5?

A polyfill is a browser fallback, made in JavaScript, that allows functionality you expect to work in modern browsers to work in older browsers, e.g., to support canvas (an HTML5 feature) in older browsers.

It's sort of an HTML5 technique, since it is used in conjunction with HTML5, but it's not part of HTML5, and you can have polyfills without having HTML5 (for example, to support CSS3 techniques you want).

Here's a good post:

http://remysharp.com/2010/10/08/what-is-a-polyfill/

Here's a comprehensive list of Polyfills and Shims:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

What is different between HTML5 Polyfill and Fallback?

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.

What is the meaning of polyfills in Angular4?

i dont know asbout AngularJS...

but i ll give one example..

A polyfill is a browser fallback, made in JavaScript, that allows functionality you expect to work in modern browsers to work in older browsers

It's sort of an HTML5 technique, since it is used in conjunction with HTML5, but it's not part of HTML5, and you can have polyfills without having HTML5 (for example, to support CSS3 techniques you want).

Follow this-
http://remysharp.com/2010/10/08/what-is-a-polyfill/

What is the difference between a shim and a polyfill?

• A shim is any piece of code that performs interception of an API call and provides a layer of abstraction. It isn't necessarily restricted to a web application or HTML5/CSS3.

• A polyfill is a type of shim that retrofits legacy browsers with modern HTML5/CSS3 features usually using Javascript or Flash.

Answering your specific question, call your directory shims if you want to keep the directory generic.

html5 forms with polyfills - is it worth it?

First of all I'm the creator of webshims lib (one of those polyfills, which isn't maintained anymore). To answer your question:

Is it worth creating a forms polyfill for a project?

No, it is really hard to do this just for one project. Well, I have done it, simply because I want to use modern technologies.

Is it worth using a forms polyfill like webshims lib for a project?

Yes absolutely! And here is why:

1. Nice standardized declarative Markup API

After including webshims and scripting the following:

//polyfill forms (constraint validation) and forms-ext (date, range etc.)    
$.webshims.polyfill('forms forms-ext');

You can simply write your widgets and your constraints into your form:

<input type="date" />
<input type="date" min="2012-10-11" max="2111-01-01" />
<input type="range" disabled />
<input type="email" required placeholder="Yo you can use a placeholder" />

This will create 3 different widgets and each are configured differently. No extra JS needed just standardized, clean and lean code.

2. Standardized DOM-API

Same goes to the DOM API. Here are just two examples: Combining two date fields and combining a range field with a date field.

3. works without JS in modern browsers

Degrades gracefully in old browsers and works well in modern ones.

4. Less file size in modern browsers

Especially good for mobile (iOS 5, Blackberry have support for date for example)

5. Better UX [mostly mobile]

Better mobile UX (better input UI for touch, better performance, fits to the system), if you are using it: type="email", type="number" and type="date"/type="range"

But still, what about customizability?

I'm a developer in a bigger agency and you are absolutely right most clients and most designers won't tolerate much differences, but I still want to use modern technologies, which means webshims lib can give you the best of both worlds.

Customizing the constraint validation

The polyfilling part

//polyfill constraint validation
$.webshims.polyfill('forms');

Customizing the UI for the error-bubble:

//on DOM-ready
$(function(){
    $('form').bind('firstinvalid', function(e){ 
        //show the invalid alert for first invalid element 
        $.webshims.validityAlert.showFor( e.target ); 
        //prevent browser from showing native validation message 
        return false; 
    });
});

generates the following markup:

<!-- the JS code above will generate the following custom styleable HTML markup for the validation alert -->
<span class="validity-alert-wrapper" role="alert"> 
    <span class="validity-alert"> 
        <span class="va-arrow"><span class="va-arrow-box"></span></span> 
        <span class="va-box">Error message of the current field</span> 
    </span> 
</span>

Customizing the style of an invalid/valid form field:

.form-ui-invalid {
    border-color: red;
}

.form-ui-valid {
    border-color: green;
}

Customizing the text of the validity alert:

<input required data-errormessage="Hey this is required!!!" />

And now, what's the point:

1. still works without JS
2. modern browsers load only the customization code (3kb min/gzipped) and old browsers do load the additional API (about 13kb min/gzip) (forms include a lot more than just constraint validation API, for example there is also autofocus, placeholder, output and so on)

And what is with your special example, customizing the datefield?

No problem:

//configure webshims to use customizable widget UI in all browsers
$.webshims.setOptions('forms-ext', { 
    replaceUI: true
});

$.webshims.polyfill('forms forms-ext');

And also here:

1. still works without JS in modern browsers
2. modern browsers only load the UI and the UI-API glue, but not the DOM-API (valueAsNumber, valueAsDate...)

And now, here comes the best:

//configure webshims to use customizable widget UI in all non mobile browsers, but a customizable one in all desktop and all non-capable mobile browsers
$.webshims.setOptions('forms-ext', { 
    //oh, I know this is bad browser sniffing :-(
    replaceUI: !(/mobile|ipad|iphone|fennec|android/i.test(navigator.userAgent))
});

$.webshims.polyfill('forms forms-ext');

1. less file size and a better UX for mobile browsers (most clients and most designers will love you for having a different UI in mobile!!!)
2. still works without JS in modern browsers
3. modern browsers only load the UI and the UI-API glue, but not the DOM-API (valueAsNumber, valueAsDate...)

Which HTML5 forms javascript polyfill to has the broadest feature and browser reach?

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?

html5, modernizr, yepnope, webforms2 issue

1. You don't need to include yepnope inside of domready. If you do so, your "polyfilling" will take some extra time. (But, I think, webforms2 can't be loaded asnyc or defered)
2. I don't know your exact problem. There are some known issues with webforms2, but zoltan dulac and weston ruter seem to work on those.
3. I would suggest you to use webshims lib. It's a newer project and implements the current state of forms (and gives you also the possibility to include other polyfills. It also uses modernizr, but currently comes with its own scriptloader (This will be changed in future versions), but you can use yepnope to load other scripts/styles/polyfills, if you want.

regards
alex

disclosure: I'm the creator of webshims lib...

JS transpiling & polyfills vs browser support

I'd suggest learning and training your skills with modern JS and current browsers - if you need to support older browsers at some point, deal with that then. Avoid premature optimization and abstraction.

---

Related Topics