HTML5 - Allgemeine Neuerungen - Attribute
1. Ein Hinweis
Hier geht es um globale Attribute, also um die, die auf praktisch jedes Element anwendbar sind. Leider gibt es da mal wieder große Unterschiede in der Browserunterstützung. Darum weise ich dezidiert darauf hin, wer das kann und wer nicht (ratet mal wer). Außerdem konzentriere ich mich nur auf die, die auch halbwegs unterstützt werden.
2. contenteditable
- 16.0
- 12.0
- 5.1
- 22.0
- 9.0/10.0
Damit kann man den Text in einem so ausgezeichneten Bereich direkt ändern. Inwieweit man das direkt (also ohne Ajax) speichern kann, weiß ich im Moment selber noch nicht. Bei den Tutorials werde ich darauf eingehen.
Beispiel
Den Text kann man ändern. Einfach markieren und wie bekloppt auf der Tastatur herumhauen.
<p contenteditable>
Den Text kann man ändern. Einfach markieren und wie bekloppt
auf der Tastatur herumhauen.
</p>
3. data-
- 16.0
- 12.0
- 5.1
- 22.0
- 9.0/10.0
Hier handelt es sich um eine ziemlich tolle Sache. Denn damit kann man einem Element zusätzliche Daten zuweisen und die auslesen. Ihr kennt doch sicher das
Problem, dass ihr schon mal Attribute wie class
oder rel
missbraucht habt, um Informationen speziell für JavaScript bereitzustellen.
Damit ist Schluss.
Struktur
Das Attribut beginnt mit data-
. Und dann kann kommen, was immer ihr wollt. Denn bei der Wahl der "Anhängsels" seid ihr vollkommen frei. Ein
Beispiel könnte so aussehen.
<ul>
<li data-age="32" data-birth-date="14.06.1980">Hans Wurst</li>
<li data-age="46" data-birth-date="07.05.1966">Dieter Hinz</li>
<li data-age="22" data-birth-date="30.12.1989">Peter Kunz</li>
</ul>
4. draggable
- 12.0
- 5.1
- 22.0
Eigentlich wäre das eine Super-Sache. Wenn ..., ja wenn die Browserunterstützung nicht so rudimentär wäre. Denn mit diesem Attribut macht man ein Element ziehbar.
Beispiel
<div class="box" draggable="true">Zieh mich</div>
Erläuterung
Wie ihr in den unterstützenden Browsern seht, könnt ihr den grauen Kasten hin und her schieben. Damit die anderen auch was sehen, gibt es ein Bildchen zur Anschauung.
Leider erscheint dann dieser "Nicht verfügbar"-Cursor. Das liegt daran, dass man eigentlich noch einen Zielpunkt definieren muss, in den man das Element
bewegen darf. Dabei handelt es sich um das Attribut dropzone
, das leider noch kein einziger Browser unterstützt. Da muss dann wieder JavaScript
herhalten.
5. hidden
- 16.0
- 12.0
- 5.1
- 22.0
- 9.0
Das ist auch eine richtig gute Idee gewesen. Damit versteckt man ein Element so, dass es einem display: none
in CSS entspricht.
Beispiel
Wer jetzt einen Browser hat, bei dem der Satz " Wer das sehen kann, hat einen Sch***ß-Browser." zu lesen ist, so kann derjenige gewiss sein, dass seine Gurke damit nicht klarkommt. Die anderen sehen ..., genau ... nichts.
Wer das sehen kann, hat einen Sch***ß-Browser.
<p hidden>
Wer das sehen kann, hat einen Sch***ß-Browser.
</p>
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt