Diese Website stellt eine elegante Möglichkeit dar um den User darauf hinzuweisen, dass Javascript nicht aktiviert ist.
Die Methode besticht vor allem durch eine einfache Handhabung. Der Hinweis kann nämlich ohne eine <noscript>-Section in das HTML geschrieben werden und ist somit sehr flexibel zu layouten und ggf. zu ändern, falls z.B. bestimmte Javascript-Eigenschaften nicht unterstützt werden.
Wenn Javascript aktiviert ist, ist das folgende Beispiel-Feld leer, andernfalls steht ein Hinweistext darin.
Beispiel-Feld
Dieser Hinweis-Text wird angezeigt, falls kein Javascript aktiviert ist.
Um zu sehen wie das ganze funktioniert ist hier einmal der vereinfachte Quelltext zu sehen:
1 <!Doctype html> 2 <html> 3 <head> 4 <style> 5 body.js .no-js { display:none; } 6 .no-js { border:2px solid red; padding:5px; background:#fcc; } 7 </style> 8 </head> 9 <body> 10 <script> 11 document.body.className += ' js'; 12 </script> 13 <p class="no-js">Hinweis, falls kein JS aktiviert ist.</p> 14 </body> 15 </html>
Um zu verstehen wieso das ganze funktioniert muss man sich vor allem die Zeilen 9 bis 12 ansehen.
Hier sieht man, dass der body keine Klassen enthält. Wenn jetzt jedoch Javascript aktiviert ist wird dem body in Zeile 11 eine neue Klasse hinzugefügt, welche js heißt.
Dadurch, dass diese Klasse nur vorhanden ist, wenn Javascript aktiviert ist, kann man nun CSS-Regeln bestimmen, die nur gültig sind, wenn Javascript aktiviert ist. So werden in diesem Beispiel alle Elemente, die die Klasse no-js besitzen ausgeblendet, sobald Javascript aktiviert ist. Die entsprechende CSS-Regel dafür befindet sich in Zeile 5.
Außerdem kann man auf diese Weise ein Layout gestalten, welches auch ohne Javascript gut benutzbar ist und das Layout ändern, falls Javascript aktiviert ist.