JavaScript fallback for HTML5 elements in non-supported browsers

Last updated on

6 October 2020

Overview

Most browsers support the new HTML5 elements already. However, Internet Explorer versions 8 and below do not recognize the new elements, such as <section> and <article>, and don’t allow them to be styled with CSS by default. This could have been a major blocker for HTML5 adoption. Luckily, back in 2008, Sjoerd Visscher, commented that there is an easy solution for this problem:

Btw, if you want CSS rules to apply to unknown elements in IE, you just have to do document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist.

Afterward, John Resig wrote a blog post about it in which he named the technique HTML5 Shiv. Remy Sharp then created the HTML5 Shiv script using that technique, along with additional fixes for printing in IE by Jonathan Neal. The HTML5 Shiv has since become the De-facto standard among developers for overcoming this problem.

Although Drupal 8 will not be released for a couple of years, IE 8 will be with us for a while. IE 9 requires the Vista operating system, and IE10 will require Windows 7. According to Wikipedia, ~40% of Windows users are using Windows XP, which Microsoft intends to offer extended support for until 2014.

There is one caveat to using this technique: it only works when JavaScript is enabled. However, this is not of great concern given recent studies on how many users actually browse the web with JavaScript disabled. Below are details of 2 studies completed recently:

These studies (which are not limited to any specific browser) indicate that no more than 1-3% of users have JavaScript disabled. When we take into account that the HTML5 element issue only applies to Internet Explorer 8 and below, those numbers get even smaller.

Proposed Solution

Include the HTML5 Shiv script to solve the problem out of the box with Drupal core. Consider the use case of Internet Explorer 8 and below with JavaScript disabled an edge case that we don’t need to worry about in Drupal core.

Of course we cannot dictate the requirements of those using Drupal in the wild. If the need arises for this edge case to be supported, the Legacy theme will exist in contrib to solve this problem.

The following links refer to issues where discussion and actual changes related to this topic are being held. Feel free to get involved by commenting on them:

#1077878: Add HTML5shiv to core
#865536: drupal_add_js() is missing the 'browsers' option

The following links refer to documentation pages that will need to be modified and/or updated to include more information: