9 Optimaler Code: Empfehlungen des W3C und Standards · 9.1 Geheimnisvolles HTML 153 Validieren Sie Ihren Code. 3 Verwenden Sie den Validator des W3C, um Ihren HTML-Code zu überprüfen

151

9 Optimaler Code: Empfehlungen des W3C und Standards

Denken Sie zurück an das Traumhaus aus Kapitel 1, und stellen Sie sichvor, es ist fertig und Sie sind bereits eingezogen. Was wäre, wenn Sieeines Tages nach Hause kämen, Ihre Haustür wäre herausgefallen, alleFußböden wären überflutet und Ihr Nachbar läge bewusstlos am Fußeder Treppe?

Keine Angst, das wird nicht passieren, weil – obwohl Sie dessenvielleicht nicht gewahr waren – Ihr Haus nach bestimmten Standardserbaut wurde, die solche Katastrophen verhindern. Ihre Türen habeneine standardisierte Stärke, die Wasserleitungen halten einem festge-legten Wasserdruck stand und die Höhe und Tiefe Ihrer Treppenstufenentspricht einem Standard, damit sie so sicher wie möglich sind. Dassind 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 Traumhausesweitaus 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 vollkommenanders 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 Consortiumkeine übergeordnete Autorität, die versucht, ihre Empfehlungen beieiner unempfänglichen Zuhörerschaft mit Zwang durchzusetzen. IhreRatschlä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 Grundlagezu 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

D3kjd3Di38lk323nnm

9 Optimaler Code: Empfehlungen des W3C und Standards152

von jedermann genutzt werden können, das ist die Motivation, diehinter der Entwicklung dieser Standards steht. Für das Internet garan-tieren uns diese Standards, dass jedermann von jedem Ort aus mitjeder Verbindung und mit jedem System auf die Webseiten zugreifenkann und dass die Seiten sich erwartungsgemäß verhalten.

Langfristig möchte das W3C einen unabhängigen Zugang, dieSemantik und eine vertrauenswürdige Umgebung für das Internet vor-anbringen1. Die Checklisten in diesem Kapitel sind dazu da, Sie beimEntwickeln 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 »tagsoup« 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 abernahezu 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 dergesamten Website einheitlich aufgebaut sind. Mit einem aussagekräf-tigen, strukturierten HTML-Code und mit Hilfe von CSS kann mandas garantieren. Dann wird jeder, der Ihren Internetauftritt besucht,die Elemente für Überschriften, Listeneinträge, Absätze und andereAuszeichnungen richtig und ohne Umwege verstehen. Ein weitererVorteil 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 IhrerWebsite sauber ausgeführt und strukturiert wird.

Schreiben Sie einen einheitlichen HTML-Code.

Verwenden Sie eine korrekte DOCTYPE-Deklaration.

Browser erwarten eine DOCTYPE-Deklaration am Anfang einerjeden Seite. Sie teilt dem Browser mit, wie er die Seite wiedergebensoll und ist somit maßgeblich dafür verantwortlich, dass Seiten inallen neueren, standardkonformen Browsern korrekt funktionierenund angezeigt werden2.

1. W3C, W3C Mission in About the World Wide Web Consortium (W3C), (14.Oktober, 2004) http://www.w3.org/Consortium/#mission

Checkliste 9–1

2. Mehr zu standardkonformen Webseiten gibt es im Artikel von Jeffrey Zeldman, FixYour 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 Dubost


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 derEntwicklung öfters einmal validieren, finden Sie schnell Fehler undProbleme, die sich auf diese Weise einfacher beheben lassen, alswenn Sie sich die Validierung bis zum Schluss aufheben. Warten Sienicht damit, bis Sie eine ganze Seite fertiggestellt haben, oder, nochschlechter, sogar die gesamte Website!

Laden Sie den korrekten Zeichensatz mit dem Content-Type-Attribut fürdas <meta>-Tag in jede Seite.

Sehen Sie hier zum Beispiel den Anfang eines Dokuments, das imXHTML 1.0 strict DOCTYPE geschrieben ist und den ZeichensatzISO-8859-1 (auch Latin 1) benutzt. Achten Sie auf das <meta http-equiv="Content-Type">-Tag, in dem der Zeichensatz gesetzt wird.

<!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" xml:lang="en" lang="en"><head><title>Ein raffiniertes neues XHTML-Dokument</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Beachten Sie, dass im W3C-Standard empfohlen wird, dassXHTML-Dateien auch mit einer XML-Deklaration beginnen soll-ten, in der der Zeichensatz angegeben wird, wie zum Beispiel:

