Es dürfte ja inzwischen bekannt sein, das HTML5 viele neue Tags und Attribute einführt die maßgeblich zur Semantik beitragen – So auch das „hidden“ Attribut, das ich euch Heute vorstellen möchte.

Was tut das hidden Attribut?

Das „hidden“ Attribut tut genau das, was man auch erwarten würde: Es versteckt Elemente. Natürlich kann man sich hier mit eigenen CSS Klassen oder inline-styles aushelfen, doch als gute Web-Entwickler möchten wir natürlich möglichst viele „native“ Funktionen nutzen.

Natürlich möchte ich auch Heute wieder ein paar Quelltext-Beispiele präsentieren:

<h2>Überschrift</h2>
<p hidden>Ein versteckter Paragraph!</p>
<p>Und ein angenehmer Fließtext...</p>

Benutzung in Javascript

Im Javascript lässt sich das ganze folgendermaßen benutzen (Protoype Syntax)

// Selektieren des versteckten Paragraphen.
$$('p[hidden]');

// Setzen des Attributes.
$$('p')[0].writeAttribute('hidden');

// Überprüfen, ob der Browser das Attribut unterstützt:
var p = document.createElement('p');

if (typeof p.hidden == 'undefined') {
   $$('p')[0].hide();

   // Oder...
   $$('p')[0].setStyle({display:'none'});

   // Oder...
   $$('p')[0].addClassName('hide');
}

Und ich denke damit dürften wir ein weiteres Attribut abgedeckt haben 🙂 Die meisten HTML Attribute geben nunmal nicht allzu viel Schreibmaterial her… Mal schauen ob ich für die kommende Woche ein etwas aufwändigeres Attribut finde.

Damit wünsche ich euch eine sonnige Woche und natürlich „Happy Coding„!