Fortgeschrittene CSS-Techniken

Transkript

1 Ingo Chao, Corina Rudel Fortgeschrittene CSS-Techniken Inkl. Debugging und Performance-Optimierung Galileo Press

2 Inhalt Einleitung 13 Hinweise zum Buch und zur DVD 17 Teil I: CSS-Prinzipien, die nicht selbsterklärend sind 1 Eine Annäherung an die Spezifikation Der Zweck der Spezifikation Designprinzipien von CSS Warum gibt es dieses oder jenes nicht in CSS? Einen Zugang zur Spezifikation finden Zur Begriffsbestimmung Box Model »must«und»should« Regeln Replaced Elements User, User Agent, Author 29 2 Vertikale Anordnung % Mindesthöhe Fußzeile am Ende - FooterStick und FooterStickAlt FooterStick FooterStickAlt Collapsing Margins in verschachtelten Elementen Wann fallen Ränder nicht zusammen? Sonderfall: Zusammenfallende Ränder bei nur einem Element Vertikal zentrieren Eine Box mit bekannter Höhe vertikal zentrieren Eine Box mit unbekannter Höhe vertikal zentrieren Zusammenfassung und Ausblick 59 3 Horizontale Anordnung Ausrichtung mit Margin Negative Margins Box mit gemischter Breite Asymmetrische Ausrichtung 68 4 Inhalt

3 3.3 Mindest- und Maximalbreiten Mindest-und Maximalbreiten im IE < Zusammenfassung 76 4 Floats Was kann Float? Bilder von Text umfließen lassen Ein Einstieg in Spalten mit Float Mehrere aufeinanderfolgende Floats Float beenden: Clear Clear ohne Margins Clear-Element mit Margin: Kollabieren mit umgebendem Element Clear-Element mit Margin: Kollabieren unterbunden Clear-Element mit Margin und Float Clear-Element mit Margin: Kollabieren mit vorhergehendem Element Negative Clearance Fingerübung: Spaltenübergreifend umflossenes Bild Floats einschließen-containing Floats Einschließen mit Clear Floats in Floats einschließen Easyclearing- Floats einschließen ohne zusätzliches Markup overflow zum Einschließen von Floats Welche Methode ist die richtige? Zusammenfassung Exkurs: Block Formatting Context Ungewolltes Clear einschränken Floats durch BFC einschließen Zusammenfassung Das Inline-Formatierungsmodell Inline Formatting Context Zeilenboxen und ihre Inline-Boxen line-height Inhaltsbereich der Inline-Box Vertikale Anordnung der Inline-Boxen - vertical-align Horizontale Verteilung der Inline-Boxen - text-align Blöcke in einer Zeile - display: inline-block Inline-Block im IE < Inhalt 5

4 5.2.2 Inline-Block im Firefox < Die Inline-Block-Hacks für IE < 8 und Firefox < 3 im Zusammenspiel Exkurs: Hintergrundbild eines mehrzelligen Inline-Elements Positionierung und Stapelung Stapelkontexte Abfolge des Zeichnens Beispiele und Erläuterungen zur Zeichnungsabfolge Containing Block Bezugsrahmen Prozentangaben Containing Block im IE <, Relative Positionierung Absolute Positionierung Konzept Probleme im IE mit absoluter Positionierung Fixierte Positionierung Exkurs: Simulation fixierter Positionierung im IE< Opacity-die Undurchsichtigkeit Exkurs: Shrink-to-fit Auslöser 154 Ш Bestimmung der Shrink-to-fit-Breite Fallstricke bei der Verwendung Background-Images Die Hintergrund-Eigenschaften 159 ^_ 7.2 background-position 160 ^m 7.3 background-repeat background-attachment Der Wert scroll Der Wert fixed und der Internet Explorer < Faux Columns Liquid Faux Columns Navigation mit Tabs Sliding Doors of CSS CSS-Sprites PNG-Transparenz vs. GIF-Transparenz Ausblick: Multiple Hintergrundbilder in CSS Inhalt

5 8 Das CSS-Tabellenmodell Das Gestalten von Tabellen und CSS-Layouttabellen Display-Eigenschaften Anonyme Tabellenobjekte und die minimale Tabellenstruktur Tabellenzellen Spalten Position der Tabellenbeschriftung Tabellenebenen Width-Algorithmen Höhe und vertikale Anordnung Border Spanning Ein hybrides Layout Besonderheiten im HTML CSS für konforme Browser CSS per Conditional Comment für den IE<s Das Auszeichnen von HTML-Datentabellen Ausgabe für Medien 205 print Das mobile Web Media Queries -»Medienabfragen« Und was ist mit Style in ? 212 Teil II: Inkonsistenzen in Browsern und die Grundlagen des Debuggings 10 Debugging Vorab: Das Layout unter Stress setzen CSS- und HTML-Validierung Reduktion auf das Problem Das Testen in den Browsern Der Meta-Opt-out im IE Paralleles Testen in mehreren Versionen des IE Safari & WebKit (Mac und Win) Opera Firefox Werkzeuge für Analyse und Fehlerbehebung Firebug, DOM Inspector, Web Developer IE Developer Toolbar WebKit Web Inspector/Webinformationen

6 Щ Opera Dragonfly Hacks CSS-Hacks Conditional Comments Auf dem Weg zu einer soliden Hacking-Strategie Magic Bullets gegen Bugs des IE-Win haslayout 245 Щ position: relative Negativer Backside-Margin :hover{ background: 0 0} Markup-Änderung: Elemente trennen Bug-Ressourcen Private Seiten Bugtracker der Browser-Anbieter Mailinglisten und Foren Exkurs: Wenn sich die konformen Browser uneins sind Herstellereigene CSS-Erweiterungen Der AlphalmageLoader-Filter im IE Notation Verhalten des Filters Hinweise zur Verwendung Nicht anklickbare Links PNG-Scripts Behavior im IE Expression im IE Ereignisse, bei denen Expressions ausgewertet werden Expression für min/max-width im IE Expression für max-width in em Die zoom-eigenschaft im IE Notation zoom und haslayout 276 Teil IM: Die praktische Umsetzung von komplexen Layouts 12 Navigation: Listen und Menüs Horizontale Navigation Horizontale Navigation mit display: inline Horizontale Navigation mit display: inline-block Horizontale Navigation mit display: table-cell I Inhalt

7 Horizontale Navigation mit Float Vertikale Navigation Besonderheiten im IE < Exkurs: Navigation mit Erläuterung als»dl-tabelle« Verschachtelte Navigation Ausklappmenü Einfaches Dropdown-Menü IE-VVorkaround mit Script IE-Workaround mit Conditional Comments Flyout-Menü Flyout-Menü mit drei Ebenen Hinweise zu Ausklappmenüs Kennzeichnung des aktuellen Menüpunkts Hervorhebung durch body-klasse oder-id Hervorhebung durch Linkklasse/-ID Entfernung des Links Mehrspaltenlayouts Das perfekte Layout? Fixes Layout Fluides Layout Elastisches Layout Mischformen Exkurs: Über die Lesbarkeit Spaltenanordnung: Die Basis Spalten mit einheitlichen Breiten per Float Fixes Layout Fixes Layout mit Content First per Content-Wrapper Elastisches Layout mit Content First per (negativer) Verschiebung Fluides Layout mit Mindest- und Maximalbreite Spalten mit gemischten Breiten per Float Einrückung des Inhaltsbereichs und zusätzlicher Content-Wrapper Content-Wrapper mit negativen Backside-Margins Einrückung des umgebenden Elements und Verschiebung mit negativen Margins Einrückung des umgebenden Elements, Verschiebung mit negativem Margin und Content First 371

8 13.5 Spalten ohne Float: hybrides Layout CSS-Tabelle für konforme Browser Inline-Block-Workaround für IE < Welche Technik ist die beste? Gleich hohe Spalten Spalten im umgebenden Element simulieren Faux Columns Negative Verschiebung auf Randbereiche Verlängerung der Spalten Equal Height Columns Companion Columns 401 Teil IV: Anhang 15 Performance im Frontend-Engineering Der neue Blick auf die Performance Werkzeuge für Performance-Analysen Netzwerkmonitore Fiddler-HTTP Debugging Proxy YSlow und Page-Speed Die Hammerhead-Extension für Firebug ^5 Das Lori-Add-on für Firefox Optimierung des HTML 430 Index Inhalt