Wsparcie przeglądarek HTML5

Pomóż starszym przeglądarkom obsługiwać HTML5.

Wsparcie przeglądarek HTML5

Wszystkie współczesne przeglądarki wspierają HTML5.

Ponadto, wszystkie przeglądarki, niezależnie od ich wersji, automatycznie traktują nieznane elementy jako elementy wewnętrzne.

Dzięki temu możesz pomóc przestarzałym przeglądarkom obsługiwać "nieznane" elementy HTML.

Komentarz:Możesz nawet nauczyć przestarzałego IE6, jak obsługiwać nieznane elementy HTML.

definiowanie elementów HTML5 jako elementów blokowych

HTML5 zdefiniował osiem nowychsemantyczne HTML. Wszystkie sąelementy blokoweelementów.

Możesz użyć CSS display ustawienie atrybutu block, aby zapewnić poprawne zachowanie w przestarzałych przeglądarkach:

Przykład

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

Dodawanie nowych elementów do HTML

Możesz dodać do HTML dowolny nowy element za pomocą tricka przeglądarki:

W tym przykładzie dodaliśmy do HTML element o nazwie <myHero> nowych elementów HTML i zdefiniować dla nich styl display:

Przykład

<!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>

Spróbuj sam

Dodane polecenia JavaScript document.createElement("myHero"), ale tylko dla IE.

Problem Internet Explorer

Powyższa metoda może być używana dla wszystkich nowych elementów HTML5, ale:

Uwaga:Internet Explorer 8 oraz wcześniejsze wersje nie pozwalają dodawać stylów do nieznanych elementów.

Na szczęście, Sjoerd Visscher stworzył "HTML5 Enabling JavaScript", "the shiv":

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Powyższy kod jest komentarzem, ale wcześniejsze wersje IE9 będą go czytać (i rozumieć).

Całkowite rozwiązanie Shiv

Przykład

<!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>Moje Pierwsze Artykuł</h1>
<article>
Londyn jest stolicą Anglii. 
To najbardziej zaludnione miasto w Wielkiej Brytanii, 
z obszarem metropolitalnym przekraczającym 13 milionów mieszkańców.
</article>
</body>
</html>

Spróbuj sam

Link do kodu shiv musi się znaleźć w elemencie <head>, ponieważ Internet Explorer musi znać wszystkie nowe elementy przed ich odczytaniem.

HTML5 Szkielet

Przykład

<!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>
</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">Grafika HTML5</a></li>
</ul>
</nav>
<section>
<h1>Wielkie miasta</h1>
<article>
<h2>London</h2>
<p>London jest stolicą Anglii. Jest najbardziej zaludnionym miastem w Zjednoczonym Królestwie,</p>
<p>z metropolitalnym obszarem ponad 13 milionów mieszkańców.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris jest stolicą i najbardziej zaludnionym miastem Francji.</p>
</article>
<article>
<h2>Tokio</h2>
<p>Tokio jest stolicą Japonii, centrum Greater Tokyo Area,</p>
i najbardziej zaludnionego metropolitalnego obszaru świata.</p>
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. Wszelkie prawa zastrzeżone.</p>
</footer>
</body>
</html>

Spróbuj sam