Moderne Webseiten sind oft vollgestopft mit JavaScripts, um die Benutzerfreundlichkeit zu verbessern. Natürlich sollte eine Seite dann aber so gestaltet sein, dass sie auch ohne JavaScript funktioniert. Dabei müssen aber oft Anpassungen im Stylesheet vorgenommen werden. Das wiederum bedeutet, dass CSS-Anpassungen gemacht werden müssen, je nachdem, ob JavaScript beim Client aktiviert ist oder nicht.
Das geht ganz einfach: Wir weisen dem Markup standardmässig die Klasse “no-js” zu. Dann benötigen wir ein JavaScript, welches diese CSS-Klasse durch “js-enabled” ersetzt. Damit ist zum Beispiel folgendes möglich:
<p class="js-recommended-hint" >
Bitte aktivieren Sie JavaScript in Ihrem Browser, um alle Features nutzen zu können!
</p>
.js-enabled .js-recommended-hint { display: none; }
Und wo wird die no-js-Klasse gesetzt? In das oberste Element des Markups – dem html-Element:
<html id="docroot" class="no-js"> <head> <!-- ... -->
Jetzt benötigen wir nur noch das Script, dass die no-js-Klasse entfernt. Das könnte man prima mit jQuery lösen:
$('html').removeClass('no-js');
Da ich ohnehin in fast jedem Projekt dieses praktische JavaScript-Framework nutze, wäre das naheliegend – hat aber einen Nachteil: Es dauert einen Moment, bis jQuery vollständig geladen ist. Das bedeutet, es gibt eine minimale Verzögerung und der Benutzer sieht für eine kurze Zeit die Version, die eigentlich für JavaScript-Verweigerer gedacht ist. Darum sollte diese Änderung mit “rohem” JavaScript durchgeführt werden:
// Cachen des html-Elementes
var _r=document.getElementById('docroot');
// Mit einem regulären Ausdruck 'no-js' durch 'js-enabled' ersetzen
_r.className = _r.className.replace(/\b\s?no-js\s?\b/,'js-enabled');
Einfach, aber wirkungsvoll.
Das Konstrukt ist Teil meines eigenen “Boilerplates” ShiftKit – entstanden aus vielen Einflüssen durch normalize.css, aber auch durch eigene Erfahrungen. Vielleicht werde ich demnächst weiteres über das Kit posten.
Nachtrag
Ralf wies mich darauf hin, dass getElementsByTagName('html')[0] sinnvoller ist:
// Cachen des html-Elementes
var _r = getElementsByTagName('html')[0]
// Mit einem regulären Ausdruck 'no-js' durch 'js-enabled' ersetzen
_r.className = _r.className.replace(/\b\s?no-js\s?\b/,'js-enabled');