Convert Figma logo to code with AI

aFarkas logohtml5shiv

This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.

9,871
2,548
9,871
73
View on GitHubView on NPM

Top Related Projects

scottjehl's avatar

Respond

11,311

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

h5bp's avatar

html5-boilerplate

56,910

A professional front-end template for building fast, robust, and adaptable web apps or sites.

necolas's avatar

normalize.css

53,073

A modern alternative to CSS resets

Modernizr's avatar

Modernizr

25,724

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Quick Overview

HTML5shiv is a JavaScript library that enables the use of HTML5 sectioning elements in legacy Internet Explorer versions (IE6-9). It allows developers to style and include HTML5 elements in older browsers that don't natively support these elements, ensuring better cross-browser compatibility.

Pros

  • Enables the use of HTML5 elements in older versions of Internet Explorer
  • Lightweight and easy to implement
  • Widely used and well-maintained
  • Improves accessibility and semantic structure of web pages

Cons

  • Only necessary for older browsers, which are becoming less common
  • May slightly increase page load time
  • Requires JavaScript to be enabled in the browser
  • Not a long-term solution as older browsers are phased out

Code Examples

  1. Basic usage:
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

This code snippet conditionally loads the HTML5shiv library for Internet Explorer versions less than 9.

  1. Using HTML5shiv with Modernizr:
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script>
    Modernizr.load({
        test: Modernizr.html5shiv,
        nope: ['https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js']
    });
</script>

This example uses Modernizr to test for HTML5 support and conditionally load HTML5shiv if needed.

  1. Styling HTML5 elements:
header, nav, article, footer {
    display: block;
}

After including HTML5shiv, you can style HTML5 elements as shown above to ensure proper rendering in older browsers.

Getting Started

To use HTML5shiv in your project, follow these steps:

  1. Include the HTML5shiv script in your HTML file, preferably in the <head> section:
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
  1. Use HTML5 elements in your markup as needed:
<header>
    <h1>My Website</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h2>Welcome to my website</h2>
        <p>This is an example of using HTML5 elements.</p>
    </article>
</main>
<footer>
    <p>&copy; 2023 My Website</p>
</footer>
  1. Style your HTML5 elements as desired using CSS.

Competitor Comparisons

scottjehl logo

Respond

11,311

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

Pros of Respond

  • Focused specifically on enabling responsive design in older browsers
  • Smaller file size, making it more lightweight
  • Easier to implement for responsive CSS media queries

Cons of Respond

  • Limited to media query polyfill, less comprehensive than html5shiv
  • May require additional polyfills for full HTML5 support
  • Less actively maintained, with fewer recent updates

Code Comparison

Respond:

respond.mediaQueriesSupported = function(){
    return !!(w.matchMedia && w.matchMedia("only all").matches);
};

html5shiv:

document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("aside");
document.createElement("footer");

The code snippets highlight the different focus areas of each library. Respond concentrates on media query support, while html5shiv creates new HTML5 elements for older browsers.

Both libraries serve as polyfills for older browsers, but html5shiv offers broader HTML5 support, while Respond specifically targets responsive design functionality. html5shiv is more comprehensive and actively maintained, making it suitable for projects requiring extensive HTML5 compatibility. Respond, being more lightweight and focused, may be preferable for projects primarily concerned with responsive design in legacy browsers.

h5bp logo

html5-boilerplate

56,910

A professional front-end template for building fast, robust, and adaptable web apps or sites.

Pros of html5-boilerplate

  • Comprehensive starter template with a full set of best practices and optimizations
  • Includes additional features like Apache server configs and build tools
  • Regularly updated with modern web development trends and techniques

Cons of html5-boilerplate

  • Larger file size and more complex structure, which may be overkill for simple projects
  • Steeper learning curve for beginners due to its extensive feature set
  • May require more customization to fit specific project needs

Code Comparison

html5-boilerplate (index.html):

<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">

html5shiv (html5shiv.js):

(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}
function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);

html5shiv is a lightweight JavaScript library focused solely on enabling HTML5 elements in older browsers, while html5-boilerplate is a more comprehensive starter template for web projects with additional features and optimizations.

