9 Optimaler Code: Empfehlungen des W3C und Standards - dpunkt Verlag
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
151
9 Optimaler Code: Empfehlungen des
W3C und Standards
Denken Sie zurück an das Traumhaus aus Kapitel 1, und stellen Sie sich
vor, es ist fertig und Sie sind bereits eingezogen. Was wäre, wenn Sie
eines Tages nach Hause kämen, Ihre Haustür wäre herausgefallen, alle
Fußböden wären überflutet und Ihr Nachbar läge bewusstlos am Fuße
der Treppe?
Keine Angst, das wird nicht passieren, weil – obwohl Sie dessen
vielleicht nicht gewahr waren – Ihr Haus nach bestimmten Standards
erbaut wurde, die solche Katastrophen verhindern. Ihre Türen haben
eine standardisierte Stärke, die Wasserleitungen halten einem festge-
legten Wasserdruck stand und die Höhe und Tiefe Ihrer Treppenstufen
entspricht einem Standard, damit sie so sicher wie möglich sind. Das
sind nur ein paar Teilbereiche Ihres Hauses, die den Normen entspre-
chen müssen. Um sicherzustellen, dass Ihr Haus für Sie und Ihre Besu-
cher sicher und bequem ist, haben die Erbauer Ihres Traumhauses
weitaus mehr Standards angewandt als hier erwähnt. Vielleicht über-
rascht es Sie, dass die meisten Aspekte Ihres Hauses bestimmten Stan-
dards entsprechen müssen und dass Ihr Nachbar beim Bau genau den-
selben Standards folgen musste – obwohl sein Haus vollkommen
anders aussieht als Ihres.
Für das Internet gibt das World Wide Web Consortium (W3C)
Empfehlungen heraus, die von uns allen befolgt werden müssen: Desi-
gner und Entwickler von Internetseiten, Browserhersteller sowie Ent-
wickler von Programmen, mit deren Hilfe Websites entwickelt werden.
Trotz seines hochtrabenden Titels ist das World Wide Web Consortium
keine übergeordnete Autorität, die versucht, ihre Empfehlungen bei
einer unempfänglichen Zuhörerschaft mit Zwang durchzusetzen. Ihre
Ratschläge werden normalerweise von allen diesen Designern, Ent-
wicklern, Browserherstellern und Softwareentwicklern eifrig befolgt!
Obwohl diese Standards existieren, gibt es endlos viele Wege,
Webseiten zu erstellen – genau wie beim Häuserbau. Eine Grundlage
zu schaffen, auf der wir Internetseiten oder Häuser bauen können, die
Shirley Kaiser, Projektfahrplan für erstklassige Websites, dpunkt.verlag, ISBN 978-3-89864-449-5
D3kjd3Di38lk323nnm152 9 Optimaler Code: Empfehlungen des W3C und Standards
von jedermann genutzt werden können, das ist die Motivation, die
hinter der Entwicklung dieser Standards steht. Für das Internet garan-
tieren uns diese Standards, dass jedermann von jedem Ort aus mit
jeder Verbindung und mit jedem System auf die Webseiten zugreifen
kann und dass die Seiten sich erwartungsgemäß verhalten.
Langfristig möchte das W3C einen unabhängigen Zugang, die
Semantik und eine vertrauenswürdige Umgebung für das Internet vor-
anbringen1. Die Checklisten in diesem Kapitel sind dazu da, Sie beim
Entwickeln eines gut strukturierten HTML- und CSS-Codes zu unter-
stützen und damit bestmögliche Resultate für Ihre Website zu erzielen.
9.1 Geheimnisvolles HTML
Wahrscheinlich haben Sie schon Code gesehen, den man als »tag
soup« bezeichnet – das ist ein nicht standardkonformer und mangel-
haft strukturierter HTML-Code, der von seinen Erzeugern zwar ver-
standen worden sein mag, als sie die Website schrieben, der aber
nahezu unverständlich ist, wenn man später wieder darauf zurück-
kommt und ihn pflegen will. Wir wollen dagegen, dass der Code über-
sichtlich und nachvollziehbar ist und dass Layout und Design der
gesamten Website einheitlich aufgebaut sind. Mit einem aussagekräf-
tigen, strukturierten HTML-Code und mit Hilfe von CSS kann man
das garantieren. Dann wird jeder, der Ihren Internetauftritt besucht,
die Elemente für Überschriften, Listeneinträge, Absätze und andere
Auszeichnungen richtig und ohne Umwege verstehen. Ein weiterer
Vorteil ist, dass sich auch Suchmaschinen und alternative Ausgabege-
räte (z.B. Screenreader) auf korrekt strukturierten HTML-Code stüt-
zen. Verwenden Sie die folgenden Checklisten, damit der Code Ihrer
Website sauber ausgeführt und strukturiert wird.
Checkliste 9–1
Schreiben Sie einen einheitlichen HTML-Code.
Verwenden Sie eine korrekte DOCTYPE-Deklaration.
Browser erwarten eine DOCTYPE-Deklaration am Anfang einer
jeden Seite. Sie teilt dem Browser mit, wie er die Seite wiedergeben
soll und ist somit maßgeblich dafür verantwortlich, dass Seiten in
allen neueren, standardkonformen Browsern korrekt funktionieren
und angezeigt werden2.
1. W3C, W3C Mission in About the World Wide Web Consortium (W3C), (14.
Oktober, 2004) http://www.w3.org/Consortium/#mission
2. Mehr zu standardkonformen Webseiten gibt es im Artikel von Jeffrey Zeldman, Fix
Your Site With the Right DOCTYPE! http://www.alistapart.com/articles/doctype/,
und bei My Web Site is Standard! And Yours? http://www.w3.org/QA/2002/04/
Web-Quality von Karl Dubost9.1 Geheimnisvolles HTML 153
Die DOCTYPE-Templates
Auf den Internetseiten des Web Standards Project (WaSP) gibt es im
Bereich Learn3 freie Strukturvorlagen, die Designer und Entwickler bei
der Erstellung konformer HTML- und XHTML-Dokumente mit korrekten
DOCTYPE-Deklarationen unterstützen sollen. Sie dürfen sie gerne her-
unterladen und benutzen, sie sind ein guter Start in die Entwicklung einer
Website.
Validieren Sie Ihren Code. 3
Verwenden Sie den Validator des W3C, um Ihren HTML-Code zu
überprüfen. Dort werden zwei Dienste angeboten: ein CSS-Valida-
tor4 und ein HTML-Validator5. Wenn Sie Ihren Code während der
Entwicklung öfters einmal validieren, finden Sie schnell Fehler und
Probleme, die sich auf diese Weise einfacher beheben lassen, als
wenn Sie sich die Validierung bis zum Schluss aufheben. Warten Sie
nicht damit, bis Sie eine ganze Seite fertiggestellt haben, oder, noch
schlechter, sogar die gesamte Website!
Laden Sie den korrekten Zeichensatz mit dem Content-Type-Attribut für
das -Tag in jede Seite.
Sehen Sie hier zum Beispiel den Anfang eines Dokuments, das im
XHTML 1.0 strict DOCTYPE geschrieben ist und den Zeichensatz
ISO-8859-1 (auch Latin 1) benutzt. Achten Sie auf das -Tag, in dem der Zeichensatz gesetzt wird.
Ein raffiniertes neues XHTML-Dokument
Beachten Sie, dass im W3C-Standard empfohlen wird, dass
XHTML-Dateien auch mit einer XML-Deklaration beginnen soll-
ten, in der der Zeichensatz angegeben wird, wie zum Beispiel:
3. http://www.webstandards.org/learn/reference/templates/
4. http://jigsaw.w3.org/css-validator/
5. http://validator.w3.org/
Shirley Kaiser, Projektfahrplan für erstklassige Websites, dpunkt.verlag, ISBN 978-3-89864-449-5154 9 Optimaler Code: Empfehlungen des W3C und Standards
Leider führt das im Internet Explorer 6 dazu, dass die darauffol-
gende DOCTYPE-Deklaration ignoriert wird. Im Internet
Explorer 7 wurde dieser Fehler behoben, aber solange der Internet
Explorer 6 noch weit verbreitet ist, ist es am besten, die XML-
Deklaration auszulassen. Sie müssen aber damit rechnen, dass
manche XML-fähige Software Ihre Dokumente dann mit dem
Standard-Zeichensatz UTF-8 interpretiert6.
Reservierte HTML-Zeichen sollen als HTML-Entitäten codiert werden.
Reservierte Zeichen, die als HTML-Entitäten codiert sind, können
von Browsern und anderen Werkzeugen korrekt interpretiert wer-
den. Nicht codierte Zeichen werden vom Browser möglicherweise
falsch interpretiert, beispielsweise wird das Zeichen < als öffnendes
HTML-Tag verstanden oder & als Beginn einer Referenz auf eine
HTML-Entität. In der Tabelle 9–1 sind ein paar der gebräuchlichs-
ten reservierten Zeichen und ihre korrekten Codes zusammenge-
fasst7.
Tab. 9–1 Name des Zeichens Entität-Name Entität-Nummer Zeichen
HTML-Entitäten
Anführungszeichen " " "
und ihre Codierungen
Et-Zeichen & & &
Kleiner-als-Symbol < < <
Größer-als-Symbol > > >
Fügen Sie das title-Element in alle Seiten ein.
Die Begriffe, die Sie in das title-Element (das im head-Element
einer Webseite enthalten ist) einfügen, werden zu einem benutzer-
freundlichen Seitentitel, der gleichermaßen hilfreich ist für Such-
maschinen, die Benutzer und die lokale Suchfunktion.
Was ist neu in Microsoft Office 2004?
6. Weil ISO-8859-1 eine eingeschränkte Untermenge von UTF-8 ist, gibt es normaler-
weise keine Probleme mit englischsprachigen Dokumenten oder anderen Sprachen,
die denselben Zeichensatz verwenden
7. Mehr Details bei HTML Document Representation: Character Entity References,
in HTML 4.01 Specification: W3C Recommendation 24 December 1999
(24. Dezember, 1999) http://www.w3.org/TR/REC-html40/charset.html9.1 Geheimnisvolles HTML 155
Der obige HTML-Code erzeugt einen Titel, der vom Browser wie-
dergegeben wird. Der Text im title-Element wird nur in der Titel-
leiste des Browsers angezeigt, er ist sonst nirgendwo in der Seite
sichtbar, wie Sie in der Abbildung 9–1 sehen.
Abb. 9–1
Das title-Element in der
Browserdarstellung
Das title-Element ist nicht dasselbe wie das title-Attribut. Das
Attribut kann fast allen HTML-Elementen als zusätzliche Informa-
tion zugefügt werden, wie hier:
Movable Type
Fügen Sie meta-Elemente zur Verbesserung des Suchmaschinenrangs ein.
Mehr zu den Inhalten der -Tags lesen Sie im Kapitel 3.
Verwenden Sie keinen proprietären HTML-Code oder Skripts.
Solche Skripte sind oft nicht standardkonform, weshalb es am bes-
ten ist, sie nicht zu verwenden.
Schreiben Sie keinen veralteten HTML-Code.
Weil Elemente und Attribute, die als veraltet (engl.: deprecated)
gekennzeichnet sind, aus zukünftigen Versionen der W3C-Empfeh-
lungen gelöscht werden, sollten Sie sie erst gar nicht verwenden.
Viele dieser veralteten Elemente und Attribute, wie etwa das häufig
verwendete center- oder font-Element werden durch CSS-Regeln
ersetzt, die dasselbe leisten.
Die Elemente applet, basefont, center, dir, font, isindex, menu,
s, strike und u sind alle veraltet. Eine Liste der veralteten Elemente
und Attribute8 sowie eine aktuelle Liste der gültigen Elemente9
können Sie auf der Website des W3C nachlesen.
Zeichnen Sie Text mit einem HTML-Editor aus oder mit einem W3C-konfor-
men CMS.
Arbeiten Sie nicht mit einem Textverarbeitungsprogramm, um Ihre
Texte in HTML oder XHTML zu konvertieren. Textverarbeitun-
8. http://www.w3.org/TR/REC-html40/appendix/changes.html#h-A.3.1.2
9. http://www.w3.org/TR/REC-html40/index/elements.html
Shirley Kaiser, Projektfahrplan für erstklassige Websites, dpunkt.verlag, ISBN 978-3-89864-449-5156 9 Optimaler Code: Empfehlungen des W3C und Standards
gen und auch andere Programme sind dafür bekannt, dass sie die
den HTML-Code unnötig und unangemessen aufblähen. Statt sol-
chen Paketen sollten Sie mit einem HTML-Editor oder CMS arbei-
ten, die die W3C-Empfehlungen umsetzen. Validieren Sie Ihre Sei-
ten immer, bevor Sie sie veröffentlichen, um sicherzugehen, dass sie
korrekt angezeigt werden.
Wenn Sie in der unglücklichen Lage sind und bereits bestehende
Webseiten bearbeiten müssen, die mit einer Textverarbeitung
erzeugt wurden, dann hilft Ihnen vielleicht ein Dienstprogramm,
die Dateien von dem unnötigen Ballast im HTML-Code zu
befreien, zum Beispiel HTML Tidy oder das Kommando Clean Up
HTML im Macromedia Dreamweaver10.
Optimieren Sie den HTML-Code, der von Grafikprogrammen erzeugt
wurde.
Grafikprogramme sind berüchtigt, weil sie Bilder zerschneiden und
in Tabellenzellen ablegen. Diese Vorgehensweise erzeugt einen
unbeschreiblich chaotischen und aufgeblähten HTML-Code, mit
dem der Designer die Trennung von Code und Präsentation einfach
vergessen kann! Deshalb ist es wichtig, HTML-Code, der von Gra-
fikprogrammen erzeugt wurde, zu optimieren. Viel besser ist es,
den Code selber zu schreiben, die Präsentation mit CSS zu realisie-
ren und Tabellen zur Darstellung von tabellarischen Daten einzu-
setzen, für die sie gedacht sind.
Halten Sie sich über die Empfehlungen auf dem Laufenden.
Die Empfehlungen des W3C für die Technologien, wie etwa HTML,
XHTML, XML, CSS und DOM bieten den Designern und Entwicklern
enorme Möglichkeiten und werden zunehmend von den Herstellern der
Browser und anderen Softwarefirmen unterstützt. Es ist wichtig, in allen
Technologien, die man einzusetzen plant, sehr versiert zu sein und sich
ständig über die neuesten Änderungen und optimalen Herangehenswei-
sen bei ihrer Anwendung zu informieren.
10. Erläuterungen finden Sie bei Clean up your Web pages with HTML TIDY
http://www.w3.org/People/Raggett/tidy/ auf der W3C-Seite, und im Tutorial von
Macromedia, Importing a Microsoft Word HTML File http://livedocs.macrome-
dia.com/dreamweaver/mx2004/using/04_doc10.htm#906369.1 Geheimnisvolles HTML 157
9.1.1 Den Inhalt von der Präsentation trennen
Die Trennung von Inhalt und Präsentation gibt uns die Flexibilität,
geräteunabhängige Seiten zu erstellen, Inhalte wieder zu verwenden,
Aktualisierungen und die Pflege der Inhalte zu vereinfachen und die
Geschwindigkeit der Seiten zu erhöhen. Nehmen Sie die folgenden
Checklisten zu Hilfe, um die Inhalte Ihrer Webseiten so weit wie mög-
lich von der Präsentation zu trennen.
Checkliste 9–2
Arbeiten Sie mit externen CSS-Dateien.
Das Einbinden externer CSS-Dateien in Ihre Webseiten ist eine effi-
ziente und bequeme Art des Umgangs mit CSS für Ihre Website.
Auf diese Weise können Sie Änderungen machen, die sich auf der
gesamten Website auswirken, ohne dass Sie jede einzelne Datei
bearbeiten müssen. Sie stellen mit dieser Arbeitsweise nicht nur
sicher, dass der Inhalt von der Präsentation getrennt wird, sondern
Sie sparen auch noch Übertragungsvolumen und reduzieren die
Dateigröße: Das Stylesheet wird direkt in den Browsercache des
Benutzers heruntergeladen und von jeder Seite des Internetauftritts
benutzt, die der Besucher aufruft. Der Zugriff auf das Stylesheet
erfolgt durch das link-Element im Seitenkopf:
Hier steht Ihr Seitentitel
Wenn Sie externe Dateien einbinden, sollten Sie absolute Links anstelle
relativer Links verwenden.
Ältere Browser erkennen den Speicherort einer eingebundenen
Datei relativ zu der aufrufenden Datei nicht immer vorhersehbar
oder folgerichtig11. Gehen Sie auf »Nummer Sicher« und verwen-
den Sie einen absoluten Link zu der Datei, ausgehend vom Wurzel-
verzeichnis Ihrer Domain. Absolute Links können Sie auf allen Sei-
ten Ihres Internetauftritts kopieren, egal, wo die aufrufende Seite
gespeichert ist. Außerdem sehen absolute Links viel besser aus als
relative Links.
Schauen Sie sich zum Beispiel diesen relativen Link an:
11. Jeffrey Zeldman, Designing with Web Standards (Indianapolis: New Riders, 2004),
233
Shirley Kaiser, Projektfahrplan für erstklassige Websites, dpunkt.verlag, ISBN 978-3-89864-449-5158 9 Optimaler Code: Empfehlungen des W3C und Standards
Idealerweise könnte dieser Link durch den folgenden absoluten
Link ersetzt werden:
Der relative Link sagt dem System, dass es zuerst zwei Verzeich-
nisebenen zurückspringen, dann das Verzeichnis css auswählen
und darin die Datei styles.css suchen soll. Beim absoluten Link
wird ein viel einfacheres Kommando ausgeführt: Es weist den Ser-
ver an, im Wurzelverzeichnis zu starten, das Verzeichnis css auszu-
wählen und darin die Datei styles.css zu suchen. Diese Codezeile
funktioniert, ob nun die einzubindende Datei eine, zwei oder sogar
zehn Ebenen tiefer als das Wurzelverzeichnis liegt.
Vermeiden Sie eingebettete Skripte oder Stylesheets.
Eingebettete Skripte und CSS-Dateien lassen die Dateigrößen der
Webseiten anwachsen und können den HTML-Code in Unordnung
bringen. Es mag angebracht sein, eingebettete Styles oder auch
Style-Attribute zu nutzen, wenn Sie bestimmte Formate nur für ein-
zelne Seiten oder einzelne Elemente brauchen. In allen anderen Fäl-
len sollten Sie eingebettete Styles oder Style-Attribute so weit wie
möglich vermeiden.
Gestalten Sie die Internetseiten und ihre Elemente mit CSS.
Zum Glück unterstützen moderne Browser CSS besser als jemals
zuvor. Das bedeutet, Entwickler können zur Gestaltung Ihrer
Webseiten ausgiebig davon Gebrauch machen. Sie können mit CSS
tatsächlich so ziemlich alle Elemente Ihrer Webseite gestalten, ob
Bilder, tabellarische Daten, horizontale Trennlinien, Überschriften
und vieles mehr. Setzen Sie CSS ein, um:
■ Schriftfamilien, Schriftgrößen und Schriftfarben eines Textes zu
ändern
■ Rahmen, Innen- und Außenränder für Bilder oder Tabellenzel-
len einzufügen
■ Die Ausrichtung von Texten oder anderen Inhalten in einer
Tabelle zu ändern
■ die Hintergrundfarben zu ändern oder Hintergrundbilder ein-
zufügen
Ihre Internetseiten sind nicht mehr durch font-Elemente und style-
Attribute aufgebläht und die positiven Folgen für die Dateigrößen
können enorm sein! Und selbstverständlich macht die Definition
der Style-Regeln in der CSS-Datei die Pflege des Internetauftritts
unendlich einfacher.9.1 Geheimnisvolles HTML 159
Suchen Sie proprietäre HTML-Codierung.
Halten Sie stets Ausschau nach altem und proprietärem HTML-Code! Als
die Unterstützung von CSS in den Browsern noch nicht so ordentlich war,
gingen Designer einen andern Weg, damit die Ränder einer Webseite in
allen Browsern und Plattformen einheitlich dargestellt wurden. Diese Vor-
gehensweise wurde als »Die vier proprietären Reiter der Nicht-Validie-
rung«12 bezeichnet:
So etwa um dieselbe Zeit, als die Browsergeneration der Version 2 veröf-
fentlicht wurde, gab es für den Internet Explorer die proprietären Attribute
leftmargin und topmargin, während Netscape seine proprietären
Attribute marginwidth und marginheight beisteuerte. Sie sind alle
noch im HTML-Code vieler Seiten zu finden, vielleicht haben Sie sogar
ein Projekt zur Überarbeitung, das mit diesen Attributen durchsetzt ist.
Wenn Sie die Einstellungen für die Ränder in einem externen Styles-
heet festlegen, können Sie davon ausgehen, dass der HTML-Code für
das body-Element der Webseite schlank ist. Sie reduzieren damit das
Übertragungsvolumen, weil die »vier Reiter« auf keiner Seite zum Ein-
satz kommen und das externe Stylesheet nur ein einziges Mal für die
gesamte Website geladen wird:
body {
margin:0;
padding:0;
}
Wie sieht das body-Element aus, wenn die Außen- und Innenränder der
Seiten mit CSS festgelegt werden?
Das ist viel schlanker und außerdem viel sauberer.
Setzen Sie das table -Element nur ein, um tabellarische Daten anzuzeigen.12
Der eigentliche Zweck des table-Elements besteht darin, tabella-
rische Daten anzuzeigen, wie etwa Tabellen13. Bevor Browser prä-
sentationsbezogenes CSS unterstützten, verwendeten die Designer
das table-Element zu Layoutzwecken und zur Präsentation, insbe-
12. Mehr zu den »Vier Reitern« lesen Sie im Artikel von Jeffrey Zeldman, From Table
Hacks to CSS Layout: A Web Designer’s Journey http://www.alistapart.com/artic-
les/journey/
13. W3C, Tabellen: Introduction to Tables in HTML 4.01 Specification (24. Dezem-
ber, 1999) http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.1
Shirley Kaiser, Projektfahrplan für erstklassige Websites, dpunkt.verlag, ISBN 978-3-89864-449-5160 9 Optimaler Code: Empfehlungen des W3C und Standards
sondere mit dem 1-Pixel-GIF-Trick von David Siegel und dem Trick
mit der unsichtbaren Tabelle14. Moderne Browser unterstützen
schon seit ein paar Jahren präsentationsbezogenes CSS. Als opti-
males Verfahren wird der Gebrauch von CSS empfohlen und nicht
das table-Element. Behalten Sie sich dieses Element zur Darstel-
lung von tabellarischen Daten vor und erstellen Sie Ihre Layouts
mit CSS. 15 16 17 18 19
Die besten CSS-Referenzen
Zum Thema CSS gibt es eine wachsende Zahl hilfreicher, kreativer und
gut geschriebener Bücher und Referenzen. Zu den sehr empfehlenswer-
ten Titeln gehören die beiden SitePoint-Bücher HTML Utopia. Designing
Without Tables Using CSS, zweite Auflage, von Rachel Andrew und Dan
Shafer15 sowie The CSS Anthology16 von Rachel Andrew. Außerdem:
Cascading Style Sheets: Separating Content from Presentation, zweite
Auflage, von Owen Briggs, Steven Champeon, Eric Costello und Matt
Patterson (Berkeley: friends of ED, 2004); Designing with Web
Standards17 von Jeffrey Zeldman (Indianapolis: New Riders, 2004); More
Eric Meyer on CSS von Eric Meyer; und Web Standards Solutions: The
Markup and Style Handbook von Dan Cederholm (Berkeley: friends of
ED, 2004). Zwei hervorragende Referenzen zu CSS im Internet sind: der
Bereich CSS auf der Seite A List Apart18 und die Tutorien auf der Web-
site von Project Seven19.
9.1.2 Die Reinheit des HTML-Codes wahren
Wie bereits besprochen, verhält sich gut geschriebener, struktureller
HTML-Code einheitlich und wird leicht von jedem verstanden, der
mit Ihren Seiten zu tun hat. Sie können den HTML-Code mit CSS for-
matieren und so dafür sorgen, dass die Seiten leicht zu pflegen sind und
im gesamten Internetauftritt einheitlich aussehen. Suchmaschinen und
alternative Geräte verlassen sich ebenso auf einen strukturellen
14. David Siegel, Creating Killer Web Sites: The Art of Third-Generation Site Design,
(Indianapolis: Hayden Books, 1996), 67–82; David Siegel, The Single-Pixel GIF
Trick: Tips for Writers and Designers (14. März, 1996) http://www.killersites.com/
killerSites/1-design/single_pixel.html
15. In Deutsch erschienen als CSS. Anspruchsvolle Websites mit Cascading Stylesheets
– Grundlagen, Designtechniken und Referenz, 2. Aufl., dpunkt.verlag, 2006
16. In Deutsch erschienen als Der CSS-Problemlöser, dpunkt.verlag, 2005
17. In Deutsch erschienen als Webdesign mit Webstandards. Grenzenlos kompatibel,
Addison-Wesley, 2006.
18. http://www.alistapart.com/topics/code/css/
19. http://www.projectseven.com/tutorials9.1 Geheimnisvolles HTML 161
HTML-Code. Es ist deshalb ratsam, HTML-Elemente nicht zu miss-
brauchen oder abzukürzen. Verwenden Sie die Elemente nur zu ihrem
vorgesehenen Zweck!
Checkliste 9–3
Verwenden Sie passende Elemente für die Überschriften.
Anstelle von benutzerdefinierten Style-Klassen nehmen Sie dafür
vorgesehene Überschriften-Elemente. Beginnen Sie eine Webseite
immer mit einem h1-Element und weisen Sie dann in absteigender
Folge entsprechende h-Elemente zu:
Seitentitel
Artikelüberschrift
Text
Unterüberschrift des Artikels
Text
Unterüberschrift des Artikels
Text
Erschwindeln Sie keine Überschriften mit HTML-Code, so wie
hier:
Überschrift
Überschrift
Überschrift
Oder noch schlimmer:
Überschrift
Um Listen zu erzeugen, sollten Sie ul-, ol- und li-Elemente nutzen.
Listen sind innerhalb von Texten beliebte Gestaltungselemente,
sowohl in der unnummerierten (ul) als auch in der nummerierten
(ol) Variante. Entwickler und Designer, die den Nutzen, die Flexi-
bilität und die semantischen Vorzüge dieser Technik verstanden
haben, verwenden Listeneinträge (li) darüber hinaus auch gerne
für Navigationselemente. Denn bei einer Navigation, die mit Listen
und CSS erzeugt wurde, kann das Aussehen jederzeit grundlegend
umgestellt werden. So können Sie die Listenelemente der Naviga-
tion ohne großen Aufwand verändern, etwa: horizontal und quer
über die Seite laufend, ohne Aufzählungszeichen und dafür mit
ansprechenden Hintergrundgrafiken.
Shirley Kaiser, Projektfahrplan für erstklassige Websites, dpunkt.verlag, ISBN 978-3-89864-449-5162 9 Optimaler Code: Empfehlungen des W3C und Standards
Benutzen Sie die Elemente dl und dd für Definitionslisten20.
Verwenden Sie br-Elemente ausschließlich für Zeilenumbrüche im Absatz.
Neue Absätze oder Listenelemente sollten nicht mit dem br-
Element definiert werden, so wie hier:
Textabsatz
Textabsatz
1. Listeneintrag 1
2. Listeneintrag 2
Machen Sie dies mit korrektem HTML, d.h. mit dem p-Element:
Textabsatz
Textabsatz
Listeneintrag 1
Listeneintrag 2
21
Textabsätze und Listeneinträge formatieren
Textabsätze und Listeneinträge können mit CSS formatiert werden. Her-
vorragende Beispiele und Tutorien hierzu finden Sie in Web Standards
Solutions (Berkeley: friends of ED, 2004) von Dan Cederholm, in More
Eric Meyer on CSS (Indianapolis: New Riders, 2004) von Eric Meyer und
auf der Listmatic-Website von Russ Weakley im Bereich über die Forma-
tierung von Listen mit CSS21
Das pre -Element sollte nicht für allgemeine Formate verwendet werden.
Mit dem pre-Element wird vorformatierter Text ausgegeben, bei
dem Zeilenumbrüche deaktiviert sind. Außerdem wird innerhalb
dieses Elementes die Standardschrift des Browsers für Schriften mit
fester Laufweite benutzt und Leerzeichen werden berücksichtigt, es
sei denn, Sie haben dem Element mit CSS etwas anderes zugewie-
sen. Manchmal wird das pre-Element zur Darstellung von Gedich-
ten verwendet, aber weit öfters zur Darstellung von Code-Beispie-
len, weil die vorformatierten Einrückungen und Umbrüche in der
Darstellung erhalten bleiben22.
20. Dan Cederholm, More Lists in Web Standards Solutions: The Markup and Style
Handbook (Berkeley: friends of ED, an Apress Company , 2004), 110–20; W3C,
Listendefinitionen: the DL, DT, and DD Elements in HTML 4.01 Specification
(24. Dezember, 1999) http://www.w3.org/TR/html401/struct/lists.html#h-10.3
21. http://css.maxdesign.com.au/listamatic/
22. W3C, vorformatierter Text: The PRE element in HTML 4.01 Specification
(24. Dezember, 1999) http://www.w3.org/TR/html401/struct/text.html#edef-PRE,
Shirley E. Kaiser, M.A., Semantics, HTML, XHTML, and Structure, Brainstorms &
Raves (2. März, 2004) http://brainstormsandraves.com/articles/semantics/structure/9.2 Ausgezeichnetes XHTML 163
Verwenden Sie das span-Element sparsam.
Wenn es aussagekräftigere HTML-Elemente gibt, sollten Sie sie
auch benutzen. Anstatt hervorgehobener
Text zu schreiben, sollten Sie das vorgesehene Element für
Hervorhebungen einsetzen: hervorgehobener Text. Das
span-Element sollte nur als letzter Ausweg verwendet werden. 2324
Verfälschen Sie Ihren HTML-Code nicht!
Im Netz gibt es zahllose Quellen mit vernünftigen Ratschlägen zur Inte-
grität des HTML-Codes. Ich selbst habe auch ein paar Artikel zu diesem
Thema geschrieben: Don’t Fake Your Markup: Accessibility Issues for
CSS23 und Semantics, HTML, XHTML, and Structure24
9.2 Ausgezeichnetes XHTML
XHTML ist weniger tolerant als HTML. Aber wenn Sie es gewohnt
sind, Ihren Code zu validieren, fällt Ihnen die Umstellung auf XHTML
leicht. Sind Sie nachlässig in Bezug auf schließende Tags, Attributwerte
in Anführungszeichen oder die korrekte Verschachtelung Ihrer Ele-
mente, dann ist es höchste Zeit, Ihr Verhalten zu ändern und Ihre
Codier-Fähigkeiten weiterzuentwickeln. Diese Checkliste hilft Ihnen
bei der Umsetzung Ihres Codes von HTML 4.01 nach XHTML 1.0
Transitional, das auch die älteren Browser unterstützen.
Checkliste 9–4
Verschachteln Sie alle Elemente korrekt.
XHTML setzt voraus, dass alle Elemente korrekt ineinander
geschachtelt werden25.
Hier sehen Sie ein Beispiel, wie man es nicht machen sollte:
Hier steht Text
So sieht korrekt verschachteltes HTML aus:
Hier steht Text
Schreiben Sie alle Elementnamen und Attributnamen in Kleinbuchstaben.
23. http://brainstormsandraves.com/archies/2002/05/14/-
dont_fake_your_markup_accessibility_issues_for_css/
24. http://brainstormsandraves.com/articles/semantics/structure/
25. W3C, [Unterschiede zu HTML 4] in XHTML 1.0: The Extensible HyperText
Markup Language (Second Edition): A Re formulation of HTML 4 in XML 1.0
(1. August, 2002) http://www.w3.org/TR/xhtml1/#diffs
Shirley Kaiser, Projektfahrplan für erstklassige Websites, dpunkt.verlag, ISBN 978-3-89864-449-5164 9 Optimaler Code: Empfehlungen des W3C und Standards
Schließen Sie alle Elemente.
Leere Elemente werden mit /> geschlossen. Beachten Sie, dass ein
Leerzeichen vor dem Schrägstrich das Ende eines leeren Elements
kennzeichnet. Dieses abschließende Leerzeichen ist aus Gründen
der Abwärtskompatibilität mit älteren Browsern notwendig. Die
Tabelle 9–2 gibt einen kurzen Überblick über die meistbenutzten
schließenden Tags.
Tab. 9–2 HTML 4 XHTML 1.0
Leere Elemente in
XHTML schließen
Nichtleere Elemente müssen ebenfalls mit den entsprechenden Tags
geschlossen werden26. Die Elemente p und li im folgenden Beispiel
wurden korrekt mit und geschlossen.
Textabsatz
Text des ersten Listeneintrags
Text des zweiten Listeneintrags
Bei Ihrer Arbeit mit HTML sind Sie vielleicht ohne und
davongekommen, wenn Sie jedoch XHTML nutzen, werden Ihre
Dokumente ohne schließende Tags nicht validiert.
Geben Sie den verkürzten Attributen, wie etwa selected oder checked,
einen Wert27.
Mit HTML konnten Sie den folgenden Code nutzen, um in einem
Formular ein Kontrollkästchen anzuzeigen:
26. W3C, [Unterschiede zu HTML 4] in XHTML 1.0: The Extensible HyperText
Markup Language (Second Edition): A Reformulation of HTML 4 in XML 1.0
(1. August, 2002) http://www.w3.org/TR/xhtml1/#diffs
27. W3C, Verkürzte Attribute in XHTML 1.0: The Extensible HyperText Markup
Language (Second Edition): A Reformulation of HTML 4 in XML 1.0 (1. August,
2002) http://www.w3.org/TR/xhtml1/#h-4.59.2 Ausgezeichnetes XHTML 165
Um dasselbe Kontrollkästchen regelgerecht mit XHTML anzuzei-
gen, müssen Sie dem Attribut checked einen Wert zuweisen:
Setzen Sie die Attribute id und name für Sprungmarken.
Wenn Sie zum Beispiel einen internen Link Zum
Seitenanfang oben auf die Seite setzen, sollten Sie als Sprung-
marke angeben. Ältere Browser
unterstützen das id-Attribut vielleicht nicht, aber dafür das name-
Attribut, so dass Sie mit diesem Vorgehen allen Browsern gerecht
werden und das Dokument validiert wird28.
Setzen Sie das alt-Attribut für Bilder.
Im alt-Attribut sollten Sie eine hilfreiche und prägnante Beschrei-
bung des Bildes angeben. In XHTML sind zudem die Anführungs-
zeichen um Attributwerte vorgeschrieben, wie Sie hier sehen:
Bei Bildern, die nur zur Dekoration dienen, kann das alt-Attribut
leer bleiben, so wie hier:
Verwenden Sie & zur Darstellung des Et-Zeichens.
Manchmal wird das Et-Zeichen »&« in URLs benutzt, insbeson-
dere, wenn die URL von einem CGI-Skript erzeugt oder von einer
Suchfunktion zurückgegeben wurde. Zum Beispiel:
http://mybyz.com/cgi-bin/myscript.pl?class=john&doe=member
In XHTML muss das Et-Zeichen in die URL codiert werden, wie
hier:
In Tabelle 9–1 sind die Codierungen der gebräuchlicheren reservier-
ten Zeichen zusammengestellt, das doppelte Anführungszeichen ("),
das Et-Zeichen (&), das Kleiner-Symbol ().
28. W3C, Sprungmarken in XHTML 1.0: The Extensible HyperText Markup Lan-
guage (Second Edition): A Reformulation of HTML 4 in XML 1.0 (1. August,
2002) http://www.w3.org/TR/xhtml1/#C_8
Shirley Kaiser, Projektfahrplan für erstklassige Websites, dpunkt.verlag, ISBN 978-3-89864-449-5166 9 Optimaler Code: Empfehlungen des W3C und Standards
Innerhalb von Attributwerten sollten Zeilenumbrüche und nicht druck-
bare Zeichen vermieden werden.
Die verschiedenen Browser gehen unterschiedlich mit Zeilenum-
brüchen und nicht druckbaren Zeichen innerhalb von Attributwer-
ten um, weshalb es am besten ist, sie zu vermeiden29.
Schreiben Sie korrekte Kommentare.
Mehrfache Gedankenstriche innerhalb eines Kommentars sind
nicht zulässig. Die folgenden Kommentare sind korrekt:
Die beiden folgenden Kommentare sind ungültig, da sie mindestens
zwei (oder mehr) aufeinanderfolgende Gedankenstriche enthalten:
Schließen Sie eingebettete Stylesheets und Skripte nicht in Kommentar-
zeichen ein.
Obwohl die folgende Kommandosyntax sehr oft in HTML 4
benutzt wurde, um die CSS-Dateien vor älteren Browsern zu ver-
bergen, ist sie in XHTML nicht gültig30:
Fügen Sie eingebettete Formatdateien und Skripte ohne Kommen-
tarzeichen ein, wie hier gezeigt:
29. W3C, Zeilenumbrüche innerhalb Attributwerten in XHTML 1.0: The Extensible
HyperText Markup Language (Second Edition): A Reformulation of HTML 4 in
XML 1.0 (1. August, 2002) http://www.w3.org/TR/xhtml1/#C_5
30. Owen Briggs, Steven Champeon, Eric Costello und Matt Patterson, Cascading
Style Sheets: Separating Content from Presentation, Second Edition (Berkeley:
friends of ED, an Apress Company, 2004), 339.3 Eindrucksvolles CSS 167
body {
background-color: white;
color: black;
}
9.3 Eindrucksvolles CSS
Checkliste 9–5
Fügen Sie dekorative Grafiken mit CSS ein.
Anstatt dekorative Grafiken mit HTML in Ihre Webseiten einzu-
fügen, sollten Sie den Hintergrund, Aufzählungszeichen für Listen,
Ränder und horizontale Trennlinien mit CSS gestalten. Referenzen,
wie Sie mit CSS gutaussehende Designs bekommen, finden Sie in
dem Tipp mit dem Titel »Die besten CSS-Referenzen« weiter oben
in diesem Kapitel.
Legen Sie Ränder, Leerräume und die Ausrichtung von Bildern mit CSS
fest.
Die Attribute hspace, vspace und border sind seit 1999 veraltet.
Diese Effekte werden mit CSS31 umgesetzt, wie im folgenden Bei-
spiel:
#header img.logo {
margin: 0 10px 0 0;
padding: 0;
border: 0 none;
float: left;
}
Die Regeln der Pseudoklassen für Ankerelemente müssen in der Reihen-
folge link, visited, focus, hover, active zugewiesen werden:
Da diese Zustände gleichzeitig auftreten können32, müssen sie in
der richtigen Reihenfolge angegeben werden, um so die Priorität33
festzulegen:
31. W3C, Ankerelemente: Visual Presentation of Images, Objects, and Applets in
HTML 4.01 Specification (24. Dezember, 1999) http://www.w3.org/TR/REC-
html40/struct/objects.html#h-13.7
32. link und visited schließen sich gegenseitig aus, können aber einzeln in Kombina-
tionen mit focus, hover und active vorkommen
33. Briggs, Champeon, Costello, and Patterson, 88
Shirley Kaiser, Projektfahrplan für erstklassige Websites, dpunkt.verlag, ISBN 978-3-89864-449-5168 9 Optimaler Code: Empfehlungen des W3C und Standards
a:link, a:visited {
text-decoration: underline;
font-weight: bold;
color: blue;
}
a:focus, a:hover {
color: orange;
}
a:active {
color: red;
}
Sonst kann es passieren, dass sich diese Elemente nicht wunschge-
mäß verhalten.
Eine hilfreiche Eselsbrücke
Wenn Sie sich die Reihenfolge der Pseudoklassen nicht merken können,
dann erinnern Sie sich vielleicht an das gebräuchliche Akronym »LoVe-
HAte«. Das einzige Problem damit ist, dass es die Pseudoklasse focus
auslässt. Vielleicht sollten Sie sich stattdessen »LoVe-From-HAte« mer-
ken, Hauptsache, Sie haben den Sinn verstanden!
Benutzen Sie möglichst keine CSS-Hacks und Behelfslösungen. Anderen-
falls müssen Sie sicherstellen, dass Ihre Lösung valide ist.
Erstellen Sie zuerst eine Testseite samt den CSS-Regeln, die ohne
Hacks und Behelfslösungen auskommt. Fügen Sie nur dann Hacks
hinzu, wenn es die einzige Möglichkeit ist, ein spezielles Problem zu
lösen. Die hierbei verwendeten Regeln müssen valide sein und in
standardkonformen Geräten korrekt wiedergegeben werden.9.3 Eindrucksvolles CSS 169
9.3.1 Geeignete Namenskonventionen in CSS verwenden
Checkliste 9–6
Verwenden Sie das id-Attribut für alle wichtigen strukturellen Komponen-
ten.
Strukturelle Komponenten sind zum Beispiel der Seitenkopf, die
Navigation, der Inhaltsbereich, die Seitenleisten, die Fußleiste und
das Suchformular.
Geben Sie allen CSS-Klassen und IDs sprechende Namen, die ihre Funktion
oder ihren Zweck beschreiben.
Vergeben Sie keine mehrdeutigen Namen wie etwa rot oder david-
mag-das. Vielleicht verwenden Sie die Farbe Rot wiederholt auf
Ihrer Seite und es ist auch durchaus möglich, dass dies die Lieb-
lingsfarbe von David ist, aber was tun Sie, wenn Sie sich später
dazu entschließen, lieber die Farbe Grün einzusetzen, die David
verabscheut? Verwenden Sie besser einen Namen, der den Sinn
oder die Funktion der Klasse bezeichnet, wie etwa localnav oder
footer.
Die Namen der id-Attribute sollten mit einem Buchstaben beginnen und
nicht mit einer Ziffer34.
Es ist am besten, wenn Sie überhaupt keine Ziffern verwenden, das
ist am wenigsten verwirrend.
Vermeiden Sie Unterstriche in CSS class- und id-Attributen.
Unterstriche sind in CSS class- und id-Werten problematisch.
Gedankenstriche sind zulässig, aber es ist generell besser, Inter-
punktionszeichen ganz zu vermeiden, anstatt sich merken zu müs-
sen, welche erlaubt sind und welche nicht.
Vermeiden Sie Namen, die Positionsbezeichnungen, wie etwa »rechts«
oder »links«, enthalten.
Die damit bezeichneten Seitenelemente könnten in der näch-sten
Überarbeitung Ihres Designs verschoben werden. Wenn Ihre Web-
seite beispielsweise eine lokale Navigation in der linken Spalte ent-
hält, sollten diese nicht leftcolumn heißen, sondern sidebar oder
lovalnav.
34. W3C, Anchors with the id Attribute in HTML 4.01 Specification (24. Dezember,
1999)http://www.w3.org/TR/1998/REC-html40-
19980424/struct/links.html#anchors-with-id, W3C, Element Identifiers: the id and
class Attributes in HTML 4.01 Specification (24. Dezember, 1999) http://www.w3.
org/TR/1998/REC-html40-19980424/struct/global.html#h-7.5.2
Shirley Kaiser, Projektfahrplan für erstklassige Websites, dpunkt.verlag, ISBN 978-3-89864-449-5170 9 Optimaler Code: Empfehlungen des W3C und Standards
9.3.2 Browserfehlern und Problemen vorbeugen
Checkliste 9–7
Um Probleme mit dem Internet Explorer zu entschärfen, sollten Sie
a:active nicht verwenden.
Wenn ein Link im Internet Explorer 6 in den Status »active« wech-
selt, kann es problematisch sein, ihn wieder zurückzusetzen! Die
Pseudoklasse a:active verhält sich in diesem Browser35 nicht vor-
hersehbar.
Überschriften (h1, h2, h3, h4, h5, h6) und strong-Elemente müssen für
den Netscape 4 fett ausgezeichnet werden.
Netscape-4-Browser können bei fett ausgezeichnetem Text für
Überschriften (h1, h2, h3, h4, h5, h6) und strong-Elementen will-
kürlich reagieren. Fügen Sie deshalb entsprechende Regeln für den
Netscape 4 ein, beispielsweise:
h1, h2, h3, h4, h5, h6, b, strong {
font-weight:bold;
}
Binden Sie separate, externe Stylesheets mit Style-Regeln, die Netscape 4
verpfuscht, mit der @import-Regel ein, um sie vor Netscape 4 zu verber-
gen.
Mit der @import-Anweisung können Sie Regeln aus Stylesheets
importieren. Browser der 4-er-Generation, einschließlich Net-
scape 4, ignorieren das CSS innerhalb einer @import-Regel. Style-
Regeln, die in solchen Browsern nicht korrekt interpretiert werden,
können in separaten Stylesheets definiert und in Ihre Webseiten
eingebunden werden, wie im folgenden Beispiel36:
@import "/css/import.css";
Obwohl dieses Vorgehen in technischer Hinsicht eine Behelfslö-
sung ist, weil CSS für einen anderen Zweck eingesetzt wird, als
ursprünglich beabsichtigt, ist es einfach, die CSS-Regeln später
wieder in das Haupt-Stylesheet zu übernehmen. Auch wenn jede
Website anders ist, werden üblicherweise Regeln für Außen- und
35. Jeffrey Zeldman, Designing with Web Standards (Indianapolis: New Riders, 2004),
242
36. W3C, The @import Rule, in Cascading Style Sheets, Level 2: CSS2 Specification
(12. Mai, 1998) http://www.w3.org/TR/REC-CSS2/cascade.html#at-import,
Briggs, Champeon, Costello, und Patterson, 104, 240–429.3 Eindrucksvolles CSS 171
Innenränder, Hintergrundtransparenz, Listeneinträge und Positio-
nierungen im @import-Stylesheet angegeben.
Testen Sie laufend Ihre Seiten und Ihr CSS während der Entwicklung.
Schon bei der Entwicklung der ersten Seite Ihres Internetauftritts
müssen Sie testen und Korrekturen einarbeiten. Das ist besonders
wichtig, um mögliche Probleme mit Browsern zu entdecken und
entsprechende Änderungen frühzeitig im Entwicklungsprozess zu
berücksichtigen. 37 38 39 40 41
CSS-Bugs im Keim ersticken
In diesem Absatz werden nur ein paar der potenziellen Browser-Bugs
angesprochen, die Sie möglicherweise in Ihrem Internetauftritt beheben
müssen. Die gute Nachricht allerdings ist, dass es unbeschreiblich viele
hilfreiche Communities von Webdesignern und -entwicklern gibt, die
bereit sind, ihr Wissen zu teilen, und es gibt auch zahlreiche Bücher und
andere Quellen, die hilfreiche Einblicke geben. Jede Quelle ist einmalig
und behandelt ein anderes Thema. Nutzen Sie unbedingt die hilfreichen
CSS-Ressourcen, wie etwa die CSS-Diskussionsliste37 und das CSS-
Wiki38 oder die Internetseiten Position is Everything39 von Big John und
Holly Bergevin, Peter-Paul Kochs Quirksmode-Website40, das Weblog
von SitePoint Stylish Scripting Blog on DHTML & CSS41 und Cascading
Style Sheets: Separating Content From Presentation, zweite Auflage, von
Owen Briggs, Steven Champeon, Eric Costello und Matt Patterson (Ber-
keley: friends of ED, 2004).
9.3.3 Drucken mit CSS
Mit einem separaten Stylesheet für den Medientyp print können Sie
sich möglicherweise die Erstellung einer extra Webseite zur Druckaus-
gabe sparen. Wählen Sie die wichtigsten Informationen und Elemente
einer Seite aus, und legen Sie ebenso fest, welche Elemente nicht
gedruckt werden sollen. Daraus erstellen Sie ein Stylesheet für die
Druckausgabe. Eine Druckversion braucht beispielsweise keine Navi-
gation. Da Links auf dem Papier nicht anklickbar sind, ist es hier sinn-
voller, die jeweiligen URLs zu drucken. Nutzen Sie die folgenden
Checklisten, um CSS-Regeln für Druckversionen zu erstellen.
37. http://www.css-discuss.org/
38. http://css-discuss.incutio.com/
39. http://www.positioniseverything.net/
40. http://www.quirksmode.org/
41. http://www.sitepoint.com/blog-view.php?blogid=5
Shirley Kaiser, Projektfahrplan für erstklassige Websites, dpunkt.verlag, ISBN 978-3-89864-449-5172 9 Optimaler Code: Empfehlungen des W3C und Standards
Checkliste 9–8
Erstellen Sie ein separates Stylesheet für die Regeln zur Druckausgabe.
Dieses Stylesheet können Sie in jede Webseite einbinden und den
Medientyp print im media-Attribut angeben, wie hier:
@import "/css/print.css";
Alternativ können Sie in Ihrem Haupt-Stylesheet die Regel @media
print verwenden, wie im folgenden Beispiel:
@media print {
body {
margin: 0;
padding: 0;
}
#localnav {
display: none;
}
}
Grundsätzlich ist es besser, ein externes Stylesheet für die Druck-
ausgabe zu definieren. Wenn es aber bestimmte Regeln für eine
bestimmte Seite gibt, können diese seitenspezifischen Stilregeln mit
dem media-Attribut im style-Element in das head-Element einer
Seite eingebunden werden, etwa so:
body {…}
Stellen Sie Bilder für die Druckausgabe zur Verfügung, die sie zuvor für
den Druck optimiert haben, beispielsweise Ihr Logo.
Einige Bilder, beispielsweise transparente .gif-Dateien, lassen sich
nicht sehr gut ausdrucken. Geben Sie deshalb in Ihrem Druck-
Stylesheet Bilder an, die Sie für den Druck optimiert haben. Bilder
für die Bildschirmausgabe können im Druck-Stylesheet versteckt
werden, wie im folgenden Beispiel:
img.logo {
display: none;
}
img.logoprint {
border: 1px solid black;
}9.3 Eindrucksvolles CSS 173
Im Gegenzug können Sie auch die Druckversion des Bildes im
Stylesheet für die Bildschirmausgabe verbergen:
img.logoprint {
display: none;
}
Hüten Sie sich vor mangelhafter Unterstützung im Browser.
Ein Browser, der CSS nicht vollständig unterstützt, kann den obigen
CSS-Code vielleicht nicht korrekt ausführen und zeigt womöglich sowohl
auf dem Bildschirm als auch in der Druckausgabe beide Versionen der
Bilder an. Versuchen Sie anhand der Statistiken herauszufinden, wie
hoch der Prozentsatz der Benutzer solcher Browser ist. Entscheiden Sie
dann, ob Sie diese CSS-Regeln vor den problematischen Browsern ver-
bergen, um diesen Fehler zu umgehen.
Unterbinden Sie die Ausgabe der Navigation in der Druckausgabe.
Dies erreichen Sie, indem Sie eine ähnliche CSS-Regel wie im fol-
genden Beispiel verwenden:
#globalnav, #bottomnav {
display: none;
}
Verwenden Sie keine Innen- und Außenränder in der Druckversion.
Drucker setzen die Seitenränder automatisch. Sie können entweder
überhaupt keine Ränder definieren oder alle Ränder auf den Wert
Null setzen, wie hier:
body {
margin: 0;
padding: 0;
}
Wichtige Stile in der Druckversion überschreiben
Wenn Sie, wie oben, Außen- und Innenränder in Ihrem Haupt-Stylesheet
auf den Wert 0 setzen, ohne einen Medientyp anzugeben oder mit dem
Medientyp all, wird die Druckversion diese Werte benutzen. Um sicher-
zugehen, dass die Druckausgabe wie geplant aussieht, müssen Sie die
entsprechenden Werte in Ihrem Druck-Stylesheet setzen, die dann die
Werte Ihres Haupt-Stylesheets überschreiben. Alternativ können Sie
auch Ihr Haupt-Stylesheet gezielt für die Bildschirmausgabe definieren,
indem Sie den Medientyp auf den Wert screen setzen, wie im nächsten
Beispiel:
Shirley Kaiser, Projektfahrplan für erstklassige Websites, dpunkt.verlag, ISBN 978-3-89864-449-5174 9 Optimaler Code: Empfehlungen des W3C und Standards
Wenn Sie das media-Attribut auf den Wert screen setzen, müssen Sie
daran denken, dass dann andere Medien, wie etwa Drucker, PDAs, Pro-
jektoren usw., dieses Stylesheet ignorieren, weil es nur der Bildschirm-
ausgabe zugeordnet wurde.
Legen Sie keine Schriftgrößen fest.
Verwenden Sie als Maßeinheit Punkt anstatt Pixel, falls es notwen-
dig ist, Schriftgrößen anzugeben.
Anstatt Links sollten möglichst die URLs in den Druckversionen der Seiten
erscheinen.
CSS2 enthält die Pseudoelemente :before und :after, mit denen es
möglich ist, unmittelbar vor oder nach einem Element Inhalte ein-
zufügen und zu formatieren, die mit content angegeben sind42. Mit
dem Pseudoelement :after in Ihrem Druck-Stylesheet können Sie
beispielsweise die URL eines Links hinter dem Linktext ausgeben,
wie es im nachfolgenden Beispiel gezeigt wird, in dem die URL in
Klammern gesetzt wird:
#content a:link:after, #content a:visited:after {
content: " (" attr(href) ")";
}
Die Abbildung 9–2 zeigt eine Seite, wie sie von einem Browser mit
CSS2-Unterstützung ausgedruckt wird.
Die Unterstützung der Pseudoklassen :before und :after
Einige der neueren Browser, wie beispielsweise Opera 7, Netscape 7
und Mozilla unterstützen die Pseudoklassen :before und :after, der
Internet Explorer 7 jedoch nicht. Hoffentlich werden diese hilfreichen und
wertvollen Pseudoelemente in der nächsten Version des Internet Explo-
rers unterstützt.
42. Eric Meyer, CSS Design: Going to Print http://www.alistapart.com/articles/going-
toprint, A List Apart (May 10, 2002); W3C, The :before and :after Pseudo-ele-
ments in Cascading Style Sheets, Level 2: CSS2 Specification, W3C
Recommendation (12. Mai, 1998) http://www.w3.org/TR/REC-CSS2/gene-
rate.html#before-after-content9.4 Zusammenfassung 175
Abb. 9–2
Ausgedruckte URLs
9.4 Zusammenfassung
Das Anliegen der Checklisten in diesem Kapitel war die Erstellung von
HTML-Code nach bewährten Verfahren sowie die Implementierung
von CSS in Übereinstimmung mit den Empfehlungen des W3C. Wir
sprachen über die wichtige Aufgabe, die Inhalte mit aussagekräftigem,
semantischem HTML-Code zu strukturieren. Dazu gehört die Tren-
nung von Inhalt und Präsentation mittels einer konsistenten, semanti-
schen Auszeichnung und die Erzeugung wohlgeformter XHTML-
Dokumente. Wir haben auch die möglichen Komplikationen, die bei
der Verwendung von CSS für die Präsentation auftreten können,
betrachtet. Das betraf die Entwicklung von Namenskonventionen in
CSS, die möglichen Fehler und Probleme mit Browsern sowie die
Erstellung und Anwendung von Stylesheets für die Druckausgabe mit
CSS.
Shirley Kaiser, Projektfahrplan für erstklassige Websites, dpunkt.verlag, ISBN 978-3-89864-449-5Sie können auch lesen
