Kai Laborenz CSS-Praxis Galileo Press
Geleitwort der Fachgutachterin 19 Vorwort 21 TEIL I: Einführung 'SBBBD&BSHEii 1.1 Von HTMLzu CSS 27 1.1.1 Nachteile des Tabellenlayouts 31 1.2 Was sind Cascading Stylesheets? 33 1.3 Wie sehen Cascading Stylesheets aus? 34 1.4»Hallo Welt!«auf CSS 37 U«..-MfamllpliMilMillllMiilM 2.1 Vorteile und Grenzen des CSS-Einsatzes 42 2.1.1 Einschränkungen 43 3.1 CSS 1 45 3.2 CSS 2 45 3.3 CSS 2.1 46 3.4 CSS 3 46 3.5 XHTML, XML und CSS 48 3.5.1 Von HTML zu X(H)TML 48 3.5.2 XML und CSS 53 TEIL II: Grundlegende Konzepte 4.1 Die verschiedenen Selektoren 59 4.1.1 Einfache Element-Selektoren 59 4.1.2 Class-und ID-Selektoren 63 4.1.3 Kombinierte Selektoren 65 4.1.4 Kind-Selektoren (CSS 2) 68 4.1.5 Folgeelement-Selektoren (CSS 2) 71 5
4.1.6 Attribut-Selektoren (CSS 2 und CSS 3) 71 4.1.7 Tabellen-Selektoren 73 4.1.8 Pseudo-Klassen und Pseudo-Elemente 73 4.1.9 Universal-Selektor 74 4.2 Vererbung 76 4.3 Rangfolge und Kaskadierung 78 4.3.1 Die Important-Anweisung 84 5.1 Das Kastenmodell 87 5.1.1 Kastenmodell -»The Microsoft Way«88 5.1.2 Zusammenfallende Außenabstände (collapsing margins) 88 5.2 Element-Typen in CSS 90 5.3 Layout- und Positionierungsmodelle in CSS 92 6.1 Stilanweisungen im HTML-Tag 93 6.2 Stilanweisungen im Dokumentenkopf 94 6.3 Verlinkte Stylesheets 95 6.3.1 Alternative Stylesheets 96 6.4 Importierte Stylesheets 97 6.5 Medienspezifische Stylesheets (CSS 2) 98 6.5.1 Medienspezifische Stylesheets mit CSS 3 101 7.1 Namen für Stylesheets, Klassen und IDs 103 7.2 Längen- und Größenangaben 103 7.2.1 Absolute Einheiten 104 7.2.2 Relative Einheiten 104 7.3 Prozentwerte 105 7.4 Farben 105 7.4.1 Hexadezimal (#RRGGBB oder #RGB) 105 7.4.2 Prozentwerte rgb(rrr.rr%, ggg.gg%, bbb.bb%) 106 7.4.3 Dezimalwerte rgb(rrr, ggg, bbb) 106 7.4.4 Dezimalwerte mit Alpha-Kanal (CSS 3) 106 7.4.5 Schlüsselwörter 107 6
7.5 URLs(url) 107 7.6 Schlüsselwörter 107 7.7 CSS-Kommentare 108 TEIL IM: CSS und Anzeigegeräte 8.1 Allgemeines zur Browserkompatibilität 111 8.1.1 Der Box Acid-Test 111 8.1.2 Acid2-Test 112 8.2 Ältere Browser 113 8.2.1 Netscape 4 114 8.3 Mozilla, Firefox und Netscape Navigator 114 8.3.1 Firefox 2 115 8.3.2 Firefox 3 116 8.3.3 Firefox Mobile 118 8.3.4 Netscape Navigator und andere Gecko- Browser 118 8.4 Microsoft Internet Explorer 119 8.4.1 Internet Explorer 3 und 4 119 8.4.2 Internet Explorer 5.x 120 8.4.3 Internet Explorer 6 120 8.4.4 Internet Explorer 7 121 8.4.5 Internet Explorer 8 (Beta-Version) 122 8.4.6 Internet Explorer Mobile 125 8.4.7 Verschiedene Versionen des Internet Explorers parallel betreiben 125 8.4.8 Bugs des Internet Explorers 127 8.4.9 Neue Bugs des Internet Explorers 7 131 8.5 Opera 132 8.5.1 Opera 7 und Opera 8 132 8.5.2 Opera9 133 8.5.3 Opera Mini und Opera Mobile 134 8.6 Safari und Konqueror (Webkit/KHTML) 134 8.7 Weitere Browser 135 8.7.1 Lynx 136 8.7.2 Screenreader 137 8.7.3 Mobile Geräte 139 8.8 Browseranteile 139 7
9.1 Strategien für das mobile Web: Mobilisieren statt miniaturisieren 143 9.2 Mobile Standards 144 9.3 Betriebssysteme für Mobilgeräte und Organizer 145 9.4 Stylesheets für mobile Browser ausliefern 146 9.5 CSS-Design für den mobilen Einsatz 147 9.5.1 Safari auf dem iphone 149 9.5.2 Opera Mini und Opera Mobile 154 9.5.3 Palm Blazer 156 9.5.4 Weitere mobile Browser 157 10.1 Grundsätzliche Probleme 159 10.2 Echte E-Mail-Clients 162 10.2.1 Microsoft Outlook 162 10.2.2 Mozilla Thunderbird 162 10.2.3 Apple Mail 163 10.3 Webmail-Dienste 164 10.3.1 Google Mail 164 10.3.2 Yahoo! Mail und Windows Live Mail 166 10.3.3 GMX 166 10.3.4 Web.de 167 10.4 Strategien für E-Mail-Newsletter 168 10.4.1 Techniken für mittels CSS gestaltete und alle anderen E-Mails 168 10.4.2 CSS-Eigenschaften im Einzelnen 172 11.1 Strategien für die Anwendung von Browserweichen:»To Hack or not to Hack«175 11.2 Doctypes und Doctype-Switching 178 11.2.1 Doctype-Switching 179 11.3 Browserweichen und Filter 183 11.3.1 @import-weiche 183 11.3.2 Sternchen-Filter 184 11.3.3 Box-Modell-Hacks 185 8
11.3.4 Hochpass-Filter 188 11.3.5 Selektoren-Tricks 188 11.3.6 Opera Catcher 189 11.3.7 le/mac-filter 189 11.3.8 Important-Filter 190 11.3.9 Conditional Comments 190 11.3.10 Browser-Sniffer 192 11.3.11 Filter selber entwickeln 192 11.3.12 CSS-Bugs per JavaScript beheben 194 TEIL IV: CSS in der Praxis 12.1 Webstandards beachten 197 12.1.1 Was ist für eine standardkonforme Webseite erforderlich? 198 12.1.2 DerW3C-Validator 201 12.2 Bessere Entwurfsverfahren mit CSS (Rapid Prototyping) 202 12.2.1 Festlegen der Seitenstruktur in semantischem HTML 203 12.2.2 Bereiche ausrichten in Ihrem bevorzugten Browser 204 12.2.3 Einfügen der Inhalte 205 12.2.4 Dynamische Bereiche umsetzen 205 12.2.5 Benutzertests 206 12.2.6 Finetuning, Browsertests und technische Optimierungen 207 12.3 Stylesheets organisieren 208 12.3.1 Ordnung durch Stylesheet-Module 209 12.3.2 Allesauf null: Reset-Stylesheets 211 12.3.3 Kurzschreibweise 214 12.3.4 Filter-Management 216 12.3.5 Kommentieren von Stylesheets 216 12.3.6 Sprung-Links, Inhaltsverzeichnis und Farbdefinitionen 219 12.4 Fehlersuche in CSS-Dateien 221 9
13.1 Die Positionierungsart (»position«) 226 13.1.1 position: static 226 13.1.2 position: relative 228 13.1.3 position: absolute 231 13.1.4 position: fixed 233 13.2 float und clear 237 13.2.1 float mit clear aufheben 239 13.2.2 clear ohne zusätzliches Markup 242 13.3 Grundlegende Layoutvarianten mit CSS 245 13.3.1 fixed, flexibel, elastisch 245 13.3.2 Zweispalter 247 13.3.3 Dreispalter 252 13.3.4 Dreispalter mit flexibler Spaltenaufteilung und freier Wahl der Breiteneinheiten 258 13.4 CSS-Layoutricks 270 13.4.1 Das Problem der (nicht) gleich langen Spalten 270 13.4.2 Minimale und maximale Breiten für flexible Layouts 277 13.4.3 Feststehende Bereiche und CSS-Frames 280 13.4.4 Zentrieren 291 13.5 Vorlagen und Frameworks 300 13.5.1 Arbeit mit Vorlagen 300 13.6 Arbeiten mit CSS-Frameworks 303 13.6.1 Kritik an CSS-Frameworks 303 13.6.2 YAML 304 13.6.3 Yahoo! Grids 308 13.6.4 Weitere CSS-Frameworks 315 14.1 Arbeiten mit Text 325 14.1.1 Schriftgrößen 325 14.1.2 Typografie mit CSS 331 14.1.3 Initialien und Einrückungen 338 14.1.4 Korrekte Auszeichnung von Zitaten 345 14.2 CSS-Menüs mit Listen 350 14.2.1 Vertikale Menüs 351 10
14.2.2 CSS-Flyout-Menüs 361 14.2.3 Horizontale Menüs 365 14.3 Schönere Formulare 371 14.3.1 Formulare mit Hintergrund 381 14.3.2 Inline-Fehlermeldungen 381 14.4 Arbeiten mit Transparenz 383 14.4.1 Deckkraft von Ebenen steuern 383 14.4.2 PNG: Grafiken mit weichem Verlauf (Alpha-Kanal) 386 14.5 Tabellen und CSS 388 14.6 Bildergalerie 394 14.7 Druckversion per CSS 405 14.8 Stylesheet-Wechsler 408 14.8.1 Simpler Styleswitcher mit HTML-Mitteln 411 14.8.2 Styleswitcher mit JavaScript 412 14.8.3 Styleswitcher mit PHP 414 14.8.4 Styleswitcher mit AJAX 416 14.8.5 Browserweiche für Stylesheets 416 15.1 Schlanke Dokumente durch CSS 419 15.2 Semantik für Suchmaschinen 421 16.1 Grundsätze für zugängliche Websites 426 16.1.1 Inhalt und Präsentation trennen 427 16.1.2 Logische Strukturen schaffen 427 16.1.3 Kennzeichnung der natürlichen Sprache und von Sprachwechseln 427 16.1.4 Nicht für bestimmte Geräte arbeiten 428 16.1.5 Abwärtskompatible Seiten erstellen 428 16.1.6 Alternativen bereitstellen 429 16.1.7 Standards beachten 429 16.2 Einzelne Tipps für barrierefreie Funktionen 429 16.2.1 Barrierefreie Sprung-Links 430 16.2.2 Link-Auszeichnungen - Nützlich und barrierefrei 432 11
16.3 Testen 433 16.3.1 Automatische Testprogramme 434 16.3.2 Testen mit einem Screenreader 434 16.3.3 Testen mit Betroffenen 434 18.1 Aktion Mensch:»Einfach für Alle«445 18.1.1»EfA«2001 447 18.1.2»EfA«2003 448 18.1.3»EfA«2004 453 18.1.4 Der Code von»einfach für Alle«453 18.1.5»EfA«2006 477 18.2 Lycos Deutschland 487 18.3»CSS Zen Ocean«- Ein Beispiellayout für den»css Zen Garden«512 19.1 Editoren 531 19.1.1 Topstyle Pro 531 19.1.2 Style Master 536 19.1.3 Cascade 2.0 537 19.1.4 Adobe Dreamweaver CS3 538 19.1.5 AptanaStudio 552 19.1.6 PSPad 556 19.1.7 Serverseitiger CSS-Editor Eledicss 557 19.2 Analysewerkzeuge und andere Hilfsmittel 558 19.2.1 Firebug 558 19.2.2 Web DeveloperToolbar(s) 562 19.2.3 Debugbar 563 19.2.4 XyleScope 564 19.2.5 Online-Screenshot-Dienste 565 19.2.6 Virtualisierung 567 19.2.7 Adobe Device Central 568 19.2.8 Hilfsmittel für Barrierefreiheit 570 19.2.9 Tidy 573 19.2.10 OpTool 578 12
19.2.11 Calipers 579 19.2.12 IrfanView 580 19.2.13 Eigene Tools herstellen: Benutzer- Stylesheets 581 TEIL V: CSS-Referenz 20.1 Alphabetische Übersicht 589 20.2 Pseudo-Elemente und Pseudo-Formate 591 20.2.1 :llnk 591 20.2.2 :visited 593 20.2.3 :hover(css2) 594 20.2.4 :focus(css2) 595 20.2.5 :active 597 20.2.6 :lang(css2) 598 20.2.7 :first-line 599 20.2.8 :first-letter 601 20.2.9 :first-child (CSS 2) 602 20.2.10 :before und :after (CSS 2) 603 20.2.11 :not(css3) 605 20.3 Inhaltserzeugung 606 20.3.1 content (CSS 2, Änderung in CSS 2.1) 606 20.3.2 countero und counterso 607 20.3.3 counter-increment (CSS 2) 609 20.3.4 counter-reset (CSS 2) 611 20.3.5 quotes(css2) 612 20.4 Schriftformatierungen 614 20.4.1 font-family 614 20.4.2 font-style 619 20.4.3 font-variant 620 20.4.4 font-weight 621 20.4.5 font-size 622 20.4.6 font-size-adjust (CSS, nicht in CSS 2.1, wieder da in CSS 3) 623 20.4.7 font-stretch (CSS 2, nicht in CSS 2.1, wieder da in CSS 3) 624 20.4.8 fönt 625 20.4.9 @font-face (CSS 2, nicht in CSS 2.1) 626 20.4.10 text-decoration 629 13
20.4.11 text-shadow (CSS 2, nicht in CSS 2.1, wieder da in CSS 3) 633 20.4.12 text-transform 633 20.4.13 letter-spacing 634 20.4.14 word-spacing (CSS 2) 635 20.4.15 white-space 636 20.4.16 line-height 637 20.4.17 text-indent 638 20.4.18 text-align (Änderung in CSS 2.1) 639 20.4.19 vertical-align 640 20.4.20 direction (CSS 2) 645 20.4.21 unicode-bidi (CSS 2) 646 20.5 Farben und Hintergründe 647 20.5.1 color 647 20.5.2 background-color 648 20.5.3 background-image 649 20.5.4 background-repeat 650 20.5.5 background-attachment 651 20.5.6 background-position (Änderung in CSS 2.1) 652 20.5.7 background 653 20.6 Kastenformatierungen 655 20.6.1 margin 655 20.6.2 padding 657 20.6.3 border-width 659 20.6.4 border-color 660 20.6.5 border-style 661 20.6.6 border 664 20.6.7 width 665 20.6.8 height 667 20.6.9 overflow (CSS 2) 668 20.6.10 clip (CSS 2, Änderung in CSS 2.1) 670 20.6.11 float 672 20.6.12 clear 675 20.6.13 position (CSS 2) 681 20.6.14 box-sizing (CSS 3) 682 20.6.15 top (CSS 2) 683 20.6.16 right(css2) 684 20.6.17 bottom(css2) 685 20.6.18 left(css2) 686 20.6.19 visibility (CSS 2) 687 14
20.6.20 opacity (CSS 3) 688 20.6.21 z-index (CSS2) 689 20.6.22 list-style-type 692 20.6.23 list-style-image 694 20.6.24 list-style-position 695 20.6.25 list-style 696 20.7 Anzeigemodus 696 20.7.1 display (CSS 1, Erweiterung in CSS 2 - table, Änderung in CSS 2.1, Erweiterung in CSS3-icon) 696 20.8 Tabellenformatierungen 700 20.8.1 table-layout (CSS 2) 700 20.8.2 caption-side (CSS 2, nicht in CSS 2.1, wieder da in CSS 3) 700 20.8.3 border-collapse (CSS 2, Änderung in CSS 2.1) 702 20.8.4 border-spacing (CSS 2) 703 20.8.5 empty-cells (CSS 2) 704 20.8.6 speak-header (CSS 2) 704 20.9 Benutzeroberfläche 705 20.9.1 Cursor (CSS 2) 705 20.9.2 outline (CSS 2) 707 20.10 Seitenlayout mit @page (CSS 2) 709 20.10.1 size (CSS 2, nicht in CSS 2.1) 709 20.10.2 marks (CSS 2, nicht CSS 2.1) 710 20.10.3 :left :right :first (CSS 2) 711 20.10.4 page-break-before, page-break-after (CSS 2) 712 20.10.5 page-break-inside (CSS 2) 713 20.10.6 page (CSS 2, nicht CSS 2.1) 714 20.10.7 orphans (CSS 2) 714 20.10.8 widows(css2) 715 20.11 Sprachausgabe 716 20.11.1 speak (CSS 2, Änderung in CSS 2.1) 716 20.11.2 volume (CSS 2, Änderung in CSS 2.1) 717 20.11.3 speech-rate (CSS 2, Änderung in CSS 2.1) 717 20.11.4 pause (CSS 2, Änderung in CSS 2.1) 718 20.11.5 cue (CSS 2, Änderung in CSS 2.1) 719 20.11.6 play-during (CSS 2, Änderung in CSS 2.1) 720 20.11.7 voice-familiy (CSS 2, Änderung in CSS 2.1)... 721 20.11.8 pitch (CSS 2, Änderung in CSS 2.1) 722 20.11.9 stress (CSS 2, Änderung in CSS 2.1) 723 20.11.10 richness (CSS 2, Änderung in CSS 2.1) 723 15
20.11.11 azimuth (CSS 2, Änderung in CSS 2.1) 724 20.11.12 elevation (CSS 2, Änderung in CSS 2.1) 725 20.11.13 speak-punctuation (CSS 2, Änderung in CSS 2.1) 726 20.11.14 speak-numeral (CSS 2, Änderung in CSS 2.1) 727 20.12 Proprietäre CSS-Eigenschaften 727 20.12.1 Microsoft 728 20.12.2 Firefox 731 20.12.3 Safari/ Webkit 734 20.12.4 Opera 737 A Die DVD-ROM zum Buch 741 B Die Website zum Buch 743 C Die Referenzkarte 745 D Glossar 747 Index 755 16
Video-Lektionen auf der DVD-Rom 1 CSS-Frameworks: YAML und YUI Crids [01:09 Std.] 1.1 Einleitung [00:29 Min.] 1.2 Der Aufbau des YAML-Frameworks [10:16 Min.] 1.3 YAML-Screenlayouts anwenden [09:33 Min.] 1.4 Spalten anordnen und ausblenden [06:49 Min.] 1.5 Seitennavigation mit YAML gestalten [08:01 Min.] 1.6 Spalten unterteilen mit Subtemplates [05:13 Min.] 1.7 CSS Hacks in YAML [02:49 Min.] 1.8 Druckversion mit Print-Stylesheets erstellen... [05:09 Min.] 1.9 Die Yahoo! User Interface Library (YUI) [05:45 Min.] 1.10 YUIGridsCSS [14:29 Min.] 1.1 Einleitung [00:27 Min.] 1.2 Die Zauberagentur im Überblick [01:30 Min.] 1.3 Seiten anlegen [07:02 Min.] 1.4 YAML- Eine Einführung [05:49 Min.] 1.5 YAML-Die Funktionen [08:38 Min.] 1.6 Die Designvorlage [07:07 Min.] 1.7 TemplaVoilä [11:14 Min.] 1.8 Das Layout anpassen [08:34 Min.] 1.9 Subtemplates [11:40 Min.] 1.10 Die Website konfigurieren [12:13 Min.] 1.11 Top-Navigation erstellen [10:50 Min.] 1.12 Hauptnavigation hinzufügen [10:55 Min.] V