Webwriting-Magazin > So geht's
Erste Schritte mit CSS
Gleiches Schriftbild in (fast) allen Browsern
Unsere Augen sind verwöhnt. Wer Aufmerksamkeit erringen will, muß ihnen schon einiges bieten - und zwar mehr, als standardmäßiges HTML zu bieten hat. HTML beschränkt sich bewußt darauf, die logische Gliederung von Dokumenten zu markieren - die Darstellung selbst bleibt dem jeweiligen Ausgabegerät überlassen. Damit ist sichergestellt, daß ordentlich gebaute HTML-Seiten auf den verschiedensten Ausgabegeräten wiedergegeben werden können - und daß sie auf allen gleich unattraktiv aussehen.
Für Anbieter gesuchter Informationen ist mangelnde Attraktivität
des Layouts kein Problem - auf  http://www.w3.org/TR/WCAG20/
ist beispielhaft zu sehen, wie Dokumente aussehen (können),
die keine Leser werben müssen, weil sie als Pflichtlektüre
gelten. Aber sonst? HTML kann zwar nicht nur Gliederungspunkte
bzw. Überschriften in verschiedenen Größen darstellen (ueberschriften.htm),
sondern hat im Lauf der Zeit gelernt, auch  Lauftext
zu formatieren - aber einmal sind diese Abstufungen ziemlich
grob, und dann gehören sie seit HTML 4 auch nicht mehr zum
guten Ton. Die entsprechenden Tags funktionieren zwar nach
wie vor in allen Browsern, aber Ihr Gebrauch wird vom W3C
"mißbilligt". Und außerdem gibt es einen Ersatz: Cascaded
Stylesheets CSS.
Alleskönner mit Schönheitsfehlern
Die gute Nachricht: CSS können
fast alles - im Prinzip. Eine kleine Einführung in die Geheimnisse
der CSS, die andeutet, was sie alles können und warum
man sich auf sie einlassen sollte, habe ich hier
ausgelagert.
Die schlechte Nachricht: So gut die CSS im Prinzip sind, so zickig verhalten sie sich im Browser. Oder besser gesagt, so zickig verhalten sich die Browser, wenn sie es mit CSS zu tun bekommen. Vieles von dem, was CSS "im Prinzip" können, wird von keinem derzeit erhältlichen Browser dargestellt. Anderes nur in einigen Browsern oder in verschiedenen Browsern auf verschiedene Weise - ausführlich aufgezählt auf Mastergrid.
Ein paar Auszeichnungen werden tatsächlich sogar in allen Browsern gleich dargestellt. Leider gehört selbst etwas so Elementares wie die Einstellung von Schriftgrößen nicht dazu. Während die (vom Standard missbilligte) Formatierung mit (font size=x) immerhin von meinen Testbrowsern weitgehend gleich dargestellt werden, führt die theoretisch gleichwertige und standardgemäße Auszeichnung mit (style="font-size:x") auf meinem System zu erheblichen Unterschieden.
Die Einschränkung "auf meinem System" ist wichtig - deshalb sind hier auch gleich die Screenshots mitgeliefert. Die jeweils im Browser dargestellten Dateien kann man sich gerne herunterladen und für Tests im eigenen System verwenden. Wahrscheinlich sehen die Ergebnisse überall anders aus - wer will schon sagen, was da "richtig" wäre.
Diese Abweichungen haben eine ganze Reihe von Ursachen - wer
mehr darüber wissen will, findet Informationen und Links hier.
"Pixelgenau" bleibt eine Illusion
Nach alledem ist klar, daß
ein "pixelgenaues Layout" für Webtexte bestenfalls dann zu
erreichen ist, wenn man seine Seiten komplett aus Grafiken
aufbaut. Das macht doch keiner? Nicht mit Gifs oder JPEGs
vielleicht, aber leider immer wieder in Flash. Und dann wundern
sich die Macher, daß die Suchmaschinen nichts von ihnen wissen
wollen. Und die User, sofern sie nicht gerade an TDSL oder
T1 hängen, auch nicht.
Die Arbeit mit Schriften kann also nicht das Ziel haben, auf
allen Browsern und allen Systemen das exakt gleiche Schriftbild
zu produzieren - es geht alleine darum, Schrift so zu gestalten,
daß sie das Verständnis erleichtert und den verwöhnten Anforderungen
der Augenmenschen des audiovisuellen Zeitalters entgegenkommt.
Auf vielen Seiten wird zu diesem Zweck mit festen Schriftgrößen
z.B. durch Formatierung mit px oder pt gearbeitet. Damit kann
man zwar relativ leicht ein einheitliches Schriftbild erzielen.
Wenn man dann auch noch feste Tabellenbreiten verwendet, kommt
man zu Seiten, die immer gleich aussehen - und sich weder
der von mir gewählten Breite des Browserfensters, noch der
Auflösung des Bildschirms, noch der Sehstärke meiner Augen
anpassen lassen. Auf www.stern.de
oder www.computerwoche.de
kommt man da mit hoher Auflösung ganz schön ins Schwitzen.
Das Kreuz mit den starren Designs
Auch das sehr aufs Platzsparen
ausgelegte Design vieler Portalseiten, bei dem man möglichst
viel Text auf einen Bildschirm quetscht, erscheint wenig sinnvoll.
Je mehr Textschnipsel man mir auf einmal vorsetzt, desto weniger
spontanen Durchblick habe ich als Leser. Und bei längeren
Texten - wie oft auf dem WWM - ist es erst recht wichtig,
ein augenfreundliches Schriftbild zu präsentieren - selbst
wenn der Leser dann einmal öfter scrollen muß. Dem Besucher
die Wahl der Schriftgröße im Zweifelsfall selbst zu überlassen,
bietet da eine gute Kompromisslösung. www.spiegel.de
und www.heise.de
zeigen, wie man es richtig macht.
"Friß oder stirb" als Design-Richtlinie geht an Sinn und Zielsetzung des WWW gründlich vorbei. Ich gehöre nicht zu den Puristen, die meinen, jeder in Web gestellte Content müsse auf jeder "device" darstellbar sein. Das Webwriting-Magazin wird nicht für das Handy-Display geschrieben - punktum. Aber "normale" Seite sollten auf "normalen" Geräten wie Laptop und PC ohne Abstriche angesehen werden können, und zwar zu den Einstellungen des Browserfensters und der Schriftgröße, mit der denen der User normalerweise arbeitet, und das, ohne daß das Layout sich total auflöst.
Wie es funktioniert
Um das Konzept der CSS etwas
anschaulicher darzustellen und eine Einstiegsmöglichkeit zu
bieten, auch einmal selbst mit dem Mechanismus herumzuexperimentieren,
habe ich ein Miniprojekt konzipiert, das gleichzeitig auch
Antwort auf eine oft gestellte Frage gibt: Wie kann man Texte
so formatieren, daß sich plattformübergreifend ein einheitliches
Schriftbild ergibt?
Die Lösung sollte insgesamt drei Bedingungen erfüllen:
- Die Darstellung soll in allen bedeutenden Browsern auf allen bedeutenden Betriebssystemen in etwa gleich ausfallen - damit ist Wiedererkennbarkeit und CI gewährleistet;
- Nicht nur Schriftgrößen und -stärken, sondern auch die Zeilenabstände sollen in relativ feiner Abstufung variabel sein - so können Textelemente unterschiedlicher Bedeutung differenziert dargestellt werden;
- Die von MS-Explorer und Netscape gebotene Möglichkeit zur Skalierung der Schriftgröße soll erhalten bleiben - das erlaubt dem Besucher, den Browser an seine persönliche Situation anzupassen.
Leider stehen diese Anforderungen
in einem sehr spannungsvollen Verhältnis zueinander. Die erste
entspricht zwar den Sehgewohnhgeiten vieler Surfer, widerspricht
aber dem "reinen Geist" von HTML. Allerdings ist dieser "reine
Geist" mit sich selbst nicht ganz im reinen, weil ausgerechnet
das Formatierungselement "font size", das zuverlässig browserübergreifend
funktioniert, in der Zukunft von HTML keine Rolle mehr spielen
soll. Die statt dessen nun offiziell empfohlenen CSS bieten
Formatierungsmöglichkeiten, die weit über das ursprüngliche
HTML hinausgehen - dazu gehört auch die in der zweiten Anforderung
genannte Möglichkeit zur Variation von Zeilenabständen. Aber
bloß weil eine Formatierung in CSS definiert ist, ist noch
lange nicht gesagt, daß die Browser sie auch darstellen können.
Ältere Browser (MSIE. NS und Opera bis Version 3 einschließlich),
geben bestenfalls einen kleinen Teil des Umfangs von CSS 1
aus dem Jahr 1996 wieder.
Der Ausreißer: NS 4.7
Ein Fall für sich ist der Netscape
Navigator 4.7, der leider immer noch nicht von den Desktops
der User verschwinden will - erst kürzlich ist unter der Nummer
4.79 eine neue Version herausgekommen, die zwar einige weniger
wichtige Bugs beseitigt, die Hauptmängel dieses Browsers,
der CSS nur auf dem Umweg über Jacvascript ausführt, aber
unangetastet läßt.
Die anderen aktuellen Browser, MSIE ab 5.5, Navigator 6, Mozilla
und Opera 5, reagieren auf sauberes HTML und ordentliche CSS
zunehmend gleichartig - obwohl sie alle noch weit davon entfernt
sind, die Möglichkeiten von Stylesheets wirklich auszuschöpfen.
Sie beherrschen zwar den größten Teil von CSS 1 und einige
weniger interessante Möglichkeiten von CSS 2 - aber noch
in diesem Jahr soll CSS 3 verabschiedet werden.
Die DM geht, das EM kommt
Zur Formatierung der Schriftgröße
stellt CSS eine ganze Reihe von Maßeinheiten
zur Verfügung. Welche Unterschiede sich bei ihrer Anwendung
in den beiden meistgebrauchten Browsern MSIE 5.x und NS 4.7
im einzelnen ergeben, habe ich hier  komplett
aufgelistet.
Für die Zielsetzung meines Miniprojektes empfehlen sich unter
diesen Umständen nur die Formatierung mit EM und EX. Ich habe
mich hier für EM entschieden, weil diese Einheit nach den
Empfehlung des W3C wohl in Zukunft die größte Rolle
spielen wird.
Lore im Chaosland
Der Versuch, eine Textseite
mit der schönen Geschichte von Lorem
Ipsum über Styleangaben mit EM zu formatieren, scheint
allerdings zunächst geradewegs ins Chaos
zu führen. Und die Anreicherung des Stylesheets durch die
ohnehin geplante Angabe für einen etwas großzügigeren Zeilenabstand
reduziert dieses Chaos nur unwesentlich. Allerdings nicht,
wenn man die Formatierung als Attribut von "body" vornimmt
- das führt zu einem unter dem Gesichtspunkt der browserübergreifenden
Darstellung wenig
zufriedenstellenden Ergebnis und kann bei einem kleinen
Fehler im Code (Komma statt Punkt in der Angabe 1.5 em für
den Zeilenabstand) zu einem höchst merkwürdigen
Verhalten führen.
Besser wird es erst, wenn man die line-height so, wie es sich
gehört, im jeweiligen Absatzformat bestimmt: Nun erhält man
kleineren Zeilenabstand bei kleineren, und größeren Zeilenabstand
bei größeren Schriften. Wie zu erwarten, stimmt das
Ergebnis für MSIE 5.5, NN6 und Mozilla weitgehend überein
- nur der NS 4.7 tanzt aus der Reihe. Die Buchstabenhöhen
weichen zwar nur in einem erträglichen Maß ab, aber die Zeilenabstände
sind nicht zu gebrauchen: Der NN 4.7 bezieht das Format für
den Zeilenabstand offenbar nicht auf den jeweiligen Absatz,
sondern auf das Ausgangsformat.
Eine Extrawurst für NS 4.7
Das einzige Mittel, hier Abhilfe zu schaffen, besteht darin, für den NN 4.7 ein eigenes Stylesheet zu schreiben, das dann über eine Browserweiche zugeordnet wird. Mit ein bißchen Probieren läßt sich so eine Darstellung erreichen, bei der Zeichengröße und Zeilenabstand weitgehend übereinstimmen. Nur bei den Abständen zwischen den Absätzen gibt es noch einen sichtbaren Unterschied, der sich aber bei den praktisch verwendbaren Formaten im Rahmen hält.
Durch Anwendung weiterer Eigenschaften von CSS läßt sich auch diese Abweichung beseitigen.
Das Beispiel dient jedoch eher der Demonstration und wird
nur begrenzt zur praktischen Nachahmung empfohlen, weil durch
den Einsatz von "padding" im Style unerwünschte Nebenwirkungen
auftreten können. Ebenfalls eher der Demonstration dient die
Datei blindtext_merker.htm
mit ihren Stylesheets - bei ihr wurden die CSS so ausgelegt,
daß der Name des jeweils von der Browserweiche genutzten Stylesheets
in der Überschrift hervorgehoben wird. In der Testphase von
CSS und Browserweichen ist das ausgesprochen praktisch. Aber
nicht solche Tricks sind das Entscheidende, sondern folgende
Tatsache: Um die Macken des NN 4.7 auszubügeln, muß
man nicht die ganze HTML-Seite eigens auslegen - es reicht,
wenn man ein und derselben Seite per Browserweiche jeweil
das passende CSS zuweist.
Die hier skizzierte Lösung hat bis jetzt noch zwei Schwachpunkte: Der eine ist die Browserweiche. Sie setzt Javascript voraus - und wer Javascript deaktiviert hat, bekommt das Stylesheet erst gar nicht zu sehen. Zumindest partielle Abhilfe verschafft hier ein vor der Browserweiche fest codierter Aufruf eines Standars-Stylesheets - das gilt dann für alle, die kein Javascript benutzen. Außer für die Benutzer von Netscape 4.7. Da dieser Unglücksbrowser auch CSS generell über Javascript interpretiert, gehen ohne JS prinzipiell auch keine CSS. Da kann man halt nichts machen.
Noch mehr Extrawürste
Der zweite Schwachpunkt besteht
darin, daß bis jetzt nur die Unterschiede zwischen den Windows-Browsern
berücksichtigt sind - Anwender von Mac oder Unix sehen mit
den für Windows "richtigen Einstellungen" unter Umständen
eine erheblich zu
kleine Schrift. Nun läßt sich eine Browserweiche nachgerade
beliebig verfeinern und erweitern - inwieweit das nötig ist,
muß jeder Anbieter selbst überlegen. Eine Kompromisslösung,
die wenigstens einem bedeutenden Teil der Anwender von Non-Windows-BS
eine größere Schrift gönnt, könnte darin bestehen, den Browsern,
die bei der Abfrage auf MSIE, NN 4.7 und NN 6 durch das Sieb
gefallen sind, gemeinsam ein Stylesheet mit größerer Schriftauszeichnung
zuzuweisen. Ich habe das hier mal versuchsweise gemacht und
bin sehr daran interessiert zu hören, was die Anwender von
Non-Windows-BS beim Aufruf von blindtext_weiche.htm
zu sehen bekommen. (Bitte gleich ins mailto:
schreiben.)
Happy End
Mit der in diesem kleinen Projekt
eingesetzten Browserweiche und den entsprechenden Stylesheets
(download, Anwendung und Weiterentwicklung sind ausdrücklich
erwünscht, die wesentlichen Dateien zu einem Zip verpackt
gibt es hier) sind Seiten zu
bauen, die bei den meisten Normalusern weitgehend gleich dargestellt
werden. Kenner und Könner, die exotische Software einsetzen
oder ihren Opera mit einer individuellen Kennung auf die Reise
schicken, werden weiterhin das Vergnügen haben, auf vielen
Seiten mit unvorhersehbaren Effekten konfrontiert zu werden.
So bekommt jeder, was er haben möchte.
Michael Charlier
 Diesen Beitrag kommentieren?
 Hier geht's ins Forum »»»
|
