Einführung

Die Verwendung von JavaScript eröffnet viele Möglichkeiten das Browsen auf einer Webseite angenehmer zu gestalten. Wenn aber JavaScript deaktiviert wird, dann sollte das nicht dazu führen, dass die Funktion der Webseite eingeschränkt wird. Deswegen sollte ein guter Webentwickler immer fallback-Techniken berücksichtigen. Folgendes Tutorial beschreibt, wie man dies erreichen kann. Dabei werden grundlegende Kenntnisse in HTML, CSS und JavaScript vorausgesetzt. Außerdem sollte das JavaScript-Framework jQuery nicht komplett unbekannt sein.

Tutorial

Form-Elemente zu stylen ist schwierig und sie in jedem Browser identisch aussehen zu lassen ist oft ein unangenehmes Unterfangen. Das ist Grund genug, um zum Beispiel einen Submit-Button durch ein Anchor-Tag (oder irgend ein anderes HTML Element) zu ersetzen. Das soll uns als Beispiel in diesem Tutorial dienen:

<a href="#" 
   onclick="document.thisFrom.submit(); 
   return(false);">
   Send Message!
</a>

An das Anchor-Tag wird ein onclick-Event gebunden, um das Abschicken des Formulars auszulösen. Letzteres benötigt JavaScript. Wenn JavaScript allerdings deaktiviert ist, gibt es keine Möglichkeit das Formular abzuschicken. Um die Funktionalität weiter zu gewährleisten, kann man einen Standard-Submit-Button hinzufügen:

<noscript> 
  <input name="submit" type="submit" 
      value="Send Message!" /> 
</noscript>

Das oben stehende HTML-Snippet fügt einen Submit-Button in das Formular ein, wenn JavaScript deaktiviert ist. Allerdings wird immer noch das Anchor-Submit-Tag angezeigt, welches die identische Funktionalität zur Verfügung stellen soll. Dies funktioniert allerdings nicht. Die Lösung zu diesem Problem ist, das Anchor-Tag standardmäßig unsichtbar zu machen. Um das zu erreichen fügen wir eine CSS-Klasse (show-on-js) in das Anchor-Tag ein:

<a href="#" 
   class="js-submit show-on-js" 
   onclick="document.thisFrom.submit(); return(false);">
   Send Message!
</a>

Das erlaubt uns nun alles zu verstecken - nicht nur dieses Anchor-Tag - was nur funktioniert, wenn JavaScript aktiviert ist. Eine zweite CSS-Klasse (js-submit) ermöglicht es weitere Stile auf das Element anzuwenden, die unabhängig von der show/hide-Funktion sind:

.show-on-js{
   display: none;
}
 
.js-submit{
  /* make your anchor-tag look good here */
}

Hier kommt der Trick

JavaScript selbst kann man nun verwenden, um Elemente sichtbar zu machen, die nur Sinn ergeben, wenn JavaScript aktiv ist:

<script type="text/javascript">
   $(document).ready(function() {
     $(".show-on-js").show();
     $(".hide-on-js").hide(); 
   });
</script>

Letzteres Snippet macht vom JavaScript Framework jQuery Gebrauch. Man sollte also sicherstellen, dass man das Framework einbindet. Alles was nur sichtbar sein soll, wenn JavaScript aktiv ist (show-on-js), wird sichtbar gemacht und alle Fallback-Elemente (hide-on-js) werden versteckt. Ein Fallback-Element, dass man nur anzeigen möchte, wenn JS deaktiviert ist, könnte zum Beispiel ein Hinweis sein, der den Benutzer freundlich bittet JavaScript zu aktiveren:

<p class="js-message hide-on-js">
   Bitte aktivieren Sie JavaScript in Ihrem Browser!
</p>

Anstatt die hide-on-js-Klasse zu verwenden könnte man hier auch das Paragraph-Tag in ein noscript-Tag einbetten. Welche Technik man verwendet ist wohl Geschmackssache. Hier noch ein bisschen CSS, um die Meldung dort zu platzieren, wo der Benutzer sie nicht ignorieren kann:

.js-message{
   position: absolute;
   top: 5px;
   left: 5px;
   color: red;
   background: yellow;
}

Das Ganze in TYPO3 verwenden

Wer TYPO3 als Content-Management-System verwendet, kann folgenden TypoScript-Quelltext einbinden, um die show/hide-Funktionalität zu ermöglichen:

tmp.jsshow = TEXT
tmp.jsshow.value (
  <script type="text/javascript">
   $(document).ready(function() { 
      $(".show-on-js").show(); 
      $(".hide-on-js").hide(); 
    });
  </script>
)
 
page.headerData.99 < tmp.jsshow

Jetzt bookmarken: