Browser Support for HTML5

Viewing HTML5 in Web Browsers In previous lessons, we learned about new elements in HTML5 and how to use them. Our assumption was that all our visitors could view our pages as we intend them, no matter which web browser and version they might be using. The reality is that browser compatibility with HTML5 is a complicated issue. As the specifications for HTML5 have not been finalized yet, and the formal adoption timeline continues to change, web browser manufacturers choose to accommodate new HTML5 features on their own timelines. To us as web designers, this means that some of our visitors will see our web pages as we intended, but others might see messy or "broken" pages.

Example of Older Browser Here is the page we created earlier, rendered by two different browsers: Firefox 19.0 Internet Explorer 8.0 The IE8 browser does not recognize the new HTML5 semantic elements and so it will not apply any CSS styling to those elements, making our page a mess.

Current Status of Browser Support So how do we know which browsers support HTML5? One way is to visit the caniuse.com website and to click on the feature we are interested in. From this chart, we see that all current browser versions support the new semantic elements, with the exeption of Opera Mini, which offers just partial support. Future versions and their expected level of support are shown in the faded boxes below the current versions. The site estimates the percentage of global users whose current browser supports the target feature. In this case, about 89% of the world's users will see our page as intended.

Planning for Older Browsers Microsoft's Internet Explorer (IE) unfortunately has the slowest adoption rate of HTML5 features. This is a headache to web designers, but a reality that must be accommodated. The HTML5 elements we covered thus far (i.e. semantic elements) are among the best adopted by today's browsers. As we continue in this course, other features we learn will have lower support rates. The good news is that there are several strategies we can employ to improve the user experience for those visitors with older browsers. We will discuss some of these "workarounds" and "fallbacks" in this lesson and also as we introduce other HTML5 features in the future.

CSS Display Property We have not yet covered the display property in CSS. It controls the way an element is displayed on the page. There are numerous possible settings, but these three are the most important: display: inline [no line breaks before or after the element] display: block [automatically apply line breaks before and after the element] display: none [hides the element from showing on the page] Some elements - such as <p>, <h1>, and <div> - are known as block-level elements, as they have line breaks by default. Other elements - such as <a> and <span> - are called inline elements and do not add line breaks by default. Older browsers that do not recognize the new HTML5 elements assume they are all inline elements, causing them to display all jumbled together. We can fix this issue by adding a single line of CSS to our website.

Workaround: Using CSS Let's add the following line to our CSS styling document: article, aside, figcaption, figure, footer, header, hgroup, nav, section { display: block; } By placing this line in the CSS files for all of our HTML5 sites, older browsers versions of Firefox, Chrome, Opera, and Safari will now treat the new semantic elements as block elements, preventing the page from displaying as a jumble on the screen. Newer browsers that recognize and support HTML5 elements will not be affected by this CSS line, as they already treat these as block elements. Unfortunately, this workaround alone will not suffice for Internet Explorer versions 8.0 and earlier. These earlier versions of IE refuse to apply any CSS styling at all to unrecognized elements. To accommodate those versions of IE, we will need to bring out a bigger weapon: JavaScript.

Workaround: Using JavaScript JavaScript is a programming language created specifically to run on web browsers. It provides web designers with a powerful way to perform advanced tasks beyond the capability of regular HTML and CSS. Learning how to program in JavaScript is beyond the scope of this course, but we'll take a quick look at some JavaScript code here: <script> document.createElement('article'); document.createElement('aside'); document.createElement('figcaption'); document.createElement('figure'); document.createElement('footer'); document.createElement('header'); document.createElement('hgroup'); document.createElement('nav'); document.createElement('section'); </script> JavaScript is placed between opening and closing <script> tags. Scripts can be placed almost anywhere in the web document but are most commonly placed in the <head> section. The JavaScript code in this example is telling the web browser to recognize the new HTML5 semantic elements as valid elements, thus allowing them to be styled via CSS. Whenever we add JavaScript to a web page, we must be mindful that a certain number of web visitors (approximately 2%) will either have JavaScript disabled or be on a device that does not support it.

JavaScript Shortcut Instead of adding the previous lines to each of our documents, we can take a shortcut by loading a free script directly from Google: <head> <title>Book Reviews</title> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> ... </head> By adding this single line to our web pages, IE 8.0 will now recognize all new HTML5 elements and will allow CSS styling to be applied. The Google script above defines many more HTML5 elements, not just the ones we have covered thus far. An additional advantage of using the script is that it will run only if an older browser version is detected. Internet Explorer 8.0 with JavaScript workaround

Browser Support Strategy If we include mobile browsers (such as those used in Apple and Android phones and tablets), at least a dozen major browsers are in current use. Each major browser has multiple versions in its history, and HTML5 support varies widely by both browser and version. As web designers, it is our responsibility to ensure that our pages are viewable in a reasonably acceptable format to the vast majority of visitors, regardless of which browser and version they might be using. To accomplish this and still use HTML5 in our pages, we use two types of strategies: Workarounds: additional coding (such as that used in this lesson) to "trick" older browsers into displaying our page the same way an updated browser would display it. Fallbacks: in the event that no workaround is possible, we can deliver alternate content to those with non-compliant browsers. We will see examples of this later in the course.