necolas logo

normalize.css

53,073

A modern alternative to CSS resets

Pros of normalize.css

  • Broader browser compatibility, including modern browsers
  • Actively maintained and updated for current web standards
  • Preserves useful browser defaults, reducing the amount of code needed

Cons of normalize.css

  • Larger file size compared to html5shiv
  • May require additional customization for specific project needs
  • Not focused on solving HTML5 element issues in older browsers

Code Comparison

normalize.css:

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}

html5shiv:

document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");

Key Differences

  • normalize.css is a CSS reset that normalizes styles across browsers
  • html5shiv is a JavaScript library that enables HTML5 elements in older versions of Internet Explorer
  • normalize.css focuses on consistent styling, while html5shiv addresses HTML5 compatibility issues
  • html5shiv is specifically targeted at older browsers, while normalize.css has a broader scope

Use Cases

  • Use normalize.css for modern web projects requiring consistent cross-browser styling
  • Use html5shiv when supporting older browsers (particularly IE6-8) that don't recognize HTML5 elements
  • Consider using both in projects that require broad browser support and consistent styling
Modernizr logo

Modernizr

25,724

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Pros of Modernizr

  • More comprehensive feature detection for HTML5 and CSS3
  • Customizable build process to include only needed tests
  • Actively maintained with regular updates

Cons of Modernizr

  • Larger file size, potentially impacting page load times
  • More complex setup and configuration
  • May include unnecessary tests for some projects

Code Comparison

Modernizr:

Modernizr.on('webp', function(result) {
  if (result) {
    // WebP is supported
  } else {
    // WebP is not supported
  }
});

html5shiv:

<!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
<![endif]-->

html5shiv focuses solely on enabling HTML5 elements in older versions of Internet Explorer, while Modernizr provides a broader range of feature detection capabilities. html5shiv is simpler to implement but has a narrower scope. Modernizr offers more flexibility and features but requires more setup and consideration of which tests to include. The code examples demonstrate the different approaches: Modernizr uses JavaScript for feature detection, while html5shiv is typically included conditionally for older browsers.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

The HTML5 Shiv

The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.

What do these files do?

html5shiv.js

  • This includes the basic createElement() shiv technique, along with monkeypatches for document.createElement and document.createDocumentFragment for IE6-8. It also applies basic styling for HTML5 elements for IE6-9, Safari 4.x and FF 3.x.

html5shiv-printshiv.js

  • This includes all of the above, as well as a mechanism allowing HTML5 elements to be styled and contain children while being printed in IE 6-8.

Who can I get mad at now?

HTML5 Shiv is maintained by Alexander Farkas, Jonathan Neal and Paul Irish, with many contributions from John-David Dalton. It is also distributed with Modernizr.

If you have any issues in these implementations, you can report them here! :)

For the full story of HTML5 Shiv and all of the people involved in making it, read The Story of the HTML5 Shiv.

Installation

Using Bower

bower install html5shiv --save

This will clone the latest version of the HTML5 shiv into the bower_components directory at the root of your project and also create or update the file bower.json which specifies your projects dependencies.

Include the HTML5 shiv in the <head> of your page in a conditional comment and after any stylesheets.

<!--[if lt IE 9]>
	<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

Manual installation

Download and extract the latest zip package from this repositiory and copy the two files dist/html5shiv.js and dist/html5shiv-printshiv.js into your project. Then include one of them into your <head> as above.

HTML5 Shiv API

HTML5 Shiv works as a simple drop-in solution. In most cases there is no need to configure HTML5 Shiv or use methods provided by HTML5 Shiv.

html5.elements option

The elements option is a space separated string or array, which describes the full list of the elements to shiv. see also addElements.

Configuring elements before html5shiv.js is included.

//create a global html5 options object
window.html5 = {
  'elements': 'mark section customelement' 
};

Configuring elements after html5shiv.js is included.

//change the html5shiv options object 
window.html5.elements = 'mark section customelement';
//and re-invoke the `shivDocument` method
html5.shivDocument(document);

html5.shivCSS

If shivCSS is set to true HTML5 Shiv will add basic styles (mostly display: block) to sectioning elements (like section, article). In most cases a webpage author should include those basic styles in his normal stylesheet to ensure older browser support (i.e. Firefox 3.6) without JavaScript.

The shivCSS is true by default and can be set false, only before html5shiv.js is included:

//create a global html5 options object
window.html5 = {
	'shivCSS': false
};

html5.shivMethods

If the shivMethods option is set to true (by default) HTML5 Shiv will override document.createElement/document.createDocumentFragment in Internet Explorer 6-8 to allow dynamic DOM creation of HTML5 elements.

Known issue: If an element is created using the overridden createElement method this element returns a document fragment as its parentNode, but should be normally null. If a script relies on this behavior, shivMethodsshould be set to false. Note: jQuery 1.7+ has implemented his own HTML5 DOM creation fix for Internet Explorer 6-8. If all your scripts (including Third party scripts) are using jQuery's manipulation and DOM creation methods, you might want to set this option to false.

Configuring shivMethods before html5shiv.js is included.

//create a global html5 options object
window.html5 = {
	'shivMethods': false
};

Configuring elements after html5shiv.js is included.

//change the html5shiv options object 
window.html5.shivMethods = false;

html5.addElements( newElements [, document] )

The html5.addElements method extends the list of elements to shiv. The newElements argument can be a whitespace separated list or an array.

//extend list of elements to shiv
html5.addElements('element content');

html5.createElement( nodeName [, document] )

The html5.createElement method creates a shived element, even if shivMethods is set to false.

var container = html5.createElement('div');
//container is shived so we can add HTML5 elements using `innerHTML`
container.innerHTML = '<section>This is a section</section>';

html5.createDocumentFragment( [document] )

The html5.createDocumentFragment method creates a shived document fragment, even if shivMethods is set to false.

var fragment = html5.createDocumentFragment();
var container = document.createElement('div');
fragment.appendChild(container);
//fragment is shived so we can add HTML5 elements using `innerHTML`
container.innerHTML = '<section>This is a section</section>';

HTML5 Shiv Known Issues and Limitations

  • The shivMethods option (overriding document.createElement) and the html5.createElement method create elements, which are not disconnected and have a parentNode (see also issue #64)
  • The cloneNode problem is currently not addressed by HTML5 Shiv. HTML5 elements can be dynamically created, but can't be cloned in all cases.
  • The printshiv version of HTML5 Shiv has to alter the print styles and the whole DOM for printing. In case of complex websites and or a lot of print styles this might cause performance and/or styling issues. A possible solution could be the htc-branch of HTML5 Shiv, which uses another technique to implement print styles for Internet Explorer 6-8.

What about the other HTML5 element projects?

  • The original conception and community collaboration story of the project is described at The History of the HTML5 Shiv.
  • IEPP, by Jon Neal, addressed the printing fault of the original html5shiv. It was merged into html5shiv.
  • Shimprove, in April 2010, patched cloneNode and createElement was later merged into html5shiv
  • innerShiv, introduced in August 2010 by JD Barlett, addressed dynamically adding new HTML5 elements into the DOM. jQuery added support that made innerShiv redundant and html5shiv addressed the same issues as well, so the project was completed.
  • The html5shim and html5shiv sites on Google Code are maintained by Remy Sharp and are identical distribution points of this html5shiv project.
  • Modernizr is developed by the same people as html5shiv and can include the latest version in any custom builds created at modernizr.com
  • This html5shiv repo now contains tests for all the edge cases pursued by the above libraries and has been extensively tested, both in development and production.

A detailed changelog of html5shiv is available.

Why is it called a shiv?

The term shiv originates from John Resig, who was thought to have used the word for its slang meaning, a sharp object used as a knife-like weapon, intended for Internet Explorer. Truth be known, John probably intended to use the word shim, which in computing means an application compatibility workaround. Rather than correct his mispelling, most developers familiar with Internet Explorer appreciated the visual imagery. And that, kids, is etymology.

NPM DownloadsLast 30 Days