Einbindung von CSS in ein XHTML-Dokument

Es gibt drei gängige Methoden, CSS in ein XHTML-Dokument zu integrieren.

Einbindung per style-Attribut

Das style-Attribut ist ein Universalattribut (siehe Kapitel 4.6) und darf an fast allen XHTML-Elementen notiert werden. Folgendes Beispiel zeigt, wie Sie einen Absatz formatieren können.

<p style="text-align: center; font-weight: bold;">Absatz</p>

Diese sogenannten Inline-Styles werden häufig verwendet, wenn Angaben nur ein einziges Mal für ein bestimmtes Element vorgenommen werden sollen oder die Vergabe einer Klasse oder ID nicht infrage kommt oder nicht möglich ist. Dies kann der Fall sein, wenn auf den XHTML-Output kein Einfluss genommen werden kann, zum Beispiel bei der Ausgabe eines Content-Management-Systems. Inline-Styles haben jedoch zwei entscheidende Nachteile:

Die Trennung von Struktur und Präsentation ist damit hinüber.
Inline-Styles können autorenseitig nur sehr schwer, nämlich ausschließlich mit !important, überschrieben werden (dazu mehr in Kapitel 6.7 »Die Kaskade«).

Browserunterstützung

Alle Browser: Inline-Styles werden von allen modernen Browsern unterstützt.

Zum Seitenanfang

Einbindung per style-Element

Das style-Element wird innerhalb des Dokumentkopfs head notiert. Es kann ein vollständiges Stylesheet enthalten. Die Regel im style-Element in Listing 6.1 formatiert alle Elemente vom Typ p, also beide Absätze.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS-Einbindung per 'style'-Element</title>
    <style type="text/css">
      p {
        text-align: center;
        font-weight: bold;
      }
    </style>
  </head>
  
  <body>
    <p>Erster Absatz</p>
    <p>Zweiter Absatz</p>
  </body>
</html>

Listing 6.1: CSS-Einbindung per style-Element

Das Attribut type ist ein Hinweis für Browser darauf, um welche Art Stylesheet es sich handelt – schließlich gibt es noch andere Stylesheetsprachen. Die Sprache wird in Form eines MIME-Typs angegeben.

Gecko, Safari und der Internet Explorer behandeln diese Angabe als verbindlich; wenn Sie also etwas anderes als text/css angeben, wird das Stylesheet selbst dann nicht verarbeitet, wenn es doch CSS ist.

style-Elemente werden dazu verwendet, CSS zu notieren, das dokumentweit gelten soll, in anderen Dokumenten jedoch nicht verwendet wird. Darüber hinaus dienen sie häufig dazu, Stylesheets mittels der @import-Regel einzubinden, was aufgrund diverser Bugs in mehreren Browsern nicht zu empfehlen ist (siehe Kapitel 6.4.4 »At-Regeln«). Die Trennung zwischen Markup und Styling ist besser als beim style-Attribut, jedoch noch nicht perfekt; noch immer müssten Sie alle Dokumente ändern, wenn Sie Änderungen am Layout der gesamten Website vornehmen wollten.

Browserunterstützung

Alle Browser: Die Einbindung per style-Element wird von allen modernen Browsern unterstützt.

Zum Seitenanfang

Einbindung per link-Element

Dies ist die beste Methode. Das Element link ist Kind des head-Elements (siehe Kapitel 5.2.2) und verweist auf ein externes Stylesheet.

<link rel="stylesheet" media="screen,projection"
  title="Standardstylesheet" href="/stylesheets/default.css"
  type="text/css" />

Das Attribut rel gibt die Beziehung des Elements an; daran erkennen alle Browser, dass es ein Stylesheet gibt, das sie auf das Dokument anzuwenden haben.

Das Attribut media gibt an, für welche Ausgabemedien das referenzierte Stylesheet bestimmt ist. Es kann eine einzelne Medienbeschreibung sein oder eine durch Kommata getrennte Liste.

Eine Liste alle Medientypen finden Sie in Tabelle 6.1.

Es gehört zum guten Stil, immer das Ausgabemedium anzugeben. Damit lassen sich ungewollte Nebeneffekte in den »falschen« Medien verringern. Benutzerprogramme können Zeit sparen, indem sie nur diejenigen Stylesheets aus dem Netz laden, die für das aktuelle Gerät passend sind. In diesem Fall sind die Medien screen (Computerbildschirme) und projection (Projektoren) angegeben, Letzteres, um Opera-Browser auch im Vollbildmodus mit einem Stylesheet zu versorgen.

Das Attribut href teilt dem Browser über einen URI mit, wo er das Stylesheet finden kann.

Das Attribut title gibt dem Stylesheet einen Namen. Webautoren können auch mehrere Stylesheets mit demselben Titel versehen und sie damit als zusammengehörig kennzeichnen. Diese Stylesheets lassen sich dann in neueren Browsern gemeinsam abschalten. Bei mehreren Stylesheets mit unterschiedlichen Titeln werden nur die mit dem ersten Titel als bevorzugt behandelt und angewandt, die übrigen sind – zumindest in neueren Browsern – automatisch alternative Stylesheets.

Die Verwendung des link-Elements zur Einbindung von CSS stellt die optimale Trennung von Markup und Layout dar und bietet unter anderem folgende Vorteile:

Webautoren können Stylesheets über viele Dokumente (und Websites) hinweg verwenden.
Webautoren können das Stylesheet auswechseln und dadurch das Layout einer Website ändern, ohne Änderungen an den XHTML-Dokumenten vornehmen zu müssen.

