JavaScript Detection mit JavaScript und CSS
Geschrieben am 29. Dez 2009 von Charles
Seit dem Web 2.0 haben sich User Interface designs geändert. Sehr viele Leute haben heut zu tage eine Seite die ohne JavaScript nicht mehr auskommt. Deshalb sollte man immer überprüfen ob der Benutzer der Webseite sein JavaScript im Browser aktiviert hat, oder nicht , falls dieser Fall besteht muss ja auch ein Fehlermeldung ausgegeben werden. Und wie das geht zeige Ich euch heute.
Wir haben bei diesem Unterfahren drei verschiedene Teile. Den JavaScript teil, den HTML teil und den CSS Teil. Fangen wir mit dem HTML Teil an.
HTML
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> </head> <body> <noscript> Please enable JavaScript in your Major browser ( Firefox, Safari , Opera, Intenet Explorer 8 or Chrome ) </noscript> <div id=“container“> <div id=“header“></div> <div id=“content“></div> <div id=“footer“></div> </div> </body> </html>
Dies ist unser einfaches HTML Gerüst. Das Tag „noscript“ ist dazu gedacht wenn im Browser kein JavaScript aktiviert ist eine Fehlermeldung herauszugeben.
Nun binden wir unser CSS ein.
CSS
@media all
{
div#container
{
display:none;
}
}
Durch diese CSS deklaration wird nun garnichts gezeigt was in diesem Element mit inbregriffen ist.
Nun kommen wir zum JavaScript part. Um diesen Part umzusetzen nehmen wir das JavaScript Framework jQuery. Dort nun wiederum setzen wir eine zweite CSS Regel. Das sieht dann folgend aus
JavaScript / jQuery
$(document).ready(function()
{
$('div#container').css({'display':'block'});
}
);
Wenn unser Dokument geladen ist wird auch die seite angezeigt falls JavaScript aktiviert ist in unserem Browser.
So jetzt sin wir schon so gut wie fertig. Nur stylen wir nun noch ein wenig das Noscript Element
CSS
noscript
{
width:50%;
margin-top:25%;
margin-left:25%;
text-align: left;
height:50%;
width:50%;
padding: 5px 20px 5px 45px;
border-top: 2px solid #ffd324;
border-bottom: 2px solid #ffd324;
background:#fff6bf;
}
So wenn nun kein JavaScript im Browser aktiviert ist wird uns eine Fehler Meldung ausgegeben.
Danken möchte ich noch Sven(@fate__) für seine kleine Hilfestellung. Und über konstruktive Kritik freue ich mich natürlich 
#001
Bevor man das tut, sollte man sich allerdings fragen, ob man wirklich möchte, dass die Webseite ohne JavaScript nicht funktioniert. Ich habe jedenfalls ehrlich gesagt bisher kaum eine Webseite gesehen, deren grundsätzliche Funktionalität nicht auch ohne JavaScript hätte gegeben sein können.
Gleich als erstes Beispiel möchte ich diese Website selbst anbringen: Warum ist für sowas Simples wie das Abgeben eines Kommentars JavaScript erforderlich?
Warum man für das simple Einblenden eines Containers gleich jQuery, welches potenzielle Inkompatibilitäten mit sich bringt, einbinden soll, erschließt sich mir auch nicht.