Υποστήριξη Browser HTML5

Μπορείτε να βοηθήσετε τους παλιούς περιηγητές να χειρίζονται το HTML5.

Υποστήριξη Browser HTML5

Όλοι οι σύγχρονοι προγραμματιστές υποστηρίζουν το HTML5.

Επιπλέον, όλες οι προγραμματιστές, ανεξάρτητα από την ηλικία τους, θα μετατρέψουν αυτόματα τα μη αναγνωρισμένα στοιχεία σε inline στοιχεία.

Για αυτό, μπορείτε να βοηθήσετε τους παλιούς προγραμματιστές να χειρίζονται τα "άγνωστα" στοιχεία HTML.

Σημείωση:Μπορείτε حتى να διδάξετε τον IE6 της πέτρας πώς να χειρίζεται άγνωστα στοιχεία HTML.

ορίζουν τα στοιχεία HTML5 ως block-level elements

Το HTML5 ορίζει οκτώ νέαsemantical στοιχεία HTML. Όλα είναιblockστοιχεία.

Μπορείτε να χρησιμοποιήσετε το CSS display η ιδιότητα έχει ρυθμιστεί ως blockγια να διασφαλιστεί η σωστή συμπεριφορά σε παλιούς προγραμματιστές:

Παράδειγμα

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

Προσθήκη νέων στοιχείων στο HTML

Μπορείτε να προσθέσετε οποιοδήποτε νέο στοιχείο στο HTML χρησιμοποιώντας το browser trick:

Αυτό το παράδειγμα προσθέτει στο HTML ένα στοιχείο με το όνομα <myHero> νέων στοιχείων, και ορίστε το στυλ display:

Παράδειγμα

<!DOCTYPE html>
<html>
<head>
  <title>Δημιουργία Ενός στοιχείου HTML</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>

Προσπάθησε να το δοκιμάσεις

Προσθέσεις JavaScript document.createElement("myHero")，μόνο για το IE.

Πρόβλημα του Internet Explorer

Η παραπάνω λύση μπορεί να χρησιμοποιηθεί για όλα τα νέα στοιχεία HTML5, αλλά:

Σημείωση:O Internet Explorer 8 και οι προηγούμενες εκδόσεις, δεν επιτρέπουν την προσθήκη στυλ σε άγνωστα στοιχεία.

Κατά τη λύση, ο Sjoerd Visscher δημιουργήσε "HTML5 Ενεργοποίηση JavaScript", "the shiv"：

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

Το παρακάτω κώδικας είναι ένα σχόλιο, αλλά οι παλιές εκδόσεις του IE9 θα το διαβάσουν (και θα το κατανοήσουν).

Πλήρης Λύση Shiv

Παράδειγμα

<!DOCTYPE html>
<html>
<head>
  <title>Στυλινγκ Εντ5</title>
  <![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
<h1>Το Πρώτο Άρθρο μου</h1>
<article>
Η Λονδίνο είναι η πρωτεύουσα της Αγγλίας. 
Είναι η πιο πληθυσμιακή πόλη του Ηνωμένου Βασιλείου, 
με μια αστική περιοχή πάνω από 13 εκατομμύρια κατοίκους.
</article>
</body>
</html>

Προσπάθησε να το δοκιμάσεις

Η σύνδεση στο shiv κώδικα πρέπει να βρίσκεται στο στοιχείο <head>, επειδή το Internet Explorer πρέπει να γνωρίζει όλα τα νέα στοιχεία πριν από την ανάγνωση.

HTML5 Σκελετός

Παράδειγμα

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Σκελετός</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 Σκελετός</h1>
</header>
<nav>
<ul>
  <li><a href="html5_semantic_elements.asp">HTML5 Σημασιολογικά στοιχεία</a></li>
  <li><a href="html5_geolocation.asp">HTML5 Γεωθέτηση</a></li>
  <li><a href="html5_canvas.asp">Γραφικά HTML5</a></li>
</ul>
</nav>
<section>
<h1>Καταξιωμένες Πόλεις</h1>
<article>
<h2>Λονδίνο</h2>
<p>Το Λονδίνο είναι η πρωτεύουσα της Αγγλίας. Είναι η πιο πληθυσμιακή πόλη στο Ηνωμένο Βασίλειο,</p>
<p>με μια μητροπολιτική περιοχή με πάνω από 13 εκατομμύρια κατοίκους.</p>
</article>
<article>
<h2>Παρίσι</h2>
<p>Το Παρίσι είναι η πρωτεύουσα και η πιο πληθυσμιακή πόλη της Γαλλίας.</p>
</article>
<article>
<h2>Τόκιο</h2>
<p>Το Τόκιο είναι η πρωτεύουσα της Ιαπωνίας, το κέντρο της Μεγάλης Περιοχής Τόκιο.</p>
και η πιο πληθυσμιακή μητροπολιτική περιοχή στον κόσμο.</p>
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. Όλα τα δικαιώματα διατηρούνται.</p>
</footer>
</body>
</html>

Προσπάθησε να το δοκιμάσεις