webmatze.de

Profi Tipps für einen erfolgreichen Internetauftritt

Ist display=“none“ jetzt irrelevant?

| Keine Kommentare

Beim Studieren der aktuellen HTML5 Spezifikation, ist mir ein neues Attribut aufgefallen, welches möglicherweise bald eine große Bedeutung bekommen könnte. Ich spreche hier vom Attribut irrelevant, welches allen HTML Elementen zugewiesen werden darf.

Wofür steht irrelevant?

Das Attribut irrelevant darf die Werte "true" oder "false" enthalten und gibt an, ob ein so ausgezeichnetes HTML Element im aktuellen Kontext noch nicht oder nicht mehr relevant ist. So gekennzeichnete Elemente werden vom Browser weder gerendert, noch angezeigt. Das heißt, man kann damit beliebige Elemente ein- und ausblenden.

HTML 5 Draft Recommendation Screenshot

Bisher konnte man diese Funktionalität nur durch das Setzen der CSS Eigenschaft display auf display: none erreichen. Damit werden die entsprechenden Elemente ebenfalls nicht gerendert und angezeigt.

Der Nachteil hier wäre allerdings, dass ein Gerät oder Browser, welcher keine Stylesheets versteht, solche Elemente dann trotzdem darstellen würde. Bei Verwendung von irrelevant würde der entsprechende Teil auch in diesem Fall nicht angezeigt werden. (Vorausgesetzt das Gerät versteht HTML5.)

irrelevant schon heute verwenden

Damit man das neue Attribut in HTML Seiten verwenden kann, müsste man darauf warten, dass die aktuellen Browser HTML 5 unterstützen. Doch bis es soweit ist, kann es noch eine Weile dauern, zumal die Spezifikation noch nicht in der finalen Version vorliegt.

Um das Warten aber ein wenig zu verkürzen, kann man die entsprechende Funktionalität in allen aktuellen Browsern auch auf anderem Weg erreichen. Dazu muss man nur zwei einfache CSS Definitionen in das HTML Dokument einbinden, und schon wird das Attribut irrelevant richtig ausgewertet.

  1.  
  2. <style type="text/css">
  3. *[irrelevant] {
  4. display: none;
  5. }
  6. *[irrelevant="false"] {
  7. display: inherit;
  8. }
  9. </style>
  10.  

(Man sollte jedoch versuchen möglichst nicht irrelevant="false" zu verwenden, sondern statt dessen das Attribut ganz entfernen, da es unter Umständen bei einigen HTML Elementen zu Problemen in der Darstellung kommen kann.)

So kann man nun beliebige Elemente ausblenden lassen:

  1.  
  2. <P>Laut HTML 5 können nicht relevante Elemente
  3. ausgeblendet werden, indem ihnen das Attribut irrelevant
  4. zugewiesen wird. <span irrelevant="true">HTML 5 wird noch
  5. nicht von allen aktuellen Browsern unterstützt.</span>
  6. Irrelevante Elemente sind solche, die noch nicht, oder nicht
  7. mehr relevant sind. Das Attribut sollte auf solche Abschnitte
  8. angewendet werden, die im aktuellen Kontext nicht relevant
  9. sind, es aber später durchaus wieder werden können.</P>
  10.  

Wenn man dies mit einem aktuellen Browser wie Firefox 3, Safari 3 oder IE 8 betrachtet, sollte der zweite Satz nicht mehr angezeigt werden:

Laut HTML 5 können nicht relevante Elemente
ausgeblendet werden, indem ihnen das Attribut irrelevant
zugewiesen wird. HTML 5 wird noch
nicht von allen aktuellen Browsern unterstützt.

Irrelevante Elemente sind solche, die noch nicht, oder nicht
mehr relevant sind. Das Attribut sollte auf solche Abschnitte
angewendet werden, die im aktuellen Kontext nicht relevant
sind, es aber später durchaus wieder werden können.

Elemente per DOM ein- und ausblenden

Jetzt, da wir mit irrelevant gekennzeichnete Elemente vom Browser ausblenden lassen können, fehlt nur noch der entsprechende JavaScript Code, um dies auch dynamisch per Mausklick durchführen zu können:

  1.  
  2. function hide(elementId) {
  3. var el = document.getElementById(elementId);
  4. el.setAttribute('irrelevant',true);
  5. }
  6. function show(elementId) {
  7. var el = document.getElementById(elementId);
  8. el.removeAttribute('irrelevant');
  9. }
  10.  

Fazit

Wie man sieht, kann man schon heute bestimmte HTML5 Features verwenden und so die eigenen Seiten für die Zukunft vorbereiten. Ob man das auch tun sollte, sei jedem selbst überlassen. Da ältere Browser möglicherweise mit den hier gezeigten Beispielen nicht zurecht kommen, ist dies nicht unter allen Umständen die beste Wahl. Aber da in den entsprechenden Browsern in dem Fall die zu versteckenden Inhalte einfach angezeigt werden würden, wäre auch kein größerer Schaden entstanden.

Diese Artikel könnten dich auch interessieren: