NoFollow Free!
SHIFT Weblog

Dieses Blog ist ein Online-Magazin für erfahrene Website-Entwickler und Webdesigner, die PHP und Webdesign lieben.

CSS, JavaScript & jQuery, Quickies

CSS-Schnittstelle für deaktiviertes JavaScript

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');
 
 

Weitere aktuelle Artikel

Links am Rande

Links am Rande (7)

Und hier, nach etwas Pause, wieder mal einige interessante Links aus den unersättlichen Weiten des Internets. Vielleicht ist für den einen oder anderen was sinnvolles dabei… Wikipedia Redefined: Ein interessantes Konzept nur Neugestaltung der Wikipedia und deren Schwesterprojekte. Auf sneekpeakit.com gibt es viele kostenlose Druckvorlagen und Wireframes zur Webseitengestaltung mit dem Zeichenstift Seit ihr auch

Weiterlesen ›

PHP

Template Inheritance oder: Ein Kreuz mit verschachtelten Templates

In den letzten Monaten hatte ich nur sehr wenig Zeit, mich um PHP und auch demzufolge um mein Framework zu kümmern. Ich habe jedoch sehr häufig über bestimmte Sachverhalte nachgedacht, und ein Thema, dass mir schlaflose Nächte bereitete, war das Verschachteln von Templates innerhalb eines MVC-Systems. Hierbei gibt es bei den etablierten Frameworks fast immer

Weiterlesen ›

PHP

Mein Verständnis von MVC

MVC – diese drei Buchstaben haben es in sich. MVC ist ein Design Pattern, eine strukturelle Lösung für Entwickler. Kaum ein anderes Design Pattern löst so viel Kontroverse aus und regt zu endlosen Diskussionen an – zumindest in der PHP-Welt. Das liegt daran, dass MVC recht oberflächlich beschrieben wird, und möchte man sämtliche MVC-Erklärungsversuche zusammenfassen,

Weiterlesen ›