Puteți preda browsere mai vechi să se ocupe de HTML5 corect.
HTML5 Suport browser
HTML5 este acceptat în toate browserele moderne.
În plus, toate browserele, vechi și noi, se ocupe în mod automat elemente nerecunoscute ca elemente inline.
Din acest motiv, aveți posibilitatea să "teach" browsere mai vechi să se ocupe de "unknown" elemente HTML.
Puteți învăța chiar IE6 (Windows XP 2001) modul în care să se ocupe de elemente HTML necunoscute.
Definirea HTML5 ca elemente bloc Elemente
HTML5 definește opt noi elemente HTML semantice. Toate acestea sunt elemente de nivel bloc.
Pentru a asigura un comportament corect în browsere mai vechi, puteți seta proprietatea de afișare CSS pentru a bloca:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Adăugarea de noi elemente HTML
Puteți adăuga, de asemenea, orice element nou în HTML cu un truc de browser.
Acest exemplu adaugă un nou element numit <myHero> HTML, și definește un stil de afișare pentru ea:
Exemplu
<!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>
Încearcă - l singur » Instructiunea JavaScript document. createElement("myHero") document. createElement("myHero") se adaugă, numai pentru a satisface IE.
Problemă cu Internet Explorer
Ai putea folosi soluția descrisă mai sus, pentru toate noile elemente HTML5, dar:
Internet Explorer 8 și mai devreme, nu permite stilul de elemente necunoscute.
Din fericire, Sjoerd Visscher a creat "HTML5 Enabling JavaScript" , " the shiv ":
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Codul de mai sus este un comentariu, dar versiunile anterioare IE9 se va citi (and understand it) - (and understand it) .
The Complete Shiv Solution
Exemplu
<!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>
Încearcă - l singur » Link - ul la shiv codul trebuie să fie plasat în <head> element, deoarece Internet Explorer trebuie să știe despre toate elementele noi , înainte de a le citi.
Un schelet HTML5
Exemplu
<!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 w3ii. All rights
reserved.</p>
</footer>
</body>
</html>
Încearcă - l singur »