Ingo Chao, Corina Rudel Fortgeschrittene CSS-Techniken inkl. CSS-Debugging und Performance-Optimierung k Auf einen Blick C i L Teil i CSS-Prinzipien, die nicht selbsterklärend sind 1 Eine Annäherung an die Spezifikation ........................... 21 2 Vertikale Anordnung .................................................... 31 3 Horizontale Anordnung ................................................ 61 einen B 4 Floats ........................................................................... 77 F 5 Das Inline-Formatierungsmodell ................................... 127 6 Positionierung und Stapelung ....................................... 137 Au 7 Background-Images ...................................................... 167 8 Das CSS-Tabellenmodell ............................................... 201 9 Ausgabe für Medien ..................................................... 221 Teil ii Inkonsistenzen in Browsern und die Grundlagen des Debuggings 10 Debugging ................................................................... 231 11 CSS-Erweiterungen ...................................................... 275 Teil iii Die praktische umsetzung von komplexen Layouts 12 Navigation: Listen und Menüs ...................................... 295 13 Mehrspaltenlayouts ...................................................... 337 14 Gleich hohe Spalten ..................................................... 389 Teil iV Was vor uns liegt 15 Frontend-Engineering .................................................. 417 16 Neue Konzepte ............................................................ 429 Auf einen Blick | 3 inhalt Einleitung ......................................................................... 13 Einleitung zur dritten Auflage ........................................... 15 Hinweise zum Buch und zur DVD ..................................... 17 Teil i: CSS-Prinzipien, die nicht selbsterklärend sind 1 Eine Annäherung an die Spezifikation 1.1 Der Zweck der Spezifikation ................................. 21 1.2 Designprinzipien von CSS ..................................... 23 1.3 Warum gibt es dieses oder jenes nicht in CSS? ... 24 1.4 Einen Zugang zur Spezifikation finden ................. 26 1.4.1 CSS 2.1: x und CSS3: Modul y .................... 27 1.4.2 Erwartungen von HTML5 an die Darstellung der Browser ............................. 28 1.5 Zur Begriffsbestimmung ....................................... 29 1.5.1 Box Model ................................................. 29 1.5.2 »must« und »should« ................................. 29 1.5.3 Regeln ....................................................... 29 1.5.4 Replaced Elements ..................................... 30 1.5.5 User, User Agent, Author ........................... 30 2 Vertikale Anordnung 2.1 100 % Mindesthöhe .............................................. 33 2.2 Fußzeile am ende – FooterStick und FooterStickAlt ....................................................... 36 2.2.1 FooterStick ................................................ 36 2.2.2 FooterStickAlt ............................................ 39 2.3 Collapsing Margins in verschachtelten elementen ............................................................. 41 2.3.1 Wann fallen Ränder nicht zusammen? ........ 43 2.3.2 Sonderfall: Zusammenfallende Ränder bei nur einem Element .............................. 46 2.4 Vertikal zentrieren ................................................. 49 2.4.1 Eine Box mit bekannter Höhe vertikal zentrieren ..................................... 50 2.4.2 Eine Box mit unbekannter Höhe vertikal zentrieren ..................................... 55 2.4.3 Zusammenfassung und Ausblick ................. 60 4 | Inhalt alt nh 3 Horizontale Anordnung i 3.1 Ausrichtung mit Margin ........................................ 61 3.2 Negative Margins .................................................. 62 3.2.1 Box mit gemischter Breite .......................... 64 3.2.2 Asymmetrische Ausrichtung ....................... 67 3.3 Mindest- und Maximalbreiten .............................. 69 3.3.1 Mindest- und Maximalbreiten im IE < 7 ..... 70 3.3.2 Zusammenfassung ...................................... 75 3.3.3 Relevanz in der Praxis? ............................... 76 4 Floats 4.1 Was kann Float? ................................................... 77 4.1.1 Bilder von Text umfließen lassen ................. 78 4.1.2 Ein Einstieg in Spalten mit Float ................. 80 4.1.3 Mehrere aufeinanderfolgende Floats .......... 82 4.2 Float beenden: Clear ............................................. 88 4.2.1 Clear ohne Margins .................................... 91 4.2.2 Clear-Element mit Margin: Kollabieren mit umgebendem Element ....... 91 4.2.3 Clear-Element mit Margin: Kollabieren unterbunden ............................ 94 4.2.4 Clear-Element mit Margin und Float ........... 94 4.2.5 Clear-Element mit Margin: Kollabieren mit vorhergehendem Element .................... 95 4.2.6 Negative Clearance .................................... 97 4.2.7 Fingerübung: Spaltenübergreifend umflossenes Bild ........................................ 98 4.3 Floats einschließen – Containing Floats ............... 102 4.3.1 Einschließen mit Clear ................................ 103 4.3.2 Floats in Floats einschließen ......................... 105 4.3.3 Easyclearing – Floats einschließen ohne zusätzliches Markup .......................... 106 4.3.4 overflow zum Einschließen von Floats ........ 110 4.3.5 Welche Methode ist die richtige? ............... 111 4.4 Zusammenfassung ................................................ 111 4.5 Exkurs: Block Formatting Context ....................... 112 4.5.1 Ungewolltes Clear einschränken ................. 114 4.5.2 Floats durch BFC einschließen ................... 118 4.5.3 Zusammenfassung ...................................... 118 Inhalt | 5 4.6 Anwendungsbeispiel: FooterStickAlt in einem Float-Layout ............................................... 119 4.6.1 FSA und solides Clear ................................. 121 4.6.2 FSA und Easyclearing ................................. 122 4.6.3 FSA und »Float in Float« ............................ 124 4.6.4 FSA und Clear mit dem Footer ................... 126 5 Das inline-Formatierungsmodell 5.1 Inline Formatting Context .................................... 127 5.1.1 Zeilenboxen und ihre Inline-Boxen ............. 127 5.1.2 line-height ................................................. 128 5.1.3 Inhaltsbereich der Inline-Box ...................... 129 5.1.4 Vertikale Anordnung der Inline-Boxen – vertical-align .............................................. 130 5.1.5 Horizontale Verteilung der Inline-Boxen – text-align ................................................... 131 5.2 Blöcke in einer Zeile – display: inline-block ......... 132 5.2.1 Inline-Block im IE < 8 ................................. 132 5.2.2 Inline-Block im Firefox < 3 ......................... 134 5.2.3 Zeilenumbruch von Blöcken ....................... 134 6 Positionierung und Stapelung 6.1 Stapelkontexte ...................................................... 137 6.1.1 Abfolge des Zeichnens ............................... 138 6.1.2 Beispiele und Erläuterungen zur Zeichnungsabfolge ..................................... 138 6.1.3 Was bedeutet ein negativer Wert für z-index? ................................................ 148 6.2 Containing Block ................................................... 149 6.2.1 Bezugsrahmen ............................................ 149 6.2.2 Initial Containing Block, Canvas und Viewport ............................................. 150 6.2.3 Prozentangaben ......................................... 150 6.2.4 Containing Block im IE ≤ 7 ......................... 151 6.3 Relative Positionierung ......................................... 152 6.4 Absolute Positionierung ....................................... 153 6.4.1 Konzept ..................................................... 153 6.4.2 Probleme im IE < 8 mit absoluter Positionierung ............................................ 154 6.5 Fixierte Positionierung .......................................... 157 6.5.1 Exkurs: Simulation fixierter Positionierung im IE < 7 ............................. 158 6 | Inhalt 6.6 Opacity – die undurchsichtigkeit ......................... 162 6.7 Exkurs: Shrink-to-fit ............................................. 163 6.7.1 Auslöser ..................................................... 163 6.7.2 Bestimmung der Shrink-to-fit-Breite ........... 164 6.7.3 Fallstricke bei der Verwendung ................... 165 6.7.4 Intrinsische Größen in CSS3 ....................... 166 7 Background-images 7.1 Die hintergrundeigenschaften .............................. 167 7.2 background-position ............................................ 168 7.3 background-repeat ............................................... 171 7.4 background-attachment ....................................... 172 7.4.1 Der Wert scroll .......................................... 172 7.4.2 Der Wert fixed ........................................... 173 7.4.3 Der Wert local ........................................... 175 7.4.4 … und der Internet Explorer ≤ 7 ................ 176 7.5 background-clip und background-origin .............. 176 7.6 background-size .................................................... 177 7.7 Faux Columns ........................................................ 178 7.7.1 Faux Columns als linear-gradient ................ 179 7.7.2 Liquid Faux Columns .................................. 185 7.8