9 Optimaler Code: Empfehlungen des W3C und Standards - dpunkt Verlag

Die Seite wird erstellt Hendrik Zander
 
WEITER LESEN
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
D3kjd3Di38lk323nnm
152                    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 Dubost
9.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-5
154                      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.html
9.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-5
156   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#90636
9.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-5
158   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-5
160   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/tutorials
9.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-5
162   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-5
164                       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.5
9.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-5
166   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), 33
9.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-5
168   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-5
170                    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–42
9.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-5
172                    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-5
174   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-content
9.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-5
Sie können auch lesen