eigene Attribute ?

[heinetz]

Hallo Forum,

ich hatte sowas gesehen und auch selbst schon angewandt, denn es schien keine Probleme zu bereiten, doch nun bin ich gerade wieder drüber gefallen und frage mich, wie ich es bewerten soll.

Im Beispiel des jQuery Plugins Cycle2 von Mike Alsup steht folgendes Markup:

<div class="cycle-slideshow"  
    data-cycle-fx="scrollHorz"  
    data-cycle-pause-on-hover="true"  
    data-cycle-speed="200"  
    >  
    <img src="http://malsup.github.com/images/p1.jpg">  
    <img src="http://malsup.github.com/images/p2.jpg">  
    <img src="http://malsup.github.com/images/p3.jpg">  
    <img src="http://malsup.github.com/images/p4.jpg">  
</div>

Hier wurden also HTML-Attribute erfunden. Die Werte lassen sich natürlich prima mit jQuery auslesen und daher erscheint die Methode komfortabel, um so ein jQuery-Plugin zu entwickeln. Ich hab sowas, wie gesagt auch schon gemacht, um irgendwelche Werte direkt im DOM statt in einer JS-Variable zu speichern, aber ich hatte, obwohl es prima funktionierte, ein schlechtes Gewissen ;) Ich hab's nicht an die grosse Glocke gehängt, bin nach wie vor auf freiem Fuss aber wenn so jemand das macht frage ich mich, was das ist.

kann dazu jemand was sagen?

danke und

beste gruesse,
heinetz

[molily]

Hallo!

Hier wurden also HTML-Attribute erfunden.

Nicht ganz. data-Attribute sind in HTML5 spezifiziert. Eigene Attribute, die mit »data-« beginnen, sind eine vom Standard vorgesehene Technik, um unsichtbare Zusatzdaten im Markup unterzubringen, z.B. für Scripte.

Man kann darüber streiten, ob so etwas im Markup stehen sollte. Zumindest ist es gültiges HTML5. Ich finde, Scriptlogik sollte in ausgelagertem JavaScript stehen (Unobtrusive JavaScript). Viele jQuery-Plugin gehen davon aus, dass deren Anwender kein JavaScript selbst schreiben. Daher wählen sie den einfachsten Weg, werden bei DOM-Ready über feste Klassen aktiviert und über data-Attribute konfiguriert. Falls man jedoch etwas JavaScript-Logik hat, ist es sinnvoller, jQuery-Plugins programmatisch zu initialisieren. Das gibt einem – wenn das Plugin eine sinnvolle Programmierschnittstelle bietet – genauere Kontrolle.

Viele Grüße,
Mathias

[JürgenB]

Hallo molily,

Man kann darüber streiten, ob so etwas im Markup stehen sollte. ...

ich finde diesen Weg der Kommunikation zwischen HTML und Javascript sehr einfach und setze ihn selbst gerne ein, wenn auch aus Kompatibilitätsgründen noch über das class-Attribut. Befreit es doch die Anwender davon, sich in irgendeine Programmlogik einzuarbeiten. Einfach Script einbinden und Attribut setzen, fertig. Eine komplexe Kommunikation ist so natürlich nicht mehr möglich.

Gruß, Jürgen

[heinetz]

hello,

Nicht ganz. data-Attribute sind in HTML5 spezifiziert.

Aha! Dann setze ich also einfach in meinem XHTML-Dokument ...

Eigene Attribute, die mit »data-« beginnen

...ein, weil es mir nützlich ist und damit wird mein Dokument ohne weitere Anpassungen (ausser der Dokumenttyp-Deklaration) zu validem HTML5? Das wäre ja einfach ;)

Man kann darüber streiten, ob so etwas im Markup stehen sollte

Mit mir nicht bzw. jedenfalls nicht hier und jetzt ;)

beste gruesse,
heinetz

[Der Martin]

Hi,

Nicht ganz. data-Attribute sind in HTML5 spezifiziert.

Aha! Dann setze ich also einfach in meinem XHTML-Dokument ...

Eigene Attribute, die mit »data-« beginnen

...ein, weil es mir nützlich ist und damit wird mein Dokument ohne weitere Anpassungen (ausser der Dokumenttyp-Deklaration) zu validem HTML5?

