You can teach older browsers to handle HTML5 correctly.
HTML5 Browser Support
HTML5 is supported in all modern browsers.
In addition, all browsers, old and new, automatically handle unrecognized
elements as inline elements.
Because of this, you can "teach" older browsers to handle "unknown"
HTML elements.
 |
You can even teach IE6 (Windows XP 2001) how to handle unknown HTML elements. |
|---|
Define HTML5 Elements as Block Elements
HTML5 defines eight new semantic HTML elements. All these are
block-level elements.
To secure correct behavior in older browsers, you can set the
CSS display property to block:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
display: block;
}
Adding New Elements to HTML
You can also add any new element to HTML with a browser trick.
This example adds a new element called <myHero> to
HTML, and
defines a
display style for it:
Example
<!DOCTYPE html>
<html>
<head>
<title>Creating an HTML Element</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body> </html>
<head>
<title>Creating an HTML Element</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body> </html>
The JavaScript statement document.createElement("myHero") is
added, only to satisfy IE.
Problem With Internet Explorer
You could use the solution described above, for all new HTML5 elements,
but:
|
|
Internet Explorer 8 and earlier, does not allow styling of unknown elements. |
|---|
Thankfully, Sjoerd Visscher created the "HTML5 Enabling JavaScript", "the
shiv":
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
The code above is a comment, but versions previous to IE9 will
read it (and understand it).
The Complete Shiv Solution
Example
<!DOCTYPE html>
<html>
<head>
<title>Styling HTML5</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>My First Article</h1>
<article>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</article>
</body> </html>
<head>
<title>Styling HTML5</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>My First Article</h1>
<article>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</article>
</body> </html>
The link to the shiv code must be placed in the <head> element, because Internet
Explorer needs to know about
all new elements before
reading them.
An HTML5 Skeleton
Example
<!DOCTYPE html>
<html lang="en">
<head> <title>HTML5 Skeleton</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style> </head>
<body>
<header>
<h1>HTML5 SKeleton</h1>
</header>
<nav>
<ul>
<li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
<li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
<li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
</ul>
</nav>
<section>
<h1>Famous Cities</h1>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
</section>
<footer>
<p>© 2014 example. All rights reserved.</p>
</footer>
</body>
</html>
<html lang="en">
<head> <title>HTML5 Skeleton</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style> </head>
<body>
<header>
<h1>HTML5 SKeleton</h1>
</header>
<nav>
<ul>
<li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
<li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
<li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
</ul>
</nav>
<section>
<h1>Famous Cities</h1>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
</section>
<footer>
<p>© 2014 example. All rights reserved.</p>
</footer>
</body>
</html>
No comments:
Post a Comment