Strict verstehen, Teil 7: Die Separation der Ebenen
Wie niemand mehr weiß, habe ich im ersten Teil dieser Reihe ein sogenanntes Informationsmodell beschrieben und die Separation der Ebenen als ein Ziel der Variante Strict angegeben. Um das verständlicher zu erklären gibt es in diesem Teil einige praktische Beispiele.
Die Separation der Ebenen
Die erste Ebene ist bekannterweise die Information, welche in menschen- und maschinenlesbarer Form vorhanden ist. Das trifft an sich auf viele -ML-Sprachen zu, aber wir behandeln hier HTML. ;)
Die Ebenen zwei bis vier sollten immer bestmöglich von der ersten getrennt sein.
Ebene Zwei: Trennung von Inhalt und Aussehen
Einer der größten Vorteile von Stilangaben ist, dass diese separat vom Dokument gespeichert werden können. Dann können Browser diese Dateien im Cache ablegen, was den Vorteil hat, dass weitere Webseiten der Webpräsenz schneller angezeigt werden können, da nicht alle Daten erneut geladen werden müssen. Bei Bildern wird schon lange so verfahren.
Das hat gleichzeitig den Vorteil, dass weniger Traffic verursacht wird, was bei guter Trennung von Stil und Struktur durchaus zu einem weniger belasteten Server führen kann.
Stilangaben auslagern
HTML-Code:
<head>
<!-- Idealerweise geschieht das Einbinden von externen Stilangaben über das link-Element. -->
<link rel="stylesheet" type="text/css" href="./stilangaben.css" media="screen" title="Moderner Webseitenstil" />
<link rel="alternate stylesheet" type="text/css" href="./stilangaben2.css" media="screen" title="Traditioneller Webseitenstil" />
<link rel="stylesheet" type="text/css" href="./printmedien.css" media="print,embossed" />
[...]
</head>
Hier sind drei verschiedene Stilangaben referenziert. Die Attribute des link-Element spielen dabei eine sehr große Rolle.- rel - Das link-Element hat viele Verwendungszwecke. Mit „stylesheet“ gibt man an, dass es Stilangaben für das Dokument gibt. Mit „alternate stylesheet“ gibt man an, dass für ein Ausgabemedium auch alternative Stilangaben vorhanden sind.
- type - Da es mehrere Stilsprachen neben CSS gibt ist es wichtig, dieses Attribut mit dem Wert text/css zu setzen. Das Attribut ist Pflicht!
- href - Hier wird die externe Stildatei referenziert.
- media - In diesem Attribut werden die Ausgabemedien bestimmt, für die die Stilangaben gelten. Fehlt das Attribut gilt der Standardwert „screen“.
- title - Gibt es zu einem Ausgabemedium mehrere Stilangaben zur Auswahl, so wird das title-Attribut als Beschriftung der Auswahlmöglichkeiten des Benutzers verwendet.
Hinweis: Ob es ein Fehler oder so definiert ist weiß ich nicht, jedoch werden Stilangaben für Druckmedien ingoriert, wenn sie über ein title-Attribut verfügen. Das Ansehen einer Druckvorschau benötigt also leider eine weitere Zeile.
Stilangaben auslagern oder intern einfügen
Stilbereiche innerhalb von HTML können dazu verwendet werden, externe Stilangaben über CSS einzubinden. Davon abgesehen sind Stilbereiche innerhalb des Dokuments grundsätzlich ein Nachteil und sollten im Bestfall nur bei HTML-E-Mails verwendet werden (Der Sinn dieser Mailform sei dahingestellt).
HTML-Code:
<head>
<style type="text/css" media="screen" title="Modern">
<!-- HTML-Kommentare in Stilbereichen sind nutzlos und manchmal sogar gefährlich.
Browser wie Netscape 3 oder Internet Explorer 2, für die diese Schreibweise gedacht ist, gibt es nicht mehr. -->
/* Einbinden externer Stilangaben für alle Ausgabemedien */
@import url('./stil_fuer_alle.css');
/* Einbinden externer Stilangaben für bestimmte Medien */
@import url('./printstil.css') print,embossed;
</style>
[...]
</head>
Für die drei Attribute des style-Elements gelten die selben Hinweise wie für die entsprechenden Attribute des link-Elements.
Die import-Regel fügt die referenzierten Stilangaben ein. Ohne Angabe eines bestimmten Mediums gelten diese Angaben für alle Ausgabemedien.
In HTML-Elementen gesetzte Stilangaben
Üblicherweise ist die Angabe von Klassen und IDs genug um Stilangaben auf das Dokument anwenden zu können. Leider machen noch viele den Fehler, Stilangaben direkt innerhalb von HTML-Elementen zu definieren (über das globale style-Attribut).
Da CSS nicht die einzige Stilsprache ist, muss auch für diesen Fall eine Angabe gemacht werden, dass die Stilangaben in CSS vorhanden sind. Dies geschieht über eine Metaangabe.
HTML-Code:
<head>
<!-- HTML Variante -->
<meta http-equiv="content-style-type" content="text/css">
<!-- XHTML Variante -->
<meta http-equiv="content-style-type" content="text/css" />
[...]
</head>
Struktur statt Klassen und IDs
Eine Krankheit, die sich beim Wechsel zu gültigem HTML entwickeln kann, hört auf den Namen Divitis. Dabei werden viele div-Elemente mit zahlreichen Klassen und/oder IDs formatiert. Ursache ist unter anderem Unwissenheit über grundlegende CSS Selektoren.
HTML-Code:
<!-- Divitis: -->
<div id="header">Überschrift</div>
<div class="link">...</div>
<div class="link">...</div>
<div class="link">...</div>
<!-- Gute Struktur: -->
<ul id="navigation">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
Problematische Strukturierung wie gezeigt findet man leider sehr häufig vor. Es ist ein Irrglaube, Tabellenzellen durch <div> zu ersetzen wäre standardkonforme Strukturierung. <div>, das steht für „document divisions“ und ist dazu gedacht, Bereiche des Dokuments in sinnvolle Abschnitte zu gliedern, um diese dann mit Stilangaben formatieren zu können.
Dokumente sollten auch ohne <div> funktionieren, die wichtigsten Elemente sind Listen, Überschriften, Absätze und Anker.
Ebene Zwei: Graphiken
Graphiken habe ich bereits erklärt, trotzdem nochmal einige Beispiele für das richtige setzen von Alternativtexten.
Dient das Bild als Überschrift, z.B. weil es den Namen der Webseite oder den Titel einer Kategorie enthält, so muss der Alternativtext diesen Bildtext ersetzen können, wenn ein Textbrowser oder eine Suchmaschine die Seite besucht. Leere Alternativtexte sind hier fatal.
Ist das Bild zur Anzeige von Bewertungen gedacht ist der Alternativtext „3 von 5 Punkten“ sicher am besten geeignet. Auf Spielereien wie „***/*****“ sollte man verzichten, da vorlesende Browser damit Probleme haben könnten.
Bestimmte Zeichen und Piktogramme sollten ausgeschrieben werden oder, wenn das nicht möglich ist, durch ein Äquivalentes Zeichen ersetzt werden. Beispiel wären etwa die Tasten eines Playstationcontrollers. Dreieck, Quadrat, Kreis und Kreuz wären Ideale Alternativtexte, wenn die Bilder mit diesen Symbolen nicht geladen werden.
Diese Wörter sind auch Wesentlich besser geeignet als Sprachungetüme wie „/\“ oder „[]“.
Problematisch sind jedoch auch Bilder, die nur der Gestaltung dienen, aber dennoch einen Alternativtext wie „links oben“ und „rechts unten“ enthalten. Das stört den Lesefluss doch enorm, da man diesen Text im Gegensatz zu [INLINE] nicht sofort als nicht-textzugehörig erkennen kann.
Bilder die der Gestaltung dienen müssen einen Leeren Alternativtext besitzen. Das bedeutet alt="", das Attribut muss also gesetzt werden, lediglich ohne Inhalt.
Ebene Drei: Trennung von Information und (Inter-)Aktivität
Für klientseitige Skriptsprachen gelten ganz ähnliche Regeln wie für Stilangaben. Auch hier kann man Skripte und Struktur von einander trennen.
Skripte auslagern
HTML-Code:
<head>
<script type="text/javascript" src="javascript15.js"></script>
[...]
</head>
Um ausgelagerte Skripte einzubinden genügt es, im Kopfbereich des Dokuments einen leeren Scriptbereich zu erstellen. Über dessen Attribute werden Skripte eingebunden.- type - Da es neben JavaScript noch andere Skriptspachen gibt und in neueren Versionen eine Manipulation der Funktionsweise durch unterschiedliche MIME-Typen möglich ist, ist es notwendig, das Pflichtattribut „type“ anzugeben. Die größte Browserkompatibilität erreicht man mit text/javascript. Im Gegensatz zu Stilangaben ist JavaScript nicht so streng und akzeptiert auch Dateien, die mit dem falschen MIME-Typ versendet werden.
- src - Damit wird die externe JavaScript-Datei referenziert. Ist dieses Attribut gesetzt wird der Inhalt des Skriptbereiches ignoriert - aber warum sollte da auch was drinstehen?
Skriptbereiche im Dokument
In manchen Fällen ist es sinnvoll, Skriptbereiche innerhalb des Dokuments zu lagern.
HTML-Code:
<script type="text/javascript">
<!-- Auch hier gilt: Keine HTML-Kommentare. Die Zeiten sind wirklich vorbei :) -->
Besondere_Ausgabe();
</script>
<noscript>
Alternative Ausgabe.
</nocsript>
Das type-Attribut ist auch hier Pflicht. Im Skriptbereich sollte jedoch nicht mehr stehen als eine Funktion, die den Inhalt erzeugt. Sinvoll wäre ein Bereich wie oben in dem Fall, in dem JavaScript Inhalt erzeugt, welcher widerum mit JavaScript weiterarbeitet, während im Noscriptbereich der Alternative Inhalt steht, der für Benutzer mit deaktiviertem JavaScript nützlich ist.
In HTML-Elementen gelagertes JavaScript
In HTML gibt es sogenannte Eventhandler, das sind Attribute, die in fast allen Elementen vorkommen dürfen und je nach Ereignis, z.B. Klick oder Doppelklick, die Skripte ausführen, die in den entsprechenden Attributen gespeichert sind.
HTML-Code:
<button type="button" onclick="Zeitausgabe();">Interaktivitätstest</button>
In diesen Attributen dürfen Skripte stehen. Diese sollten sauber geschrieben werden, das bedeutet z.B. dass Funktionen mit einem Strichpunkt abgeschlossen werden. Mehr als das Aufrufen einer Funktion sollte im Großteil der Fälle nicht nötig sein.
Werden diese Eventhandler verwendet muss der Browser ebenfalls erfahren, welche Skriptsprache verwendet wurde, deshalb gibt es auch dazu eine Metaangabe:
HTML-Code:
<head>
<!-- HTML Variante -->
<meta http-equiv="content-script-type" content="text/javascript">
<!-- XHTML Variante -->
<meta http-equiv="content-script-type" content="text/javascript" />
[...]
</head>
JavaScript als Verweisziel
Im href-Attribut des <a> und des area-Elements kann das Pseudoprotokoll javascript: verwendet werden.
HTML-Code:
<a href="javascript:Funktion();">Funktion aufrufen.</a>
Diese Art des Funktionsaufrufes ist jedoch schlechter Stil, da das href-Attribut als Verweisziel eine Skriptlose Alternative enthalten muss, während die eigentliche Funktion in einem Eventhandler stehen sollte.
Funktionsrückgabe bei bestimmten Eventhandlern
In manchen Fällen ist es notwendig, dass die Skripte in Eventhandlern bestimmte Werte zurückliefern.
HTML-Code:
<form action="./test.html" method="post" onsubmit="Validiere();">
<!-- onsubmit muss true zurückgeben, damit das Formular abgesendet wird.
Alles andere wird ignoriert. Ideal zum Überprüfen von Eingabefeldern -->
</form>
Eventhandler in extern gelagerten JavaScript Dateien
Meines Wissens können manche Eventhandler auch ganz außerhalb des Dokuments, als reines JavaScript erstellt werden. Wie genau das Funktioniert weiß ich leider nicht, da ich mich nur wenig mit JavaScript beschäftige. Es hört sich aber nach einer Möglichkeit an, die die Trennung von Inhalt, Gestaltung und Interaktivität verdeutlicht.
Ebene Vier: Fallback multimedialer Inhalte
Inhalte der vierten Ebene werden zum Großteil durch das object-Element eingefügt. Dass die Möglichkeit zur angabe eines Fallbacks kaum genutzt wird verdanken wir dem Internet Explorer, der bis Version 6 bei nicht ladbaren Objekten einfach gar nichts macht.
Da aber bessere Browser auf dem Vormarsch sind und die Angabe von Alternativen ohnehin lobenswert ist, hier ein Beispiel.
HTML-Code:
<p>
<object>
<!-- Da ich mit diesem Element noch nicht gearbeitet habe fallen Ausnahmsweise die wichtigen Attribute aus. -->
<param name="src" value="quelle.ext" />
Hier wird das Beispielobjekt eingebunden. Kann es nicht geladen werden, wird dieser Text angezeigt.
</object>
</p>
Nachdem innerhalb des object-Elements der letzte Parameter angegeben wurde ist dort Platz für den Inhalt, der angezeigt werden soll, wenn das Objekt nicht gleaden werden kann. Möglich wäre neben einem einfachen Text-Fallback z.B. auch mehrfache Verschachtelung von Objekten. Die letzte Alternative sollte jedoch immer Text beinhalten.