<?xml version="1.0" encoding="ISO-8859-1"?>

Die DOCTYPE-Templates

Auf den Internetseiten des Web Standards Project (WaSP) gibt es imBereich Learn3 freie Strukturvorlagen, die Designer und Entwickler beider Erstellung konformer HTML- und XHTML-Dokumente mit korrektenDOCTYPE-Deklarationen unterstützen sollen. Sie dürfen sie gerne her-unterladen und benutzen, sie sind ein guter Start in die Entwicklung einerWebsite.

3. http://www.webstandards.org/learn/reference/templates/4. http://jigsaw.w3.org/css-validator/5. http://validator.w3.org/



Leider führt das im Internet Explorer 6 dazu, dass die darauffol-gende DOCTYPE-Deklaration ignoriert wird. Im InternetExplorer 7 wurde dieser Fehler behoben, aber solange der InternetExplorer 6 noch weit verbreitet ist, ist es am besten, die XML-Deklaration auszulassen. Sie müssen aber damit rechnen, dassmanche XML-fähige Software Ihre Dokumente dann mit demStandard-Zeichensatz UTF-8 interpretiert6.

Reservierte HTML-Zeichen sollen als HTML-Entitäten codiert werden.

Reservierte Zeichen, die als HTML-Entitäten codiert sind, könnenvon Browsern und anderen Werkzeugen korrekt interpretiert wer-den. Nicht codierte Zeichen werden vom Browser möglicherweisefalsch interpretiert, beispielsweise wird das Zeichen < als öffnendesHTML-Tag verstanden oder & als Beginn einer Referenz auf eineHTML-Entität. In der Tabelle 9–1 sind ein paar der gebräuchlichs-ten reservierten Zeichen und ihre korrekten Codes zusammenge-fasst7.

Fügen Sie das title-Element in alle Seiten ein.