nicht ganz. ;-)
Die Argumentation muss andersrum gehen: Wenn dein Dokument *jetzt* valides HTML 4.01 oder XHTML 1.0 ist, dann ist die Wahrscheinlichkeit groß, dass es auch valides HTML 5 ist. Wenn du jetzt data-Attribute verwenden möchtest, kann es nur noch HTML 5 sein, weil es dann nach den anderen beiden DTDs nicht mehr valide ist.

So long,
 Martin

[heinetz]

hello,

Aha! Dann setze ich also einfach in meinem XHTML-Dokument ...

Eigene Attribute, die mit »data-« beginnen

...ein, weil es mir nützlich ist und damit wird mein Dokument ohne weitere Anpassungen (ausser der Dokumenttyp-Deklaration) zu validem HTML5?

nicht ganz. ;-)

aber fast (valide) ;)

Die Argumentation muss andersrum gehen

In welcher Reihenfolge auch immer argumentiert:

Ich setze in meinem XHTML-Dokument Phantasie-Attribute ein, denn es funktioniert und nützt mir bei meiner JS-Logik und nehme in kauf, dass es nicht erlaubt ist. Schreibe jetzt einfach HTML5 dran und damit wird's wieder valide. Cool!

Wenn dein Dokument *jetzt* valides HTML 4.01 oder XHTML 1.0 ist, dann ist die Wahrscheinlichkeit groß, dass es auch valides HTML 5 ist. Wenn du jetzt data-Attribute verwenden möchtest, kann es nur noch HTML 5 sein, weil es dann nach den anderen beiden DTDs nicht mehr valide ist.

Schon klar. Ich frage mich nur, welchen Schluss ich jetzt daraus ziehe.

Ich könnte jetzt, weil ich damit quasi auf der sicheren Seite bin, weiterhin meine Seiten in XHTML bauen und auf die Vorteile von HTML5 verzichten, bis man sagen kann, es wird von den Browsern vollständig *unterstützt. Ich könnte aber auch von jetzt an Projekte nur nur noch in HTML5 umsetzen aber nur die Techniken einsetzen, die die Browser unterstützen bzw. die sie nicht stören. Konkret also bspw. zukünfig statt:

<div id="header"></div>
<header></header>

... schreiben, per css header genauso formatieren, wie bisher div.header (dass man den IE dazu überreden muss, habe ich gelesen). Aber was nun sinnvoll ist ?

beste gruesse,
heinetz

[molily]

Hallo,

Ich könnte jetzt, weil ich damit quasi auf der sicheren Seite bin, weiterhin meine Seiten in XHTML bauen und auf die Vorteile von HTML5 verzichten, bis man sagen kann, es wird von den Browsern vollständig *unterstützt.

HTML5 wird von Browsern nicht im absehbarer Zeit »vollständig« unterstützt werden, denn es ist eine riesige Spezifikation. Nach HTML 5 kommt HTML 5.1 usw. Auf Seiten der WHATWG ist es ohnehin ein »Living Standard« ohne Version und ohne Ende. Es ist nicht sinnvoll, auf irgendeine wenig relevante Browserunterstützung zu warten. Du kannst HTML5 schon jetzt einsetzen.

Übrigens ist XHTML in HTML5 neuerdings anders definiert. Es unterscheidet sich von HTML5 dadurch, dass es tatsächlich als XML verarbeitet wird. Das ist bei XHTML 1.0 in der Regel nicht der Fall – XHTML 1.0 wird typischerweise mit dem MIME-Typ text/html anstatt application/xml oder aplication/xhtml+xml an den Browser gesendet. Damit verarbeitet es der Browser gar nicht als XML, sondern mit dem HTML5-Parser, genauso wie sämtlichen anderen HTML-dokumente.

Das Ausliefern als XML bringt zumeist mehr Nachteile als Vorteile, deshalb ist XHTML5 ziemlich witzlos geworden. Wenn man lediglich XML-artige Syntax schreiben will, so kann man das tun; der HTML5-Parser frisst sie. Wenn man wirklich Dokumente braucht, die von einem echten XML-Parser, aber auch vom normalen HTML5-Parser gelesen werden können, so kann man den Richtlinien für Polyglot HTML5 folgen.

Ich könnte aber auch von jetzt an Projekte nur nur noch in HTML5 umsetzen aber nur die Techniken einsetzen, die die Browser unterstützen bzw. die sie nicht stören.

