Hauptmenü

Untermenü

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

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 ändernEinfach markieren und wie bekloppt 
  auf der Tastatur herumhauen.
</p>

3. data-

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

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

Zieh mich

<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.

draggable

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

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.


<p hidden>
  Wer das sehen kannhat einen Sch***ß-Browser.
</p>

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt