HTML and CSS Reference
In-Depth Information
HTML5 Compatibility
When using the HTML5 elements described in this topic, it is necessary to acknowledge that
older browsers, like IE8, lack the capability to recognize these elements. When browsers
can't recognize a specific tag, they simply ignore the tag and render the remaining content as
simple text. This is acceptable up to a certain point, as semantic elements are not meant for
formatting, but ignoring tags means that the browser will not structure the text in a separate
line and will treat everything as part of the same element. In addition to not representing un-
recognized elements, IE doesn't even acknowledge their existence, thus preventing us from
styling these elements with CSS.
To resolve this issue we will have to trick the older IE browser into recognizing a foreign
element by registering it with a JavaScript command. As JavaScript is beyond the scope of
this topic and beyond the scope of many web designers, we will have to resort to a strategy
called HTML5 Shiv. HTML5 Shiv is an already created fully compatible JavaScript code
developed by Sjoerd Visscher and is available online via googlecode.com. We don't have to
retrieve or understand this code to use it. Rather, we simply need to reference it in the head
section of our page like this:
<head>
<meta charset="utf-8">
<title>Curriculum Vitae</title>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
</head>
When we want to add JavaScript code to our web page, we use the <script> element. In
the example above, by using the src attribute, this element grabs the html5.js JavaScript
file from the web server at html5shiv.googlecode.com and runs it before the browser starts
processing the rest of the page, thus rendering any HTML elements properly. The script is
short, simple, loads very fast and uses code to create all the new HTML5 elements for older
browsers. Then, all we have to do is use the new elements and style them with appropriate
CSS rules.
Technically, we can solve most HTML5 issues of older, non-IE browsers with CSS rules.
Therefore, if we only want the HTML5 Shiv JavaScript code executed for IE browsers, we
can place it inside a conditional comment. A conditional comment is a special type of com-
ment that only Internet Explorer can read; it can even target specific versions of IE.
Search WWH ::
Custom Search