Die Begriffe, die Sie in das title-Element (das im head-Elementeiner 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.

<!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" xml:lang="en" lang="en"><head><title>Was ist neu in Microsoft Office 2004?</title></head>

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

Name des Zeichens Entität-Name Entität-Nummer Zeichen

Anführungszeichen " " "

Et-Zeichen & & &

Kleiner-als-Symbol < < <

Größer-als-Symbol > > >

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.html

Tab. 9–1

HTML-Entitäten

und ihre Codierungen


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 Seitesichtbar, wie Sie in der Abbildung 9–1 sehen.

Das title-Element ist nicht dasselbe wie das title-Attribut. DasAttribut kann fast allen HTML-Elementen als zusätzliche Informa-tion zugefügt werden, wie hier:

<a href="http://movabletype.org/" title="Beliebtes System umInhalte zu veröffentlichen, hauptsächlich für Weblogs, kann aber auch für Websites konfiguriert werden">Movable Type</a>

Fügen Sie meta-Elemente zur Verbesserung des Suchmaschinenrangs ein.

Mehr zu den Inhalten der <meta>-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äufigverwendete center- oder font-Element werden durch CSS-Regelnersetzt, die dasselbe leisten.

Die Elemente applet, basefont, center, dir, font, isindex, menu,s, strike und u sind alle veraltet. Eine Liste der veralteten Elementeund 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 IhreTexte in HTML oder XHTML zu konvertieren. Textverarbeitun-

8. http://www.w3.org/TR/REC-html40/appendix/changes.html#h-A.3.1.29. http://www.w3.org/TR/REC-html40/index/elements.html

Abb. 9–1

Das title-Element in der

Browserdarstellung



gen und auch andere Programme sind dafür bekannt, dass sie dieden 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 siekorrekt angezeigt werden.

Wenn Sie in der unglücklichen Lage sind und bereits bestehendeWebseiten bearbeiten müssen, die mit einer Textverarbeitungerzeugt wurden, dann hilft Ihnen vielleicht ein Dienstprogramm,die Dateien von dem unnötigen Ballast im HTML-Code zubefreien, zum Beispiel HTML Tidy oder das Kommando Clean UpHTML im Macromedia Dreamweaver10.

Optimieren Sie den HTML-Code, der von Grafikprogrammen erzeugtwurde.

Grafikprogramme sind berüchtigt, weil sie Bilder zerschneiden undin Tabellenzellen ablegen. Diese Vorgehensweise erzeugt einenunbeschreiblich chaotischen und aufgeblähten HTML-Code, mitdem der Designer die Trennung von Code und Präsentation einfachvergessen 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.

10. Erläuterungen finden Sie bei Clean up your Web pages with HTML TIDYhttp://www.w3.org/People/Raggett/tidy/ auf der W3C-Seite, und im Tutorial vonMacromedia, Importing a Microsoft Word HTML File http://livedocs.macrome-dia.com/dreamweaver/mx2004/using/04_doc10.htm#90636

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 Entwicklernenorme Möglichkeiten und werden zunehmend von den Herstellern derBrowser und anderen Softwarefirmen unterstützt. Es ist wichtig, in allenTechnologien, die man einzusetzen plant, sehr versiert zu sein und sichständig über die neuesten Änderungen und optimalen Herangehenswei-sen bei ihrer Anwendung zu informieren.


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 dieGeschwindigkeit der Seiten zu erhöhen. Nehmen Sie die folgendenChecklisten zu Hilfe, um die Inhalte Ihrer Webseiten so weit wie mög-lich von der Präsentation zu trennen.

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 dergesamten Website auswirken, ohne dass Sie jede einzelne Dateibearbeiten müssen. Sie stellen mit dieser Arbeitsweise nicht nursicher, dass der Inhalt von der Präsentation getrennt wird, sondernSie sparen auch noch Übertragungsvolumen und reduzieren dieDateigröße: Das Stylesheet wird direkt in den Browsercache desBenutzers heruntergeladen und von jeder Seite des Internetauftrittsbenutzt, die der Besucher aufruft. Der Zugriff auf das Stylesheeterfolgt durch das link-Element im Seitenkopf:

<head><title>Hier steht Ihr Seitentitel</title><link rel="stylesheet" href="/css/styles.css" type="text/css" media="all" /></head>

Wenn Sie externe Dateien einbinden, sollten Sie absolute Links anstellerelativer Links verwenden.

Ältere Browser erkennen den Speicherort einer eingebundenenDatei relativ zu der aufrufenden Datei nicht immer vorhersehbaroder 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 Seitegespeichert ist. Außerdem sehen absolute Links viel besser aus alsrelative Links.

Schauen Sie sich zum Beispiel diesen relativen Link an:

<link rel="stylesheet" href="../../css/styles.css" type="text/css" media="all" />

Checkliste 9–2

11. Jeffrey Zeldman, Designing with Web Standards (Indianapolis: New Riders, 2004),233



Idealerweise könnte dieser Link durch den folgenden absolutenLink ersetzt werden:

<link rel="stylesheet" href="/css/styles.css" type="text/css" media="all" />

Der relative Link sagt dem System, dass es zuerst zwei Verzeich-nisebenen zurückspringen, dann das Verzeichnis css auswählenund darin die Datei styles.css suchen soll. Beim absoluten Linkwird 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 Codezeilefunktioniert, ob nun die einzubindende Datei eine, zwei oder sogarzehn Ebenen tiefer als das Wurzelverzeichnis liegt.

Vermeiden Sie eingebettete Skripte oder Stylesheets.

Eingebettete Skripte und CSS-Dateien lassen die Dateigrößen derWebseiten anwachsen und können den HTML-Code in Unordnungbringen. Es mag angebracht sein, eingebettete Styles oder auchStyle-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 wiemöglich vermeiden.

Gestalten Sie die Internetseiten und ihre Elemente mit CSS.

Zum Glück unterstützen moderne Browser CSS besser als jemalszuvor. Das bedeutet, Entwickler können zur Gestaltung IhrerWebseiten ausgiebig davon Gebrauch machen. Sie können mit CSStatsächlich so ziemlich alle Elemente Ihrer Webseite gestalten, obBilder, tabellarische Daten, horizontale Trennlinien, Überschriftenund 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 einerTabelle 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ößenkönnen enorm sein! Und selbstverständlich macht die Definitionder Style-Regeln in der CSS-Datei die Pflege des Internetauftrittsunendlich einfacher.


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 Designerdas table-Element zu Layoutzwecken und zur Präsentation, insbe-

Suchen Sie proprietäre HTML-Codierung.

Halten Sie stets Ausschau nach altem und proprietärem HTML-Code! Alsdie Unterstützung von CSS in den Browsern noch nicht so ordentlich war,gingen Designer einen andern Weg, damit die Ränder einer Webseite inallen Browsern und Plattformen einheitlich dargestellt wurden. Diese Vor-gehensweise wurde als »Die vier proprietären Reiter der Nicht-Validie-rung«12 bezeichnet:

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

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 Attributeleftmargin und topmargin, während Netscape seine proprietärenAttribute marginwidth und marginheight beisteuerte. Sie sind allenoch im HTML-Code vieler Seiten zu finden, vielleicht haben Sie sogarein 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ürdas 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 diegesamte Website geladen wird:

body { margin:0; padding:0;}

Wie sieht das body-Element aus, wenn die Außen- und Innenränder derSeiten mit CSS festgelegt werden?

<body>

Das ist viel schlanker und außerdem viel sauberer.

12. Mehr zu den »Vier Reitern« lesen Sie im Artikel von Jeffrey Zeldman, From TableHacks 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



sondere mit dem 1-Pixel-GIF-Trick von David Siegel und dem Trickmit der unsichtbaren Tabelle14. Moderne Browser unterstützenschon seit ein paar Jahren präsentationsbezogenes CSS. Als opti-males Verfahren wird der Gebrauch von CSS empfohlen und nichtdas table-Element. Behalten Sie sich dieses Element zur Darstel-lung von tabellarischen Daten vor und erstellen Sie Ihre Layoutsmit CSS. 15 16 17 18 19

9.1.2 Die Reinheit des HTML-Codes wahren

Wie bereits besprochen, verhält sich gut geschriebener, strukturellerHTML-Code einheitlich und wird leicht von jedem verstanden, dermit 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 undim gesamten Internetauftritt einheitlich aussehen. Suchmaschinen undalternative 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 GIFTrick: Tips for Writers and Designers (14. März, 1996) http://www.killersites.com/killerSites/1-design/single_pixel.html

Die besten CSS-Referenzen

Zum Thema CSS gibt es eine wachsende Zahl hilfreicher, kreativer undgut geschriebener Bücher und Referenzen. Zu den sehr empfehlenswer-ten Titeln gehören die beiden SitePoint-Bücher HTML Utopia. DesigningWithout Tables Using CSS, zweite Auflage, von Rachel Andrew und DanShafer15 sowie The CSS Anthology16 von Rachel Andrew. Außerdem:Cascading Style Sheets: Separating Content from Presentation, zweiteAuflage, von Owen Briggs, Steven Champeon, Eric Costello und MattPatterson (Berkeley: friends of ED, 2004); Designing with WebStandards17 von Jeffrey Zeldman (Indianapolis: New Riders, 2004); MoreEric Meyer on CSS von Eric Meyer; und Web Standards Solutions: TheMarkup and Style Handbook von Dan Cederholm (Berkeley: friends ofED, 2004). Zwei hervorragende Referenzen zu CSS im Internet sind: derBereich CSS auf der Seite A List Apart18 und die Tutorien auf der Web-site von Project Seven19.

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, 200517. 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/tutorials


HTML-Code. Es ist deshalb ratsam, HTML-Elemente nicht zu miss-brauchen oder abzukürzen. Verwenden Sie die Elemente nur zu ihremvorgesehenen Zweck!

Verwenden Sie passende Elemente für die Überschriften.

Anstelle von benutzerdefinierten Style-Klassen nehmen Sie dafürvorgesehene Überschriften-Elemente. Beginnen Sie eine Webseiteimmer mit einem h1-Element und weisen Sie dann in absteigenderFolge entsprechende h-Elemente zu:

<h1>Seitentitel</h1><h2>Artikelüberschrift</h2><p>Text</p><h3>Unterüberschrift des Artikels</h3><p>Text</p><h3>Unterüberschrift des Artikels</h3><p>Text</p>

Erschwindeln Sie keine Überschriften mit HTML-Code, so wiehier:

<p class="header">Überschrift</p><span class="header">Überschrift</span><div class="header">Überschrift</div>

Oder noch schlimmer:

<p><font size="3"><bold>Überschrift</bold></font></p>

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 verstandenhaben, verwenden Listeneinträge (li) darüber hinaus auch gernefür Navigationselemente. Denn bei einer Navigation, die mit Listenund CSS erzeugt wurde, kann das Aussehen jederzeit grundlegendumgestellt 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 mitansprechenden Hintergrundgrafiken.

Checkliste 9–3



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<br /><br />Textabsatz<br /><br />1. Listeneintrag 1<br /><br />2. Listeneintrag 2<br /><br />

Machen Sie dies mit korrektem HTML, d.h. mit dem p-Element:

<p>Textabsatz</p><p>Textabsatz</p><ol> <li>Listeneintrag 1</li> <li>Listeneintrag 2</li></ol> 21

Das pre-Element sollte nicht für allgemeine Formate verwendet werden.

Mit dem pre-Element wird vorformatierter Text ausgegeben, beidem Zeilenumbrüche deaktiviert sind. Außerdem wird innerhalbdieses Elementes die Standardschrift des Browsers für Schriften mitfester Laufweite benutzt und Leerzeichen werden berücksichtigt, essei 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 derDarstellung erhalten bleiben22.

20. Dan Cederholm, More Lists in Web Standards Solutions: The Markup and StyleHandbook (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

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 StandardsSolutions (Berkeley: friends of ED, 2004) von Dan Cederholm, in MoreEric Meyer on CSS (Indianapolis: New Riders, 2004) von Eric Meyer undauf der Listmatic-Website von Russ Weakley im Bereich über die Forma-tierung von Listen mit CSS21

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/

1639.2 Ausgezeichnetes XHTML

Verwenden Sie das span-Element sparsam.

Wenn es aussagekräftigere HTML-Elemente gibt, sollten Sie sieauch benutzen. Anstatt <span class="emphasis">hervorgehobenerText</span> zu schreiben, sollten Sie das vorgesehene Element fürHervorhebungen einsetzen: <em>hervorgehobener Text</em>. Dasspan-Element sollte nur als letzter Ausweg verwendet werden. 2324


XHTML ist weniger tolerant als HTML. Aber wenn Sie es gewohntsind, Ihren Code zu validieren, fällt Ihnen die Umstellung auf XHTMLleicht. Sind Sie nachlässig in Bezug auf schließende Tags, Attributwertein Anführungszeichen oder die korrekte Verschachtelung Ihrer Ele-mente, dann ist es höchste Zeit, Ihr Verhalten zu ändern und IhreCodier-Fähigkeiten weiterzuentwickeln. Diese Checkliste hilft Ihnenbei der Umsetzung Ihres Codes von HTML 4.01 nach XHTML 1.0Transitional, das auch die älteren Browser unterstützen.

Verschachteln Sie alle Elemente korrekt.

XHTML setzt voraus, dass alle Elemente korrekt ineinandergeschachtelt werden25.

Hier sehen Sie ein Beispiel, wie man es nicht machen sollte:

<p><strong>Hier steht Text</p></strong>

So sieht korrekt verschachteltes HTML aus:

<p><strong>Hier steht Text</strong></p>

Schreiben Sie alle Elementnamen und Attributnamen in Kleinbuchstaben.

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 diesemThema geschrieben: Don’t Fake Your Markup: Accessibility Issues forCSS23 und Semantics, HTML, XHTML, and Structure24

23. http://brainstormsandraves.com/archies/2002/05/14/-dont_fake_your_markup_accessibility_issues_for_css/

24. http://brainstormsandraves.com/articles/semantics/structure/

Checkliste 9–4

25. W3C, [Unterschiede zu HTML 4] in XHTML 1.0: The Extensible HyperTextMarkup Language (Second Edition): A Re formulation of HTML 4 in XML 1.0(1. August, 2002) http://www.w3.org/TR/xhtml1/#diffs



Schließen Sie alle Elemente.

Leere Elemente werden mit /> geschlossen. Beachten Sie, dass einLeerzeichen vor dem Schrägstrich das Ende eines leeren Elementskennzeichnet. Dieses abschließende Leerzeichen ist aus Gründender Abwärtskompatibilität mit älteren Browsern notwendig. DieTabelle 9–2 gibt einen kurzen Überblick über die meistbenutztenschließenden Tags.

Nichtleere Elemente müssen ebenfalls mit den entsprechenden Tagsgeschlossen werden26. Die Elemente p und li im folgenden Beispielwurden korrekt mit </p> und </li> geschlossen.

<p>Textabsatz</p><ul> <li>Text des ersten Listeneintrags</li> <li>Text des zweiten Listeneintrags</li></ul>

Bei Ihrer Arbeit mit HTML sind Sie vielleicht ohne </p> und </li>davongekommen, wenn Sie jedoch XHTML nutzen, werden IhreDokumente 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 einemFormular ein Kontrollkästchen anzuzeigen:

<input type="checkbox" name="funbox" value="funvalue" checked>

HTML 4 XHTML 1.0

<br> <br />

<hr> <hr />

<img src="image.gif"height="150" width="40"alt="funny face">

<img src="image.gif"height="150" width="40"alt="funny face" />

<link rel="stylesheet" type="text/css"href="styles.css">

<link rel="stylesheet" type="text/css"href="styles.css" />

26. W3C, [Unterschiede zu HTML 4] in XHTML 1.0: The Extensible HyperTextMarkup 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 MarkupLanguage (Second Edition): A Reformulation of HTML 4 in XML 1.0 (1. August,2002) http://www.w3.org/TR/xhtml1/#h-4.5

Tab. 9–2

Leere Elemente in

XHTML schließen


Um dasselbe Kontrollkästchen regelgerecht mit XHTML anzuzei-gen, müssen Sie dem Attribut checked einen Wert zuweisen:

<input type="checkbox" name="funbox" value="funvalue" checked="checked" />

Setzen Sie die Attribute id und name für Sprungmarken.

Wenn Sie zum Beispiel einen internen Link <a href="#top">ZumSeitenanfang</a> oben auf die Seite setzen, sollten Sie als Sprung-marke <a id="top" name="top"></a> angeben. Ältere Browserunterstützen das id-Attribut vielleicht nicht, aber dafür das name-Attribut, so dass Sie mit diesem Vorgehen allen Browsern gerechtwerden 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:

<img src="/images/johndoe.gif" height="150" width="100"alt="John Doe, Generaldirektor" />

Bei Bildern, die nur zur Dekoration dienen, kann das alt-Attributleer bleiben, so wie hier:

<img src="/images/spacer.gif" height="1" width="200" alt="" />

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 einerSuchfunktion 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, wiehier:

<a href="http://mybyz.com/cgi-bin/myscript.pl?class=john& doe=member">

In Tabelle 9–1 sind die Codierungen der gebräuchlicheren reservier-ten Zeichen zusammengestellt, das doppelte Anführungszeichen ("),das Et-Zeichen (&), das Kleiner-Symbol (<) und das Größer-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



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 sindnicht zulässig. Die folgenden Kommentare sind korrekt:



Die beiden folgenden Kommentare sind ungültig, da sie mindestenszwei (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 4benutzt wurde, um die CSS-Dateien vor älteren Browsern zu ver-bergen, ist sie in XHTML nicht gültig30:

<style type="text/css"></style>

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 ExtensibleHyperText Markup Language (Second Edition): A Reformulation of HTML 4 inXML 1.0 (1. August, 2002) http://www.w3.org/TR/xhtml1/#C_5

30. Owen Briggs, Steven Champeon, Eric Costello und Matt Patterson, CascadingStyle Sheets: Separating Content from Presentation, Second Edition (Berkeley:friends of ED, an Apress Company, 2004), 33

1679.3 Eindrucksvolles CSS

<style type="text/css">body { background-color: white; color: black;}</style>


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 indem Tipp mit dem Titel »Die besten CSS-Referenzen« weiter obenin diesem Kapitel.

Legen Sie Ränder, Leerräume und die Ausrichtung von Bildern mit CSSfest.

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 inder richtigen Reihenfolge angegeben werden, um so die Priorität33

festzulegen:

Checkliste 9–5

31. W3C, Ankerelemente: Visual Presentation of Images, Objects, and Applets inHTML 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



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.

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 ohneHacks und Behelfslösungen auskommt. Fügen Sie nur dann Hackshinzu, wenn es die einzige Möglichkeit ist, ein spezielles Problem zulösen. Die hierbei verwendeten Regeln müssen valide sein und instandardkonformen Geräten korrekt wiedergegeben werden.

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 focusauslässt. Vielleicht sollten Sie sich stattdessen »LoVe-From-HAte« mer-ken, Hauptsache, Sie haben den Sinn verstanden!


9.3.1 Geeignete Namenskonventionen in CSS verwenden

Verwenden Sie das id-Attribut für alle wichtigen strukturellen Komponen-ten.

Strukturelle Komponenten sind zum Beispiel der Seitenkopf, dieNavigation, der Inhaltsbereich, die Seitenleisten, die Fußleiste unddas Suchformular.

Geben Sie allen CSS-Klassen und IDs sprechende Namen, die ihre Funktionoder ihren Zweck beschreiben.

Vergeben Sie keine mehrdeutigen Namen wie etwa rot oder david-mag-das. Vielleicht verwenden Sie die Farbe Rot wiederholt aufIhrer Seite und es ist auch durchaus möglich, dass dies die Lieb-lingsfarbe von David ist, aber was tun Sie, wenn Sie sich späterdazu entschließen, lieber die Farbe Grün einzusetzen, die Davidverabscheut? Verwenden Sie besser einen Namen, der den Sinnoder die Funktion der Klasse bezeichnet, wie etwa localnav oderfooter.

Die Namen der id-Attribute sollten mit einem Buchstaben beginnen undnicht mit einer Ziffer34.

Es ist am besten, wenn Sie überhaupt keine Ziffern verwenden, dasist 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 oderlovalnav.

Checkliste 9–6

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 andclass 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



9.3.2 Browserfehlern und Problemen vorbeugen

Um Probleme mit dem Internet Explorer zu entschärfen, sollten Siea:active nicht verwenden.

Wenn ein Link im Internet Explorer 6 in den Status »active« wech-selt, kann es problematisch sein, ihn wieder zurückzusetzen! DiePseudoklasse a:active verhält sich in diesem Browser35 nicht vor-hersehbar.

Überschriften (h1, h2, h3, h4, h5, h6) und strong-Elemente müssen fürden 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 denNetscape 4 ein, beispielsweise:

h1, h2, h3, h4, h5, h6, b, strong { font-weight:bold;}

Binden Sie separate, externe Stylesheets mit Style-Regeln, die Netscape 4verpfuscht, mit der @import-Regel ein, um sie vor Netscape 4 zu verber-gen.

Mit der @import-Anweisung können Sie Regeln aus Stylesheetsimportieren. 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 Webseiteneingebunden werden, wie im folgenden Beispiel36:

<style type="text/css" media="all">@import "/css/import.css";</style>

Obwohl dieses Vorgehen in technischer Hinsicht eine Behelfslö-sung ist, weil CSS für einen anderen Zweck eingesetzt wird, alsursprünglich beabsichtigt, ist es einfach, die CSS-Regeln späterwieder in das Haupt-Stylesheet zu übernehmen. Auch wenn jedeWebsite anders ist, werden üblicherweise Regeln für Außen- und

Checkliste 9–7

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–42


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 Internetauftrittsmüssen Sie testen und Korrekturen einarbeiten. Das ist besonderswichtig, um mögliche Probleme mit Browsern zu entdecken undentsprechende Änderungen frühzeitig im Entwicklungsprozess zuberücksichtigen. 37 38 39 40 41

9.3.3 Drucken mit CSS

Mit einem separaten Stylesheet für den Medientyp print können Siesich möglicherweise die Erstellung einer extra Webseite zur Druckaus-gabe sparen. Wählen Sie die wichtigsten Informationen und Elementeeiner Seite aus, und legen Sie ebenso fest, welche Elemente nichtgedruckt werden sollen. Daraus erstellen Sie ein Stylesheet für dieDruckausgabe. 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 folgendenChecklisten, um CSS-Regeln für Druckversionen zu erstellen.

CSS-Bugs im Keim ersticken

In diesem Absatz werden nur ein paar der potenziellen Browser-Bugsangesprochen, die Sie möglicherweise in Ihrem Internetauftritt behebenmüssen. Die gute Nachricht allerdings ist, dass es unbeschreiblich vielehilfreiche Communities von Webdesignern und -entwicklern gibt, diebereit sind, ihr Wissen zu teilen, und es gibt auch zahlreiche Bücher undandere Quellen, die hilfreiche Einblicke geben. Jede Quelle ist einmaligund behandelt ein anderes Thema. Nutzen Sie unbedingt die hilfreichenCSS-Ressourcen, wie etwa die CSS-Diskussionsliste37 und das CSS-Wiki38 oder die Internetseiten Position is Everything39 von Big John undHolly Bergevin, Peter-Paul Kochs Quirksmode-Website40, das Weblogvon SitePoint Stylish Scripting Blog on DHTML & CSS41 und CascadingStyle Sheets: Separating Content From Presentation, zweite Auflage, vonOwen Briggs, Steven Champeon, Eric Costello und Matt Patterson (Ber-keley: friends of ED, 2004).

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



Erstellen Sie ein separates Stylesheet für die Regeln zur Druckausgabe.

Dieses Stylesheet können Sie in jede Webseite einbinden und denMedientyp print im media-Attribut angeben, wie hier:

<style type="text/css" media="print">@import "/css/print.css";</style>

Alternativ können Sie in Ihrem Haupt-Stylesheet die Regel @mediaprint 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 einebestimmte Seite gibt, können diese seitenspezifischen Stilregeln mitdem media-Attribut im style-Element in das head-Element einerSeite eingebunden werden, etwa so:

<head><style type="text/css" media="print">body {…}</style></head>

Stellen Sie Bilder für die Druckausgabe zur Verfügung, die sie zuvor fürden Druck optimiert haben, beispielsweise Ihr Logo.

Einige Bilder, beispielsweise transparente .gif-Dateien, lassen sichnicht sehr gut ausdrucken. Geben Sie deshalb in Ihrem Druck-Stylesheet Bilder an, die Sie für den Druck optimiert haben. Bilderfür die Bildschirmausgabe können im Druck-Stylesheet verstecktwerden, wie im folgenden Beispiel:

img.logo { display: none;}

img.logoprint { border: 1px solid black;}

Checkliste 9–8


Im Gegenzug können Sie auch die Druckversion des Bildes imStylesheet für die Bildschirmausgabe verbergen:

img.logoprint { display: none;}

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 WertNull setzen, wie hier:

body { margin: 0; padding: 0;}

Hüten Sie sich vor mangelhafter Unterstützung im Browser.

Ein Browser, der CSS nicht vollständig unterstützt, kann den obigenCSS-Code vielleicht nicht korrekt ausführen und zeigt womöglich sowohlauf dem Bildschirm als auch in der Druckausgabe beide Versionen derBilder an. Versuchen Sie anhand der Statistiken herauszufinden, wiehoch der Prozentsatz der Benutzer solcher Browser ist. Entscheiden Siedann, ob Sie diese CSS-Regeln vor den problematischen Browsern ver-bergen, um diesen Fehler zu umgehen.

Wichtige Stile in der Druckversion überschreiben

Wenn Sie, wie oben, Außen- und Innenränder in Ihrem Haupt-Stylesheetauf den Wert 0 setzen, ohne einen Medientyp anzugeben oder mit demMedientyp all, wird die Druckversion diese Werte benutzen. Um sicher-zugehen, dass die Druckausgabe wie geplant aussieht, müssen Sie dieentsprechenden Werte in Ihrem Druck-Stylesheet setzen, die dann dieWerte Ihres Haupt-Stylesheets überschreiben. Alternativ können Sieauch Ihr Haupt-Stylesheet gezielt für die Bildschirmausgabe definieren,indem Sie den Medientyp auf den Wert screen setzen, wie im nächstenBeispiel:

<link rel="stylesheet" href="mainstyle.css"media="screen" type="text/css" />



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 Seitenerscheinen.

CSS2 enthält die Pseudoelemente :before und :after, mit denen esmöglich ist, unmittelbar vor oder nach einem Element Inhalte ein-zufügen und zu formatieren, die mit content angegeben sind42. Mitdem Pseudoelement :after in Ihrem Druck-Stylesheet können Siebeispielsweise die URL eines Links hinter dem Linktext ausgeben,wie es im nachfolgenden Beispiel gezeigt wird, in dem die URL inKlammern 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 mitCSS2-Unterstützung ausgedruckt wird.

Wenn Sie das media-Attribut auf den Wert screen setzen, müssen Siedaran denken, dass dann andere Medien, wie etwa Drucker, PDAs, Pro-jektoren usw., dieses Stylesheet ignorieren, weil es nur der Bildschirm-ausgabe zugeordnet wurde.

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, W3CRecommendation (12. Mai, 1998) http://www.w3.org/TR/REC-CSS2/gene-rate.html#before-after-content

Die Unterstützung der Pseudoklassen :before und :after

Einige der neueren Browser, wie beispielsweise Opera 7, Netscape 7und Mozilla unterstützen die Pseudoklassen :before und :after, derInternet Explorer 7 jedoch nicht. Hoffentlich werden diese hilfreichen undwertvollen Pseudoelemente in der nächsten Version des Internet Explo-rers unterstützt.

1759.4 Zusammenfassung

9.4 Zusammenfassung

Das Anliegen der Checklisten in diesem Kapitel war die Erstellung vonHTML-Code nach bewährten Verfahren sowie die Implementierungvon CSS in Übereinstimmung mit den Empfehlungen des W3C. Wirsprachen ü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 beider Verwendung von CSS für die Präsentation auftreten können,betrachtet. Das betraf die Entwicklung von Namenskonventionen inCSS, die möglichen Fehler und Probleme mit Browsern sowie dieErstellung und Anwendung von Stylesheets für die Druckausgabe mitCSS.

Abb. 9–2

Ausgedruckte URLs

Documents

9 Optimaler Code: Empfehlungen des W3C und Standards · 9.1 Geheimnisvolles HTML 153 Validieren Sie Ihren Code. 3 Verwenden Sie den Validator des W3C, um Ihren HTML-Code zu überprüfen