Mozilla X-Tag: HTML-Elemente selbst definiert

Angenommen, wir benötigen ein Accordion-Element auf unserer Website. Dreamweaver-Nutzer verlassen sich auf Spry, alle anderen gehen unterschiedliche Wege. Einer der beliebtesten dürfte dabei der Weg über jQuery UI sein, das Accordions als Widget implementiert hat. Aber wäre es nicht noch wesentlich einfacher, wenn man ein HTML-Element namens Accordion hätte? Semantischer wäre es in jedem Falle. X-Tag, ein Projekt aus dem Hause Mozilla, verspricht, genau das zu leisten.

X-Tag: Javascript-Bibliothek mit großen Ambitionen

Das Prinzip des Konzepts erklärt man am besten über einen Blick in den Quellcode mit und ohne X-Tag. Bleiben wir beim Beispiel des Accordion. MIt jQuery UI umgesetzt, sehen die wesentlichen Codebereiche so aus.

Erst binden wir die erforderlichen Bibliotheken nebst Function-Call im Head der Seite ein:

1
2
3
4
5
6
7
8
9
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
  <script>
  $(document).ready(function() {
    $("#accordion").accordion();
  });
  </script>

Im Body bauen wir dann das Accordion wie folgt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="accordion">
	<h3><a href="#">Abschnitt 1</a></h3>
	<div>
		<p>
		Text des Abschnitts 1
		</p>
	</div>
	<h3><a href="#">Abschnitt 2</a></h3>
	<div>
		<p>
		Text des Abschnitts 2
		</p>
	</div>
</div>

Jetzt das gleiche Beispiel, umgesetzt mit X-Tag:

1
2
3
4
5
6
7
8
<x-accordion>
    <x-toggler selected="true">Abschnitt 1</x-toggler>
    <div>Text des Abschnitts 1</div>
 
    <x-toggler>Abschnitt 2</x-toggler>
    <div>Text des Abschnitts 2</div>
 
</x-accordion>

Nicht unterschlagen werden soll natürlich noch die erforderliche Einbindung der Bibliothek xtag.js, sowie der JS-Datei des entsprechenden Elements, wobei hier alle zu verwendenden Elemente in eine Datei geschrieben werden sollten.

Dennoch bleibt das zweite Beispiel lesbarer, kürzer und benötigt weit weniger Overhead in Form von einzubindenden Funktionsbibliotheken. Natürlich steckt hinter der Fassade ein ganzes Stück Arbeit. Denn das Accordion muss dennoch programmiert sein. X-Tag stützt sich locker auf das W3C-Arbeitspapier zu Custom Elements und wird nach Angaben der Entwickler im Verlauf des Standardisierungsverfahrens die interne Logik stets so anpassen, dass sie standardkonform bleibt oder wird.

Auf der Demo-Seite zum Projekt zeigt das Mozilla-Team ein paar gelungene Beispiele, darunter das bereits angesprochene Accordion. Auch die Tab-Box und die Slide-Box, sowie das Modal Window wissen zu überzeugen. Aktuell arbeitet man an der Schaffung einer Plattform, auf der Entwickler ihre Custom Elements anderen zur Verfügung stellen können.

X-Tag ist lauffähig unter folgenden Browsern: Firefox 5+ (Desktop und mobil), Chrome 4+, Android-Webkit 2.1+. IE 10 und Opera 12+. Damit empfiehlt es sich naheliegenderweise nicht für einen flächendeckenden Einsatz. Der Sourcecode des Projekts, das bislang unter dem Namen „Mozilla Web Components“ firmierte, ist auf GitHub hier zu finden.

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Sortiert nach:   neueste | älteste | beste Bewertung
Oink
Gast

Interessanter Artikel, ich frage mich nur wie Google die X-Tags von der Semantik her auswertet oder in Zukunft auswerten wird. Bei dem Beispiel des Accordion würde ich eher eine UL / LI nehmen, wo die Überschriften z.B. H2-Tags wären. Wahrscheinlich ignoriert Google diese X-Tags einfach und liest es als normalen fließenden Text.

Martin Fieber
Gast

Nun ja, ich muss sagen ich würde mir mit diesen Tags weniger sorgen um Google und deren Interpretation machen, vielmehr wo der mehr Nutzen für den Benutzer oder den Entwickler liegt. Semantisch auf jedenfall schöner, aber im vergleich zu den Nachteilen (z.B. momentan nur lauffähig mit JavaScript) für mich keine Alternative. Ich denke jedoch was Google angeht werden die sicherlich weniger Probleme mit solchen Tags haben, berichtigt mich wenn ich mich irre.

Need_you
Gast

Genial!! Auf sowas hab ich schon lange gewartet. Meiner Meinung nach wird sich Google nicht an x-tags stören. Jedoch würde ich aus SEO-Technischer Sicht noch ein headline-tag innerhalb des x-toggler Elementes notieren.

Stefan
Gast
Ich gehe zwar auch davon aus, der Googlebot sich da wenig dran stören wird, auch wenn er die Tags nicht kennt. Der wird sich dann halt einfach den Text drausholen und gut ist. Wenn man sich das mit einem Textbrowser anschaut, ist ja auch alles da. Hauptaugenmerk sollte natürlich beim Nutzer liegen. Dem Besucher ist es (theoretisch) egal, welche „Schreibweise“ man nutzt. Es wird ihn aber sicherlich stören, wenn er einen bestimmten Browser nutzen und JavaScript aktivieren muss, um die Seite dann überhaupt richtig nutzen zu können. Und auch die Barrierefreiheit sollte im Hinterkopf behalten werden (wobei ich mir da… Read more »
trackback

[…] haben wir Ihnen bei Dr. Web bereits in diesem und diesem Beitrag näher vorgestellt. Ebenfalls von Google stammt AngularJS, dass neben den Custom […]

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen