Dies ist der letzte Artikel in unserer Serie zu HTML5. In diesem Abschnitt werden wir uns kurz ansehen, welche neuen HTML5-Technologien von wichtigen Browsern offiziell unterstützt werden. Außerdem werden einige Techniken erläutert, mit denen Sie die neuen Elemente in Ihrer heutigen Kodierung nutzen können. Abschließend besprechen wir, wie Sie mit der Vorbereitung von HTML5 auf allen Websites beginnen sollten, die Sie von hier aus erstellen.
Welche Funktionen werden von großen Browsern offiziell unterstützt?
In diesem Artikel definieren wir "offizielle Unterstützung". wie in der Dokumentation des Entwicklers des Browsers aufgeführt. Dadurch wird sichergestellt, dass keine Hacks oder Tricks erforderlich sind, um die neuen Funktionen zu nutzen. Stattdessen wird die native Implementierung direkt von der Quelle aus betrachtet. Schauen wir uns daher die aktuellen Iterationen einiger großer Browser an.
Firefox 3.5
Gehen Sie zur Firefox-Entwicklerseite und Sie erhalten eine kurze Beschreibung zur HTML5-Unterstützung. Hier ist eine Liste der unterstützten Funktionen:
- Audioelement
- Videoelement
- Canvas-Element
- Offline-Ressourcenspezifikation
- Drag-and-Drop-API
Safari 4
In der Liste der Features von Safari 4 wird die Unterstützung für die folgenden Features erwähnt:
- Audio- und Videoelemente (und zugehörige API)
- Canvas-Element (eigentlich von Apple für Dashboard erstellt)
- Offline-Anwendungsunterstützung
Internet Explorer 8
Obwohl das Internet Explorer Developer Center "starke Unterstützung" verlangt? Für HTML5 scheint das Canvas-Element (wahrscheinlich aufgrund von Silverlight), Audio- / Video-Elemente oder die Offline-Anwendungs-API nicht unterstützt zu werden. Hier ist eine vollständige Liste der von IE 8 unterstützten Elemente, von denen keines ausschliesslich aus HTML5 stammt. Ich habe jedoch die Unterstützung der neuen Cross-Document Messaging-API erwähnt. Teilen Sie alle Ressourcen, die Sie über die HTML5-Unterstützung in IE 8 verfügen, mit den nachstehenden Kommentaren.
Opera 10
Die Entwicklerseite von Opera hat im Januar einen Artikel über HTML5 veröffentlicht, der vorhandene Unterstützung enthält. Hier sind die Funktionen, die der Artikel derzeit in Opera 10 unterstützt:
- Videoelement
- Canvas-Element
- Dokumentübergreifendes Messaging
- Vom Server gesendete Ereignisse
- Web Forms 2.0
Außerdem finden Sie hier einen Bericht über aktuelle Webspezifikationen, die in Opera Presto 2.3 (Opera-Rendering-Engine) unterstützt werden.
Google Chrome
Da ich keine offizielle Liste direkt bei Google finden konnte, musste ich mich einem Artikel von O'reilly zuwenden, in dem er eine Rede von Googles VP of Engineering zu HTML5 und der Zukunft der Web-Technologien hielt. In seiner Rede listete Vic Gundotra die folgenden Funktionen auf, die von Google Chrome (sowie Firefox, Safari und Opera) unterstützt werden:
- Videoelement
- Canvas-Element
- Geolocation-API
- App-Cache (Offline-Wep-App-API)
- Datenbank-API
- Web Workers (Hintergrund-Thread-Verarbeitung)
Betrug
Wie Sie sehen, unterstützen selbst Browser, die am meisten HTML5 unterstützen, noch nicht einmal die Hälfte der neuen Funktionen und Elemente, die wir in den letzten Artikeln besprochen haben, nativ. Was bedeutet, HTML5 heute zu verwenden, ist nicht so einfach wie das Einfügen der erlernten semantischen Änderungen. Was wir brauchen, ist ein Weg, um die neuen Elemente in HTML5 nur mit den heute weit verbreiteten und unterstützten Web-Technologien zu erstellen. Wie sich herausstellt, bietet JavaScript eine einfache, native Methode, um genau dies zu tun! Durch die Nutzung document.createElementkönnen wir unsere eigenen benutzerdefinierten Elemente erstellen, die den Spezifikationen der in HTML5 unterstützten entsprechen. Sicher, es ist ein bisschen ein Hack, aber es ist das Beste, was Sie in naher Zukunft an alle neuen Elemente bekommen können. Verwenden Sie das Beispiel aus unserem vorherigen Artikel, um zu sehen, wie das aussehen würde.
Wie Sie sehen, verwendet diese Seite die nur HTML5-Elemente Header, Fußzeile, Artikel, beiseite, Navi und Abschnitt. Um dies zu erreichen, müssen wir nur diese Elemente in JavaScript erstellen:
Voila! Jetzt können Sie diese Elemente in CSS so anvisieren, als wären sie native Elemente. Warnung: Diese Methode kann zu sehr unterschiedlichen Ergebnissen führen und sollte auf eigenes Risiko angewendet werden. Wenn jemand Ihre Website mit deaktiviertem JavaScript besucht, greift Ihr CSS nicht und Ihre schöne, hübsche HTML5-Website sieht aus, als wäre sie von Godzilla angegriffen worden. Diese Methode eignet sich jedoch hervorragend für eigene Experimente und sollte mit allen gängigen Browsern funktionieren.
Weitere Tests
In meinen eigenen Tests schienen sowohl Safari als auch Firefox alle oben aufgeführten neuen Elemente ohne jegliches JavaScript zu handhaben. Wenn Sie sich den Code ansehen, können Sie feststellen, dass die eigene Safari 4-Seite von Apple mehrere neue HTML5-Elemente verwendet und nur im Fall von Internet Explorer JavaScript implementiert. Probieren Sie dies in Ihrem Browser aus und lassen Sie uns wissen, was Sie sich vorstellen!
Vorbereiten für HTML5
Auf seiner Website macht Jon Tangerine den Vorschlag, dass wir uns auf HTML5 vorbereiten sollten, indem wir uns an die Struktur der semantischen Änderungen gewöhnen. Was dies praktisch bedeutet, ist ziemlich einfach. Verwenden Sie Klassen, um die Struktur einer HTML5-Seite nachzuahmen.Diese Methode ist nicht browserspezifisch, erfüllt alle gängigen Standards, ist nicht auf Skripte angewiesen und lässt sich sehr einfach implementieren. Zum Beispiel würden wir alle Header-Tags im obigen Code verwenden und diese in konvertieren
Wenn Sie sich wirklich auf HTML5 vorbereiten möchten, werfen Sie nicht einfach die Begriffe Kopfzeile, Fußzeile, Abschnitt usw. herum. Zwingen Sie sich dazu, diese Begriffe semantisch zu verwenden, als wären sie die eigentlichen HTML5-Elemente. In erster Linie bedeutet dies die Verwendung von Klasse anstatt Ich würde wo anwendbar. Es bedeutet auch, die strengen HTML5-Richtlinien für jedes Element einzuhalten (im vorigen Artikel beschrieben). Ein Beispiel dafür wäre, nur a zu verwenden nav Klasse in den wichtigsten Navigationsbereichen einer Seite und nicht für kleinere Navigationslinks, z. B. solche, die in einem Seitenfuß zu finden sind.
5 Sites mit HTML5
Trotz der Tatsache, dass mein offizieller Rat ist, dass HTML5 für einige Zeit nicht für die allgemeine Verwendung bereit ist, muss ich Websites bewundern, die die Initiative ergreifen, um die Zukunft der Webentwicklung durch den Einsatz von HTML5 heute einzuleiten. Hier sind fünf Websites, die genau das tun. Klicken Sie einfach auf ein Bild, um die Website anzuzeigen. Schauen Sie sich den Code an, den die einzelnen Entwickler verwendet haben, um sich ein Bild von der Struktur einiger realer HTML5-Beispiele zu machen. Wenn Sie eine Site in HTML5 entwickelt haben, möchten wir sie auch sehen! Hinterlassen Sie eine URL in den Kommentaren, damit wir sie überprüfen können.
Fazit
Nun, das schließt unsere vierteilige Serie zu HTML5 ab. Wir haben die Grundlagen besprochen, wie man einige neue Elemente auswählt, bedeutende semantische Änderungen vornimmt und wie man HTML5 jetzt implementiert. Ich hoffe, Sie haben eine Menge gelernt und sind jetzt aufgeregter und weniger besorgt über die Zukunft von HTML. Ihr Feedback ist entscheidend für die Artikel, die wir schreiben, also sagen Sie uns, was Sie von der Serie hielten und was Sie gerne in der Zukunft sehen würden.