Ja. Das ist breiter Konsens unter Web-Developern. Das ist bewährte Praxis in der Webentwicklung.

<header></header>

... schreiben, per css header genauso formatieren, wie bisher div.header (dass man den IE dazu überreden muss, habe ich gelesen).

Ja, für IE < 9 ist der sogenannte HTML5-Shim nötig, damit der HTML-Parser des IE das header-Element korrekt parst und den DOM-Baum korrekt erzeugt.

Grüße,
Mathias

[heinetz]

Guten Morgen,

Ich könnte aber auch von jetzt an Projekte nur nur noch in HTML5 umsetzen aber nur die Techniken einsetzen, die die Browser unterstützen bzw. die sie nicht stören.

Ja. Das ist breiter Konsens unter Web-Developern. Das ist bewährte Praxis in der Webentwicklung.

Klasse, als genauso unproblematisch stellt sich das also nach dieser Auseinandersetzung dar.
Ohne irgendetwas Wesentliches anders zu machen, kann ich quasi per sofort mit einer für mich neuen Technologie weitermachen und mir nach und nach die Neuerungen ansehen, ausprobieren und im Einzelfall entscheiden, ob ich sie einsetze.

Vielen Dank, ich habe sehr viel gelernt!

schönes Wochenende,
heinetz

[Robert B.]

Moin,

Aha! Dann setze ich also einfach in meinem XHTML-Dokument ...

Eigene Attribute, die mit »data-« beginnen

...ein, weil es mir nützlich ist und damit wird mein Dokument ohne weitere Anpassungen (ausser der Dokumenttyp-Deklaration) zu validem HTML5? Das wäre ja einfach ;)

Ist so etwas dann auch noch gültiges XHTML5? Meine XML-Kenntnisse sagen mir, dass eigene Attribute oder Elemente eigene Namensräume erfordern. Oder ist nach WHATWG XHTML5 gar kein richtiges XML mehr?

Viele Grüße,
Robert

[molily]

Hallo,

Ist so etwas dann auch noch gültiges XHTML5?

Ja.

Meine XML-Kenntnisse sagen mir, dass eigene Attribute oder Elemente eigene Namensräume erfordern.

Es sind keine eigenen Attribute, es sind Attribute, die von HTML5 spezifiziert sind. Es sind Attribute aus dem XHTML-Namensraum.

Es sind lediglich flexible Attribute. Attributnamen nach dem Schema data-* lassen sich nicht mit XML-DTD oder XML-Schema ausdrücken, soweit ich weiß. Das ist aber eine eine Beschränkung der Schema-Sprachen. Validatoren wie http://validator.nu/ können XHTML5 mit data-Attributen korrekt überprüfen.

Oder ist nach WHATWG XHTML5 gar kein richtiges XML mehr?

Es ist richtiges XML.

Übrigens hat das mit der WHATWG nichts zu tun. Die W3C- und WHATWG-Spezifikationen sind identisch in diesem Punkt.

Grüße,
Mathias

[suit]

Man kann darüber streiten, ob so etwas im Markup stehen sollte.

Kommt auf den Kontext drauf an - ich verwende data-Attribute z.B. gerne für Metainformationen, die ich später für diverse Live-Geschichten mit JavaScript benötige.

z.B. eine Auflistung verschiedener Einträge die jeweils einer oder mehrere Kategorien zugeordnet sind. Die Kategorie-IDs kommen dann in ein data-Attribut

<ul>  
<li data-cat="foo">1</li>  
<li data-cat="foo bar">2</li>  
<li data-cat="bar">3</li>  
</ul>

Ohne JavaScript ist es einfach nur eine Liste - mit JavaScript wird dann ein Filter eingebaut mit dem man die Listeneinträge nach "alle", "nur foo" und "nur bar" Zusammenfiltern kann.

Die andere Sache sind Lösungen, bei denen ein JavaScript Konfigurationsparameter für irgendwelche Spielereien aus einem data-Attribut liest - Cycle2 macht das z.B. so (http://jquery.malsup.com/cycle2/demo/basic.php) aber davon ist imho nicht viel zu halten, weil das etwas ist was lieber in ein externes JavaScript soll, Cycle2 bietet dafür glücklicherweise auch eine API an.