Mehr Macht dem User durch CSS

Gestaltern wurde mit CSS ein Instrument in die Hand gegeben, dass oft mehr über Erfolg oder Mißerfolg eines Angebots entscheiden kann als so manches Usability-Lehrbuch.

Tags:

Autor: sl

Neben der Barrierefreiheit ist die Usability zur Zeit in aller Munde. Übersetzt beschreibt dieses Wort die Benutzbarkeit von Websites, die getestet und in Messwerten beschrieben werden kann. Leider sagen viele Bewertungsmethoden nichts über die tatsächliche Gebrauchstauglichkeit einer Website aus. Um mehr zu erreichen als nur das blanke Funktionieren braucht man Gestalter, die ihr Handwerk verstehen.

Diesen Gestaltern wurde mit CSS ein Instrument in die Hand gegeben, dass oft mehr über Erfolg oder Mißerfolg eines Angebots entscheiden kann als so manches Usability-Lehrbuch. Aber auch Benutzer, die spezielle Bedürfnisse oder einfach nur bestimmte Sehgewohnheiten oder Vorlieben haben, können CSS-Formatvorlagen einsetzen, um ihr Weberlebnis zu individualisieren.

Das Bild zeigt die Menüauswahl verschiedener Formatvorlagen in Firefox 2 unter Mac OS X

Screenshot mit der Auswahl der Style Sheets

Mehr Stil im Browser

Aktuelle Browser sind mittlerweile alle in der Lage, dem Benutzer die Auswahl zwischen mehreren Style Sheets und damit Seitenformatierungen zu lassen. Ausgesucht werden diese Formatvorlagen zum Beispiel in Firefox ab über den Menüpunkt Ansicht – Webseiten-Stil (je nach verwendetem Browser kann dieser Befehl auch anderes heißen).

Das funktioniert natürlich nur, wenn der Designer vorgebaut und mehrere Style Sheets im Quellcode eingebunden hat. Man referenziert dazu einfach mehrere externe Dateien; damit die Auswahl funktionieren kann, brauchen diese eine Bezeichnung. Dazu dient das title-Attribut, dessen Wert dann im Menü des Browsers ausgegeben wird.

  1. <!--persistent style sheet-->
  2. <link rel="stylesheet"
  3. href="/css/basis.css"
  4. media="all">
  5. <!--preferred style sheet-->
  6. <link rel="stylesheet"
  7. href="/css/screen.css"
  8. media="screen"
  9. title="Bildschirm">
  10. <!--alternate style sheet-->
  11. <link rel="alternate stylesheet"
  12. href="/css/iphone.css"
  13. media="handheld"
  14. title="PDA">
  15. <!--alternate style sheet-->
  16. <link rel="alternate stylesheet"
  17. href="/css/print.css"
  18. media="print"
  19. title="Drucker">

Wie diese Einbettung funktioniert und was dabei zu beachten ist findet man in der HTML4-Spezifikation des W3C. Zu beachten ist hierbei, dass es drei Klassen von Style Sheets gibt: ständig (engl.: persistent), bevorzugt (engl.: preferred) und alternativ (engl.: alternate).

  • Um einem Stylesheet den Status »ständig« zuzuweisen, wird das Attribut rel auf »stylesheet« gesetzt und das Attribut title nicht angegeben.
  • Um einem Stylesheet den Status »bevorzugt« zuzuweisen, wird das Attribut rel auf »stylesheet« gesetzt und das Stylesheet mit dem Attribut title benannt.
  • Um ein Stylesheet alternativ zu machen, wird das Attribut rel auf »alternate stylesheet« gesetzt und das Stylesheet mit dem Attribut title benannt.

So interessant das ist, auch aktuelle Browser sind leider nicht in der Lage, sich die gewählte Einstellung merken, ein Reload oder Weiterklicken auf die nächste Seite bringt wieder das Standard-CSS (preferred) zum Vorschein. So bleibt für den Anbieter oftmals nur der Weg über einen Style Switcher mit Cookies, um dem Benutzer dieses Komfortmerkmal über alle Seiten eines Angebotes zu bieten.

Das User Style Sheet – der Anarchisten-Werkzeugkasten

Style Sheets sind zeitgemäß, font-Tags seit Jahren offiziell aus HTML verbannt. Die feste Größenangabe in Punkt (pt) oder Pixel (px) scheint jedoch manchen Sitebetreibern so wichtig, dass Sie lieber Besucher verjagen als sich auf ein flexibleres Design einzulassen. Der Besucher ist aber keineswegs auf die Weitsicht des Sitebetreibers angewiesen, der für verschiedene Medien unterschiedliche Style Sheets erstellt hat (oder auch nicht). Er braucht seinen Browser lediglich mit wenigen Handgriffen zu konfigurieren und das Problem ist für alle Zeiten und für alle Websites gleichermaßen gelöst.

Screenshot der Einstellungsoption der Eingabehilfen in Windows XP Voraussetzung ist für dieses Beispiel ein Internet Explorer. Unter ›Extras‹ → ›Internetoptionen‹ findet sich unten rechts ein Button mit der Aufschrift ›Eingabehilfen‹. Dort können sehbehinderte Surfer spezielle Änderungen vornehmen. Das betrifft sowohl die Farben als auch die Schriftgrößen. Ist das Häkchen vorhanden, werden alle Schriftgrößenangaben – auch die aus font-Tags – ignoriert, über den Browser lässt sich die Schrift dann wie gewohnt vergrößern. Das gilt für alle Websites, die ab nun besucht werden.

Microsoft geht noch einen Schritt weiter und bietet die Möglichkeit an, ein eigenes Style Sheet zu verwenden. Zugegeben, der Surfer muss in der Lage sein, ein solches zu erstellen. Man könnte ihm jedoch eine passendes Style Sheet zum Download bereitstellen. Der Internet Explorer ab Version 5.5 hält hier eine weitere interessante Option bereit, den CSS-Befehl zoom. Damit lassen sich kompletten Seiten, inklusive Grafik und Text, zu bisher ungeahnter Größe aufblähen.

Sehbehinderte kennen das Prinzip von sogenannten Bildschirmlesegeräten. Dort filmt eine Videokamera Bücher, Briefe oder Zeitschriften ab und projiziert sie auf einen Monitor, die Vergrößerung kann stufenlos variiert werden. Das geht so weit, das ein einzelner Buchstabe den gesamten Monitor ausfüllen kann.

Ein entsprechendes Style Sheet ist schnell erstellt. Sie benötigen eine Textdatei mit folgender Zeile:

  1. body {
  2. zoom : 200%;
  3. }

Der Vergrößerungseffekt ist bei 200% bereits gewaltig. Nicht vergessen, möglich ist das zur Zeit nur ab dem IE 5.5, aktuelle Browser wie der IE 7 oder Opera bringen wiederum ihre ganz eigenen Zoom-Mechanismen mit.

Auch der Opera-Browser kennt die Möglichkeit ein eigenes Style Sheet zu verwenden, versteht jedoch »zoom« nicht. Dafür geht Opera an anderer Stelle noch viel weiter: im Konfigurationsmenü können individuelle Schriftformatierungen für einzelne HTML-Elemente festgelegt werden und damit die von der HTML-Seite festgelegten Formatierungen überschrieben werden.

Den Designer überstimmen

Manchmal ist es nicht möglich, die Definitionen des Webdesigners zu überstimmen. Man braucht einen Trick. Der Zusatz !important wirkt, als gehöre er gar nicht zu CSS. Tut er aber auf seine Weise doch. Mit diesem Attribut wird einer Definition eine erhöhte Wichtigkeit (engl.: Specificity) zugewiesen. Damit können Sie zum Beispiel verhindern, das ein Besucher mit einem eigenen Style Sheet (User CSS) Ihre Formatierung überstimmt.

  1. h2 {
  2. font-family : Courier !important;
  3. }

Obiges Beispiel sorgt bei grafischen Browsern definitiv für Schreibmaschinenschrift. Das ist im Falle des Falles nützlich zu wissen, denn Style Sheet-Angaben können auf verschiedene Weise eingebaut werden. Spätestens seit CSS Level 2 gewinnt der Benutzer die Oberhand. Sowohl der Nutzer als auch der Designer können !important einsetzen, bei widersprüchlichen Angaben für die gleichen Selektoren verwenden Browser die Vorgabe des Nutzers. Das nennt man dann wohl eine »Rüstungsspirale«.