Alternative Stylesheets

Stylesheet können persistent (beständig), bevorzugt oder alternativ eingebunden werden.

Persistente Einbindung

Das Stylesheet ist immer aktiv, es sei denn, Nutzer schalten die CSS-Unterstützung ihres Browsers komplett ab. Wenn Sie alternative Stylesheets anbieten, kann das persistente Stylesheet diejenigen Regeln enthalten, die allen Stylesheets gemeinsam sind.

<link rel="stylesheet" type="text/css"
  media="screen,projection" href="default.css" />

Bevorzugte Einbindung

Dieses Stylesheet ist das Standardstylesheet. Es ist aktiv, sobald die Seite geladen ist. Es wird inaktiv, wenn stattdessen ein alternatives Stylesheet gewählt wird.

<link rel="stylesheet" type="text/css" title="Bevorzugt"
  media="screen,projection" href="bevorzugt.css" />

Mit dem Attribut title geben Sie dem Stylesheet eine Bezeichnung, über die es ausgewählt werden kann – dadurch unterscheidet es sich vom persistenten Stylesheet.

Alternative Einbindung

Dieses Stylesheet ist beim Laden der Seite inaktiv. Es kann vom Besucher als Alternative zum Standardstylesheet ausgewählt werden. Beachten Sie den zusätzlichen rel-Attributwert alternate.

<link rel="alternate stylesheet"
  type="text/css" title="Alternativ"
  media="screen,projection" href="alternativ.css" />

Auf der Web Style Sheet Home Page des W3C wird eine große Auswahl unterschiedlicher Stylesheets angeboten. Darunter sind die sogenannten W3C Core Styles, die jedem Webautor frei zur Verfügung stehen. Es gibt insgesamt acht unterschiedliche Stylesheets: Oldstyle, Modernist, Midnight, Ultramarine, Swiss, Chocolate, Traditional und Steely. Sie können sie jeweils auf folgende Weise in Ihre Website einbinden:

<link rel="alternate stylesheet" title="Oldstyle"
  type="text/css" media="screen,projection"
  href="http://www.w3.org/StyleSheets/Core/Oldstyle" />

Diese Stylesheets sind mittlerweile veraltet und haben den einen oder anderen Mangel (so verfügt beispielsweise keines über unterstrichene Anker), aber sie eignen sich hervorragend dazu, mal eben ein Dokument zu layouten, wenn die Zeit fehlt, ein eigenes Stylesheet zu schreiben.

Abbildung 6.1 zeigt, wie Sie das Stylesheet im Browser Firefox wechseln können. In Mozilla- und Opera-Browsern können Sie ähnlich vorgehen. Nutzer des Internet Explorers schauen mal wieder in die Röhre. Dazu kommt leider, dass diese Funktion auch in Browsern, die sie unterstützen, nicht praxistauglich ist. Nach dem Neuladen der Seite wird wieder das Standardstylesheet angezeigt, ebenso dann, wenn Sie von einer Seite der Website zu einer anderen wechseln. Es bleibt in dem Fall nichts anderes übrig, als sich mit dem Standardstylesheet zufriedenzugeben oder die Auswahl erneut zu treffen.

Abb. 6.1: Auswahl alternativer Stylesheets

Browserunterstützung

Alle Browser: Die Einbindung per link-Element wird im Wesentlichen von allen modernen Browsern unterstützt.

Zum Seitenanfang

Ausgabemedien

CSS bietet die Möglichkeit, Stylesheets für unterschiedliche Ausgabemedien festzulegen. So können Sie für Ihr Dokument eigene Stylesheets zum Beispiel für die Präsentation am Bildschirm und für die Ausgabe über einen Drucker schreiben. Das Benutzerprogramm beziehungsweise das Gerät, das Ihre Webseite darstellt, sollte das geeignete Stylesheet auswählen.

Folgende Medientypen stehen zur Verfügung:

Tabelle 6.1: CSS-Medientypen
Typ	Medium
`all`	Für alle Geräte.
`aural`	Für Sprachbrowser, die den Inhalt der Webseite vorlesen.
`braille`	Für Ausgabegeräte mit sogenannter Braillezeile. Der Text der Webseite wird in die veränderte Oberflächenstruktur der Braillezeile umgewandelt und ist so für blinde Menschen tastbar.
`embossed`	Für »Brailledrucker«. Der Text der Website wird dabei gestanzt und ist dann für blinde Menschen tastbar.
`handheld`	Für kleine Handcomputer wie Palms oder Mobiltelefone, zumeist mit kleinen monochromen Bildschirmen und geringer Bandbreite.
`print`	Für die Ausgabe durch Drucker.
`projection`	Für Projektoren und ähnliche Geräte.
`screen`	Für die Ausgabe auf dem Bildschirm, also auf einem Computermonitor.
`tty`	Für die Ausgabe auf nicht grafischen Ausgabemedien mit Festbreitenschrift, wie zum Beispiel Terminals oder auch Textbrowser wie Lynx.
`tv`	Für die Ausgabe auf Fernsehern oder ähnlichen Geräten.

http://jendryschik.de

UX, Usability und Webstandards

Einbindung per style-Attribut

Browserunterstützung

Einbindung per style-Element

Browserunterstützung

Einbindung per link-Element

Alternative Stylesheets

Persistente Einbindung

Bevorzugte Einbindung

Alternative Einbindung

Browserunterstützung

Ausgabemedien