HTML5 Shiv and Polyfills: Quick Guide

ie8 example

Hello friends today we gonna learn about HTML5 Shiv and Polyfills: Quick Guide. So read this article, HTML5 Shiv and Polyfills: Quick Guide step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: HTML5 Shiv and Polyfills: Quick Guide

In our previous post, we discussed some new HTML5 elements that are already widely used, namely header, nav, footer, and article. In addition, if we give styles to these elements, check them out in a modern browser, we should see the result of the styles.

However, this is not the case when we look at them Internet Explorer 8 and earlier (which we refer to as ‘old browsers’), the styles somehow don’t seem to apply.

Let’s take a look at the example below:

This happens because old browsers are not built for HTML5 and therefore do not recognize the elements, so the styles are not applied.

back to menu ↑

How to Solve this problem

We can use this little script document.createElement (elementName) which was initially mentioned by Sjoerd Visscher in his comment. Now let’s say we want the old browsers to recognize the header element, we can write:

document.createElement (‘header’)

Then, when we view it in Internet Explorer

header ie8 example

Styles have now been applied to the header element, while the other elements remain unstyled. For example, this script also applies to a non-sense element;

document.createElement (‘foo’);

The above script makes Internet Explorer recognize the foo element even if there is no such element in HTML5. As for the other elements on our page, we can copy and paste the script and specify the elements we need to patch, but of course that’s not necessary as it’s already been done with HTML5shiv

back to menu ↑

HTML5 Shiv

The script above was actually the inspiration behind the HTML5shiv development.

HTML5shiv is a library to enable all new HTML5 elements and sections in the old browsers. We just need to link this library to our document and post it in Internet Explorer’s conditional comments as follows;

[if lt IE 9]>

That way the library will be alone loaded in Internet Explorer 8 and below, because the other browsers don’t need it. Now when we view our web page in IE, all elements should be styled.

html5shiv

  • Watch demo
  • Download source
back to menu ↑

Polyfills

We’ve covered Polyfills several times through our HTML5 tutorialsThis term was initially coined by Remy Sharp, who described it as, “A piece of code (or plug-in) that delivers the technology that you, the developer, expect the browser to deliver natively.”

As we can see from its description, Polyfills have basically the same purpose as HTML5shiv, but in this case Polyfills will also mimic the functionality of the elements.

There are already a number of Polyfills for every new browser feature, here is the full list. And the best way to use Polyfills is to load it together with Modernizr, let’s look at the following example;

Modernizr.load ({test: Modernizr.placeholder, no: ‘placeme.js’});

Modernizr tests the placeholder in this example feature and will deliver the Polyfills, only if it appears that the browser does not support the specified feature

back to menu ↑

With the help of Browserlist and Babel

Most internet users now may be using an evergreen modern browser that adds polyfills to fill some of the HTML5 or CSS3 feature is rarely needed nowadays. Still, we sometimes have to support an older version of the browsers. But instead of creating and loading multiple polyfill scripts, we can now convert our new code to be compatible with some of the older browser using Babel and Browserlist.

The first thing you should have installed on your computer is Node.js and NPM, and installing a few NPM modules namely @ babel / cli, @ babel / core, @ babel / plugin-transform-runtime, @ babel / preset-env, and @ babel / runtime.

Then add the browser list configuration to the package.json file. Below we expect to support a browser with at least 2% usage, Internet Explorer 11 and Safari 9 or the latest version.

{“Name”: “bable-example”, “version”: “0.0.1”, “devDependencies”: {“@ babel / cli”: “^ 7.8.3”, “@ babel / core”: “^ 7.8 .3 “,” @ babel / plugin-transform-runtime “:” ^ 7.8.3 “,” @ babel / preset-env “:” ^ 7.8.3 “},” browserslist “:”> 2%, ie 11 , safari> = 9 “,” dependencies “: {” @ babel / runtime “:” ^ 7.8.3 “}}

Assuming we have written a modern syntax, such as the const keyword, arrow function, which only works in modern browsers.

const foo = [ ‘bar’, ‘baz’ ]; foo.forEach ((val) => console.log (val));

We can run this command below:

npx babel script.js –out file script-compiled.js

The command creates a new file from our script.js to script-compiled.js and converts the script to:

var foo = [‘bar’, ‘baz’]; foo.forEach (function (val) {return console.log (val);});

Let’s get a more complex example of defining an asynchronous function in JavaScript, for example:

asynchronous function getData () {console.log (‘1’);

wait for fetch (‘http: // localhost: 3000 / foo’). then (resp => or json ()). then (data => console.log (data));

console.log (‘2’);}

Babel will compile this code so that it could work in several other browsers that will work in some older browsers:

“Use strictly”;

var _interopRequireDefault = required (“@ babel / runtime / helpers / interopRequireDefault”); var _regenerator = _interopRequireDefault (required (“@ babel / runtime / regenerator”)); var _asyncToGenerator2 = _interopRequireDefault / required (asyncToGenerator ”));

function getData () {return _getData.apply (this, arguments);}

function _getData () {_getData = (0, _asyncToGenerator2[“default”]) (/ * # __ PURE __ * / _ regenerator[“default”].mark (function _callee () {return _ regenerator[“default”]wrap(function _callee $ (_ context) {while (1) {switch (_context.prev = _context.next) {case 0: console.log (‘1’); _ context.next = 3; return fetch (‘http: // localhost: 3000 / foo ‘). then (function (resp) {return resp.json ();}). then (function (data) {return console.log (data);});

case 3: console.log (‘2’);

case 4: case “end”: return _context.stop ();}}}, _callee);})); return _getData.apply (this, arguments);}

back to menu ↑

Final Thoughts

Web development has changed so much since I started about 10 years ago. Since we have built dynamic apps, not just plain static pages, the way we should create the web has also been developed to meet the needs.

Here we saw how Babel could translate a modern code to be compatible with an old browser. In the real project, you will usually integrate Babel with a build tool such as Webpack, Parcel, Rollup, and you can check out the following reference for more information on how to use Babel.

  • Set up Babel
  • HTML5 Shiv
  • The History of HTML5shiv
back to menu ↑

HTML5 Shiv and Polyfills: Quick Guide: benefits

  • The HTML5 Shiv and Polyfills: Quick Guide tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the HTML5 Shiv and Polyfills: Quick Guide guide is free.

back to menu ↑

Faq

Tutorial summary of HTML5 Shiv and Polyfills: Quick Guide

In this guide, we told you about the HTML5 Shiv and Polyfills: Quick Guide; please read all steps so that you understand HTML5 Shiv and Polyfills: Quick Guide in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the HTML5 Shiv and Polyfills: Quick Guide, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the HTML5 Shiv and Polyfills: Quick Guide tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide HTML5 Shiv and Polyfills: Quick Guide. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the HTML5 Shiv and Polyfills: Quick Guide, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “HTML5 Shiv and Polyfills: Quick Guide”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide HTML5 Shiv and Polyfills: Quick Guide, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo
Shopping cart