{"id":16029,"date":"2013-01-09T18:01:09","date_gmt":"2013-01-09T10:01:09","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16029"},"modified":"2025-04-04T01:14:52","modified_gmt":"2025-04-03T17:14:52","slug":"html5-shiv-polyfills","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/","title":{"rendered":"A Look Into: HTML5 Shiv and Polyfills"},"content":{"rendered":"<p class=\"note\"><strong>Updates:<\/strong> Loading Polyfills is no longer a common practice to provide compatibility. You will find that a few of these repository linked on this article are no longer actively maintained. You can head over to the last section, on <strong><a href=\"#Browserlist\">Browserlist and Babel<\/a><\/strong>, on how web developers handle browser compatibility these days.<\/p>\n<p>In our previous post we have discussed a few <a href=\"https:\/\/www.hongkiat.com\/blog\/html5-basic-elements\/\">new HTML5 elements<\/a> that are already widely used, namely <code>header<\/code>, <code>nav<\/code>, <code>footer<\/code> and <code>article<\/code>. Furthermore, if we give styles to these elements then view them <strong>in a modern browser<\/strong>, we should see the result of the styles.<\/p>\n<p>However, this is not the case when we view them in <strong>Internet Explorer 8<\/strong> and earlier (which we refer to as \u2018old browsers\u2019), somehow the styles do not seem to apply.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/html5-basic-elements\/\" class=\"ref-block__link\" title=\"Read More: HTML5 Basic Elements: Header, Nav, and Footer\" rel=\"bookmark\"><span class=\"screen-reader-text\">HTML5 Basic Elements: Header, Nav, and Footer<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/html5-basic-elements.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-15985 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/html5-basic-elements.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">HTML5 Basic Elements: Header, Nav, and Footer<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tHTML5 is still evolving, yet some of its new elements are ready to use today and are supported...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<p>Let\u2019s see the example below:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-shiv-polyfills\/ie8-preview.jpg?newedit\" alt=\"ie8 preview\" width=\"500\" height=\"600\"><\/figure>\n<p>This thing happens because old browsers were not built for HTML5 and therefore they don\u2019t recognize the elements, hence the styles won\u2019t be applied as well.<\/p>\n<h2>How to Solve This Problem<\/h2>\n<p>We can use this little script <code>document.createElement(elementName)<\/code> which was initially mentioned by <a href=\"https:\/\/intertwingly.net\/blog\/2008\/01\/22\/Best-Standards-Support#c1201006277\" target=\"_blank\" rel=\"noopener noreferrer\">Sjoerd Visscher in his comment<\/a>. Now, let\u2019s say we want the old browsers to recognize the <code>header<\/code> element, we can write:<\/p>\n<pre>document.createElement('header')<\/pre>\n<p>Then, when we view it in Internet Explorer<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-shiv-polyfills\/header-ie8-preview.jpg?newedit\" alt=\"header ie8 preview\" width=\"500\" height=\"280\"><\/figure>\n<p>The <code>header<\/code> element now has the styles applied, whilst the other elements remain unstyled. This script will also apply to a non-sense element, for example;<\/p>\n<pre>document.createElement('foo');<\/pre>\n<p>The script above will make Internet Explorer recognize the <code>foo<\/code> element even when there is no such element in HTML5. As for the other elements in our page, we can copy and paste the script and specify the elements we need to patch, but of course doing so is unnecessary as it has already been done with <a href=\"https:\/\/github.com\/aFarkas\/html5shiv\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>HTML5shiv<\/strong><\/a>.<\/p>\n<h2>HTML5 Shiv<\/h2>\n<p>The script above was actually the inspiration behind the HTML5shiv development.<\/p>\n<p>HTML5shiv is a library to enable all new HTML5 elements and sectioning in the old browsers. We only need to link this library to our document and put it inside Internet Explorer conditional comments, as follows;<\/p>\n<pre>\r\n&lt;!--[if lt IE 9]&gt;\r\n&lt;script type=\"text\/javascript\" src=\"html5shiv.js\"&gt;&lt;\/script&gt;\r\n&lt;![endif]--&gt;\r\n<\/pre>\n<p>That way, the library will only be <strong>loaded in Internet Explorer 8<\/strong> and below, as the other browsers won\u2019t need it. Now, when we view our webpage in IE, all the elements should have their styles.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-shiv-polyfills\/html5shiv-ie8-preview.jpg?newedit\" alt=\"html5shiv\" width=\"500\" height=\"380\"><\/figure>\n<ul class=\"download download-2c\">\n<li><a target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/html5-shiv-polyfills\/\" rel=\"noopener noreferrer\">View Demo<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/html5-shiv-polyfills\/\" rel=\"noopener noreferrer\">Download Source<\/a><\/li>\n<\/ul>\n<h2>Polyfills<\/h2>\n<p>We have covered about <a target=\"_blank\" href=\"https:\/\/remysharp.com\/2010\/10\/08\/what-is-a-polyfill\/\" rel=\"noopener noreferrer\">Polyfills<\/a> several times through our <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/tag\/series-html5-css3-tuts\/\/\" rel=\"noopener noreferrer\">HTML5 tutorials<\/a>. This term was initially coined by <a href=\"https:\/\/remysharp.com\/2010\/10\/08\/what-is-a-polyfill\/\" target=\"_blank\" rel=\"noopener noreferrer\">Remy Sharp<\/a>, he described it a: <em>\u201cA piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.\u201d<\/em><\/p>\n<p>As we can see from his description, <strong>Polyfills<\/strong> basically have the same purpose as HTML5shiv, but in this case, Polyfills will also mimic the functionality of the elements.<\/p>\n<p>There are already a bunch of Polyfills for every new browser feature, <a href=\"https:\/\/github.com\/Modernizr\/Modernizr\/wiki\/HTML5-Cross-Browser-Polyfills\" target=\"_blank\" rel=\"noopener noreferrer\">here is the complete list<\/a>. And, the best way to use Polyfills is to load it along with <a href=\"https:\/\/modernizr.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Modernizr<\/a>, let\u2019s see the following example;<\/p>\n<pre>\r\nModernizr.load({\r\n  test: Modernizr.placeholder,\r\n  nope: 'placeme.js'\r\n});\r\n<\/pre>\n<p>Modernizr, in this example, tests the <code>placeholder<\/code> feature and will deliver the Polyfills, <strong>only if it turns out the browser does not support the specified feature<\/strong>.<\/p>\n<p class=\"note\"><strong>Recommended Reading<\/strong>: <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/html5-details-summary-tags\/\" rel=\"noopener noreferrer\">How to use HTML5 &lt;details&gt; and &lt;summary&gt; element<\/a><\/p>\n<h2 id=\"Browserlist\">Using Browserlist and Babel<\/h2>\n<p>Most of Internet users may now be using an evergreen modern browser that adding polyfills to shim some of the HTML5 or CSS3 feature is rarely needed these days. Still we sometimes need to support some older version of the browsers. But rather than creating and loading multiple polyfill scripts, we are now able to convert new our code to be compatible with some of the older browser using <a href=\"https:\/\/babeljs.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Babel<\/a> and <a href=\"https:\/\/github.com\/browserslist\/browserslist\" target=\"_blank\" rel=\"noopener noreferrer\">Browserlist<\/a>.<\/p>\n<p>The first thing you need to have installed on your computer are Node.js and NPM, and intalling a few NPM modules namely <code>@babel\/cli<\/code>, <code>@babel\/core<\/code>, <code>@babel\/plugin-transform-runtime<\/code>, <code>@babel\/preset-env<\/code>, and <code>@babel\/runtime<\/code>.<\/p>\n<p>Then, add the <code>browserlist<\/code> configuration to the <code>package.json<\/code> file. Below we expect to support browser with at least 2% usage, Internet Explorer 11, and Safari 9 or the latest.<\/p>\n<pre>\r\n  {\r\n    \"name\": \"bable-example\",\r\n    \"version\": \"0.0.1\",\r\n    \"devDependencies\": {\r\n      \"@babel\/cli\": \"^7.8.3\",\r\n      \"@babel\/core\": \"^7.8.3\",\r\n      \"@babel\/plugin-transform-runtime\": \"^7.8.3\",\r\n      \"@babel\/preset-env\": \"^7.8.3\"\r\n    },\r\n    \"browserslist\": \"&gt; 2%, ie 11, safari &gt;= 9\",\r\n    \"dependencies\": {\r\n      \"@babel\/runtime\": \"^7.8.3\"\r\n    }\r\n}\r\n<\/pre>\n<p>Now assuming we have written a modern syntax such as the <code>const<\/code> keyword, the arrow function, which will only work in modern browsers.<\/p>\n<pre>\r\nconst foo = [ 'bar', 'baz' ];\r\nfoo.forEach((val) =&gt; console.log(val));\r\n<\/pre>\n<p>We can run this command below:<\/p>\n<pre>\r\nnpx babel script.js --out-file script-compiled.js\r\n<\/pre>\n<p>The command will create a new file of our <code>script.js<\/code> to <code>script-compiled.js<\/code> and convert the script to:<\/p>\n<pre>\r\nvar foo = ['bar', 'baz'];\r\nfoo.forEach(function (val) {\r\n  return console.log(val);\r\n});  \r\n<\/pre>\n<p>Let\u2019s get a more complex example with defining an async function in JavaScript, for example:<\/p>\n<pre>\r\nasync function getData() {\r\n  console.log('1');\r\n\r\n  await fetch('http:\/\/localhost:3000\/foo')\r\n      .then(resp =&gt; resp.json())\r\n      .then(data =&gt; console.log(data));\r\n  \r\n  console.log('2');\r\n}\r\n<\/pre>\n<p>Babel will compile this code into so it could work in several other browsers that will work in some older browsers:<\/p>\n<pre>\r\n\"use strict\";\r\n\r\nvar _interopRequireDefault = require(\"@babel\/runtime\/helpers\/interopRequireDefault\");\r\nvar _regenerator = _interopRequireDefault(require(\"@babel\/runtime\/regenerator\"));\r\nvar _asyncToGenerator2 = _interopRequireDefault(require(\"@babel\/runtime\/helpers\/asyncToGenerator\"));\r\n\r\nfunction getData() {\r\n  return _getData.apply(this, arguments);\r\n}\r\n\r\nfunction _getData() {\r\n  _getData = (0, _asyncToGenerator2[\"default\"])(\r\n  \/*#__PURE__*\/\r\n  _regenerator[\"default\"].mark(function _callee() {\r\n    return _regenerator[\"default\"].wrap(function _callee$(_context) {\r\n      while (1) {\r\n        switch (_context.prev = _context.next) {\r\n          case 0:\r\n            console.log('1');\r\n            _context.next = 3;\r\n            return fetch('http:\/\/localhost:3000\/foo').then(function (resp) {\r\n              return resp.json();\r\n            }).then(function (data) {\r\n              return console.log(data);\r\n            });\r\n\r\n          case 3:\r\n            console.log('2');\r\n\r\n          case 4:\r\n          case \"end\":\r\n            return _context.stop();\r\n        }\r\n      }\r\n    }, _callee);\r\n  }));\r\n  return _getData.apply(this, arguments);\r\n}\r\n<\/pre>\n<h2>Final Thoughts<\/h2>\n<p>Web development has so much changed since I got started about 10 years ago. As we built dynamic apps not just plain static pages, the way we need to craft the Web has also evolved to follow the needs.<\/p>\n<p>Here we\u2019ve seen how Babel could translate of a modern code to be compatible with an old browser. In the real project, you will usually integrate Babel to a build tool like Webpack, Parcel, Rollup, and you can check out the following reference for more on using Babel.<\/p>\n<ul>\n<li><a href=\"https:\/\/babeljs.io\/en\/setup\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Setup Babel<\/a><\/li>\n<li><a href=\"http:\/\/ejohn.org\/blog\/html5-shiv\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML5 Shiv<\/a><\/li>\n<li><a href=\"https:\/\/www.paulirish.com\/2011\/the-history-of-the-html5-shiv\/\" target=\"_blank\" rel=\"noopener noreferrer\">The History of HTML5shiv<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Updates: Loading Polyfills is no longer a common practice to provide compatibility. You will find that a few of these repository linked on this article are no longer actively maintained. You can head over to the last section, on Browserlist and Babel, on how web developers handle browser compatibility these days. In our previous post&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>HTML5: Shiv and Polyfills<\/title>\n<meta name=\"description\" content=\"Updates: Loading Polyfills is no longer a common practice to provide compatibility. You will find that a few of these repository linked on this article\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Look Into: HTML5 Shiv and Polyfills\" \/>\n<meta property=\"og:description\" content=\"Updates: Loading Polyfills is no longer a common practice to provide compatibility. You will find that a few of these repository linked on this article\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-01-09T10:01:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:14:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html5-shiv-polyfills\/ie8-preview.jpg?newedit\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-shiv-polyfills\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-shiv-polyfills\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"A Look Into: HTML5 Shiv and Polyfills\",\"datePublished\":\"2013-01-09T10:01:09+00:00\",\"dateModified\":\"2025-04-03T17:14:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-shiv-polyfills\\\/\"},\"wordCount\":831,\"commentCount\":15,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-shiv-polyfills\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-shiv-polyfills\\\/ie8-preview.jpg?newedit\",\"keywords\":[\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-shiv-polyfills\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-shiv-polyfills\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-shiv-polyfills\\\/\",\"name\":\"HTML5: Shiv and Polyfills\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-shiv-polyfills\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-shiv-polyfills\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-shiv-polyfills\\\/ie8-preview.jpg?newedit\",\"datePublished\":\"2013-01-09T10:01:09+00:00\",\"dateModified\":\"2025-04-03T17:14:52+00:00\",\"description\":\"Updates: Loading Polyfills is no longer a common practice to provide compatibility. You will find that a few of these repository linked on this article\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-shiv-polyfills\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-shiv-polyfills\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-shiv-polyfills\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-shiv-polyfills\\\/ie8-preview.jpg?newedit\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-shiv-polyfills\\\/ie8-preview.jpg?newedit\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-shiv-polyfills\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Look Into: HTML5 Shiv and Polyfills\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML5: Shiv and Polyfills","description":"Updates: Loading Polyfills is no longer a common practice to provide compatibility. You will find that a few of these repository linked on this article","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/","og_locale":"en_US","og_type":"article","og_title":"A Look Into: HTML5 Shiv and Polyfills","og_description":"Updates: Loading Polyfills is no longer a common practice to provide compatibility. You will find that a few of these repository linked on this article","og_url":"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-01-09T10:01:09+00:00","article_modified_time":"2025-04-03T17:14:52+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html5-shiv-polyfills\/ie8-preview.jpg?newedit","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"A Look Into: HTML5 Shiv and Polyfills","datePublished":"2013-01-09T10:01:09+00:00","dateModified":"2025-04-03T17:14:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/"},"wordCount":831,"commentCount":15,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-shiv-polyfills\/ie8-preview.jpg?newedit","keywords":["HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/","url":"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/","name":"HTML5: Shiv and Polyfills","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-shiv-polyfills\/ie8-preview.jpg?newedit","datePublished":"2013-01-09T10:01:09+00:00","dateModified":"2025-04-03T17:14:52+00:00","description":"Updates: Loading Polyfills is no longer a common practice to provide compatibility. You will find that a few of these repository linked on this article","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html5-shiv-polyfills\/ie8-preview.jpg?newedit","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-shiv-polyfills\/ie8-preview.jpg?newedit"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Look Into: HTML5 Shiv and Polyfills"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4ax","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=16029"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16029\/revisions"}],"predecessor-version":[{"id":73562,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16029\/revisions\/73562"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=16029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=16029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=16029"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=16029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}