What is the meaning of polyfills in HTML5

Question

What is the meaning of polyfills in HTML5  I saw this word in many sites about HTML5  e g  HTML5-Cross-Browser-Polyfills      So here we re collecting all the shims  fallbacks  and polyfills   in order to implant HTML5 functionality in browsers that don t   natively support them    I actually don t understood what is the meaning of polyfills   Is it a new HTML5 technique or a JavaScript library  I never heard this word before HTML5   And what is the difference between shims  fallbacks  and polyfills

User · Answer

A polyfill is a piece of code  or plugin  that provides the technology that you  the developer  expect the browser to provide natively

User · Answer

First off let s clarify what a polyfil is not  A polyfill is not part of the HTML5 Standard   Nor is a polyfill limited to Javascript  even though you often see polyfills being referred to in those contexts     The term polyfill itself refers to some code that  allows you to have some specific functionality that you expect in current or    modern    browsers to also work in other browsers that do not have the support for that functionality built in     Source and example of polyfill here   http   www programmerinterview com index php html5 html5-polyfill

User · Answer

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

User · Answer

Here are some high level thoughts and info that might help  aside from the other answers  Pollyfills are like a compatability patch for specific browsers  Shims are changes to specific arguments  Fallbacks can be used if say a  mediaquery is not compatible with a browser  It kind of depends on the requirements of what your app website needs to be compatible with  You cna check this site out for compatability of specific libraries with specific browsers  https   caniuse com

User · Answer

A polyfill is a shim which replaces the original call with the call to a shim   For example  say you want to use the navigator mediaDevices object  but not all browsers support this  You could imagine a library that provided a shim which you might use like this    lt script src  js MediaShim js  gt  lt  script gt   lt script gt      MediaShim mediaDevices getUserMedia        lt  script gt    In this case  you are explicitly calling a shim instead of using the original object or method  The polyfill  on the other hand  replaces the objects and methods on the original objects    For example    lt script src  js adapter js  gt  lt  script gt   lt script gt      navigator mediaDevices getUserMedia        lt  script gt    In your code  it looks as though you are using the standard navigator mediaDevices object  But really  the polyfill  adapter js in the example  has replaced this object with its own one    The one it has replaced it with is a shim  This will detect if the feature is natively supported and use it if it is  or it will work around it using other APIs if it is not   So a polyfill is a sort of  transparent  shim  And this is what Remy Sharp  who coined the term  meant when saying  if you removed the polyfill script  your code would continue to work  without any changes required in spite of the polyfill being removed

[javascript] What is the meaning of polyfills in HTML5?

Examples related to javascript

Examples related to html

Examples related to fallback

Examples related to polyfills

Examples related to shim