HTML

Mozilla X-Tag: HTML-Elemente selbst definiert

18. Juni 2012
von

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 fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

5 Kommentare zu „Mozilla X-Tag: HTML-Elemente selbst definiert
  1. Oink am 18. Juni 2012 um 15:43

    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.

  2. Martin Fieber am 18. Juni 2012 um 16:05

    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.

  3. Need_you am 18. Juni 2012 um 16:29

    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.

  4. Stefan am 19. Juni 2012 um 18:34

    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 bei Mozilla weniger Sorgen mache)

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

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!