7 Stimmen

[X]Benutzerdefinierte HTML-Tags: Vor- und Nachteile

Ich würde gerne einige semantische [X]HTML-Tags anstelle von <div> s: <article> , <product> , <footer> usw. Einige von ihnen sind bereits im kommenden HTML5 enthalten, werden aber nicht vollständig unterstützt.

Was sind die möglichen Nachteile, die beim Rendern auftreten können? Mit CSS, JS?

Die eine, an die ich mich erinnere, lautet: Der IE6 kann keine Tags klonen, die er nicht kennt.

7voto

theorise Punkte 6997

Durch Hinzufügen des folgenden JavaScript-Fixes funktionieren benutzerdefinierte HTML5-Tags im IE. Sie funktionieren sogar in jedem anderen Browser, den ich ausprobiert habe. Ich habe meine Website mit HTML5 erstellt, und obwohl sie im IE6 und IE7 nicht gut aussieht, funktioniert sie trotzdem. Hier ist der Code, den Sie in den Header Ihrer Vorlage einfügen:

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <style type="text/css"> .clear { zoom: 1;display: block;} </style> <![endif]-->

Die Verwendung von HTML5-Tags gibt Ihnen aufgrund ihrer semantischen Natur mehr Kontrolle über CSS. Es ist tatsächlich viel einfacher, Websites zu erstellen, da sie leichter zu verstehen sind, wenn Sie die Tags richtig verwenden.

Divs überall zu verwenden, ist in Ordnung, denn wenn sie entsprechende IDs und Klassen haben, sind sie immer noch semantisch, aber mit den HTML5-Tags kann man die Seitenstruktur viel schneller erkennen.

3voto

Fentex Punkte 31

Die Frage erwähnt "Klonen", so ob IE6 kann ein benutzerdefiniertes Element Stil (es kann) ist nicht wirklich die Frage, wenn die Absicht ist, JS zu verwenden, um benutzerdefinierte Elemente zu klonen, wenn IE6 kann nicht verwalten, dass (die ich nicht weiß).

Wenn es nur darum geht, benutzerdefinierte Elemente zu gestalten, kann jeder Browser dies tun. Wegen des IE6 müssen Sie Ihre benutzerdefinierten Elemente mit einem Namensraum versehen, also <prefix:custom />, und den Namensraum im HTML-Element angeben, also <html xmlns:prefix="http://domain/path">.

Um das Ganze in allen Browsern richtig hinzubekommen (und damit Javascript die benutzerdefinierten Elemente erkennt), müssen Sie auch eine benutzerdefinierte DTD bereitstellen, damit das Namespacing der benutzerdefinierten Elemente konsistent funktioniert, also <!DOCTYPE html SYSTEM "http://domain/path/custom.dtd"> und dann die DTD schreiben, was leider nicht trivial ist und einen vollständigen Ersatz für die HTML-DTD enthalten muss, die es ersetzt.

Nach der Anwendung einer benutzerdefinierten DTD, der Angabe eines benutzerdefinierten Namensraums und der Anwendung von benutzerdefinierten Elementen können sie also in jedem Browser so gestaltet werden: <style>prefix\:custom {background:red;} </style>.

Dies funktioniert einheitlich in allen Browsern, aber der Wert ist umstritten. Es ermöglicht die Verwendung von konsistentem, aussagekräftigem Markup mit Elementen, die klar durch den Namensraum abgegrenzt sind, und birgt nicht das Risiko einer Verunreinigung des Stylings durch Kaskadierung und vermeidet div-itis.

Es handelt sich jedoch um ein kleines Ghetto in der Webentwicklung, dessen Komplexität möglicherweise nicht ausreichend honoriert wird.

2voto

joneff Punkte 31

Selbst wenn Sie JS verwenden, um den IE 6 dazu zu bringen, HTML5-Tags zu "erkennen", werden Sie immer noch Probleme haben, da der IE 6 die Verschachtelung solcher Tags nicht zulässt.

Wenn Ihre Webseite jedoch nicht anwendungsorientiert ist, sondern lediglich der Präsentation dient, können Sie auch einfaches XML mit Styling verwenden. Dies unterscheidet sich ein wenig von der traditionellen Art, Seiten zu erstellen, aber in Bezug auf XML gibt es keine "alten" oder "neuen" Tags.

Siehe diese Seite -- http://feeds.feedburner.com/blogspot/MKuf (Blog-Feed von Google) als Beispiel für gestyltes XML. JS und DOM-APIs funktionieren genauso gut.

2voto

Paul D. Waite Punkte 92952

Das ist zwar nicht ganz zutreffend für Ihre Frage, aber <product> ist für den Computer nicht semantisch.

Ein Mensch kann es lesen und denken: "Aha, das muss ein Produkt sein, was im Kontext dieser Shopping-Website etwas bedeutet, das ich kaufen kann, und daher nicht 'eine Menge, die man durch Multiplikation von Mengen erhält', wie es auf mathoverflow.com der Fall sein könnte". Das ist für jeden Menschen, der den Code liest, wirklich nützlich, in diesem Sinne ist es also semantisch.

Aber was einen Computer betrifft, der Ihre Seite als HTML analysiert (oder einen Menschen, der Ihre HTML-Seite in einem Browser betrachtet, anstatt den Code zu lesen), so ist es nur ein unbekanntes Tag und erhält daher keine nützliche Standardgestaltung (im Gegensatz zum <p> Tag, der schöne Ränder erhält, um die Dinge auf dem Bildschirm lesbar zu machen) oder Verhalten (im Gegensatz zum <a> Tag, der anklickbar ist, wenn Sie ihm einen href Attribut).

Computer erhalten erst dann eine Semantik, wenn sich die Menschen über Spezifikationen wie HTML5 auf die Bedeutung von Tags einigen.

1voto

Dean J Punkte 37317

Wenn Sie nicht für eine sehr begrenzte Anzahl von Browsern entwickeln, ist das keine gute Idee. Wenn es überhaupt in älteren Browsern funktioniert, wird es nicht gut funktionieren; es wird Jahre dauern, bis wir von allen gängigen Browsern eine gute HTML 5-Unterstützung erwarten können.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X