Zum Hauptinhalt springen
Nicht aus der Schweiz? Besuchen Sie lehmanns.de

Fortgeschrittene CSS-Techniken

Inkl. Debugging und Performance-Optimierung und neuer Konzepte in CSS3

Ingo Chao, Corina Rudel (Autoren)

Media-Kombination
454 Seiten
2011 | 3. Auflage
Rheinwerk
978-3-8362-1695-1 (ISBN)
CHF 66,15 inkl. MwSt
  • Titel ist leider vergriffen, Neuauflage unbestimmt
  • Artikel merken
In drei umfangreichen und reich illustrierten Teilen zeigen Ihnen die beiden Autoren Corina Rudel und Ingo Chao die Vielfalt der CSS-Prinzipien anhand von vielen Kurzbeispielen, stellen Ihnen kompetent den Umgang mit Inkonsistenzen in modernen Browsern dar und vermitteln professionelle Debugging-Techniken.
Natürlich kommt auch die Praxis nicht zu kurz. Unter anderem erwarten Sie hier verschachtelte Navigationslisten, Mehrspaltenlayouts und viele andere komplexe Layouts. Pflichtlektüre für jeden CSS-Entwickler!


Aus dem Inhalt:



* Vertikale Anordnung
* Horizontale Anordnung
* Positionierung & Stapelung
* Collapsing Margins
* Block Formatting Context
* Floats, Inline-Blocks
* Inline-Formatierungsmodell
* Background-Images
* CSS-Tabellenmodell
* Typografie mit CSS3
* Flexbox-Modul, Feature
* Queries
* Debugging
* Listen und Menüs
* Mehrspaltenlayouts
* CSS für mobile Endgeräte
* Frontend-Engineering

Ingo Chao gehört seit Jahren zu den aktivsten Mitgliedern der Mailingliste css-discuss, die sich der Hilfe bei CSS-Anwendungsproblemen verschrieben hat. Er debuggt im Auftrag von Designern und Entwicklern Websites und arbeitet für sie fortgeschrittene Layouttechniken aus. Er ist zudem als freier Lektor für medizinische Fachverlage tätig.

Corina Rudel hat sich nach ihrem Innenarchitekturstudium auf 3D-Visualisierung und Webdesign spezialisiert. Sie unterrichtet an der Hochschule Rosenheim das Wahlfach Webdesign und gibt in deutschsprachigen Webdesign-Foren Hilfestellung bei CSS-Problemen.




... Einleitung ... 13



... Einleitung zur dritten Auflage ... 15



... Hinweise zum Buch und zur DVD ... 17



Teil I ... CSS-Prinzipien, die nicht selbsterklärend sind ... 19



1 ... Eine Annäherung an die Spezifikation ... 21

... 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.5 ... Zur Begriffsbestimmung ... 29



2 ... Vertikale Anordnung ... 31

... 2.1 ... 100 % Mindesthöhe ... 33

... 2.2 ... Fußzeile am ende -- FooterStick und FooterStickAlt ... 36

... 2.3 ... Collapsing Margins in verschachtelten Elementen ... 41

... 2.4 ... Vertikal zentrieren ... 49



3 ... Horizontale Anordnung ... 61

... 3.1 ... Ausrichtung mit Margin ... 61

... 3.2 ... Negative Margins ... 62

... 3.3 ... Mindest- und Maximalbreiten ... 69



4 ... Floats ... 77

... 4.1 ... Was kann Float? ... 77

... 4.2 ... Float beenden: Clear ... 88

... 4.3 ... Floats einschließen -- Containing Floats ... 102

... 4.4 ... Zusammenfassung ... 111

... 4.5 ... Exkurs: Block Formatting Context ... 112

... 4.6 ... Anwendungsbeispiel: FooterStickAlt in einem Float-Layout ... 119



5 ... Das Inline-Formatierungsmodell ... 127

... 5.1 ... Inline Formatting Context ... 127

... 5.2 ... Blöcke in einer Zeile -- display: inline-block ... 132



6 ... Positionierung und Stapelung ... 137

... 6.1 ... Stapelkontexte ... 137

... 6.2 ... Containing Block ... 149

... 6.3 ... Relative Positionierung ... 152

... 6.4 ... Absolute Positionierung ... 153

... 6.5 ... Fixierte Positionierung ... 157

... 6.6 ... Opacity -- die Undurchsichtigkeit ... 162

... 6.7 ... Exkurs: Shrink-to-fit ... 163



7 ... Background-Images ... 167

... 7.1 ... Die Hintergrundeigenschaften ... 167

... 7.2 ... background-position ... 168

... 7.3 ... background-repeat ... 171

... 7.4 ... background-attachment ... 172

... 7.5 ... background-clip und background-origin ... 176

... 7.6 ... background-size ... 177

... 7.7 ... Faux Columns ... 178

... 7.8 ... Navigation mit Tabs ... 190

... 7.9 ... PNG-Transparenz vs. GIF-Transparenz ... 197



8 ... Das CSS-Tabellenmodell ... 201

... 8.1 ... Das Gestalten von Tabellen und CSS-Layouttabellen ... 202

... 8.2 ... Ein hybrides Layout ... 212

... 8.3 ... Das Auszeichnen von HTML-Datentabellen ... 217



9 ... Ausgabe für Medien ... 221

... 9.1 ... @media print ... 221

... 9.2 ... Das mobile Web ... 224

... 9.3 ... Media Queries -- »Medienabfragen« ... 226

... 9.4 ... Und was ist mit Style in E-Mail? ... 227



Teil II ... Inkonsistenzen in Browsern und die Grundlagen des Debuggings ... 229



10 ... Debugging ... 231

... 10.1 ... Vorab: Das Layout unter Stress setzen ... 232

... 10.2 ... CSS- und HTML-Validierung ... 232

... 10.3 ... Reduktion auf das Problem ... 234

... 10.4 ... Das Testen in den Browsern ... 235

... 10.5 ... Werkzeuge für Analyse und Fehlerbehebung ... 244

... 10.6 ... Hacks ... 250

... 10.7 ... Magic Bullets gegen Bugs des IE Win ... 259

... 10.8 ... Bug-Ressourcen ... 266

... 10.9 ... Mailinglisten und Foren ... 270

... 10.10 ... Exkurs: Wenn sich die konformen Browser uneins sind ... 271



11 ... CSS-Erweiterungen ... 275

... 11.1 ... Präfixe ... 275

... 11.2 ... Der AlphaImageLoader-Filter im IE ... 276

... 11.3 ... Behavior im IE ... 283

... 11.4 ... Expression im IE ... 285

... 11.5 ... Die zoom-Eigenschaft im IE ... 290



Teil III ... Die praktische Umsetzung von komplexen Layouts ... 293



12 ... Navigation: Listen und Menüs ... 295

... 12.1 ... Horizontale navigation ... 298

... 12.2 ... Vertikale navigation ... 316

... 12.3 ... Verschachtelte Navigation ... 321

... 12.4 ... Ausklappmenü ... 322

... 12.5 ... Kennzeichnung des aktuellen Menüpunkts ... 333



13 ... Mehrspaltenlayouts ... 337

... 13.1 ... Das perfekte Layout? ... 337

... 13.2 ... Spaltenanordnung: Die Basis ... 344

... 13.3 ... Spalten mit einheitlichen Breiten per Float ... 350

... 13.4 ... Spalten mit gemischten Breiten per Float ... 364

... 13.5 ... Spalten ohne Float: hybrides Layout ... 384

... 13.6 ... Welche Technik ist die beste? ... 388



14 ... Gleich hohe Spalten ... 389

... 14.1 ... Spalten im umgebenden Element simulieren ... 389

... 14.2 ... Verlängerung der Spalten ... 402

... 14.3 ... Gleich hohe Spalten in den Entwürfen für CSS3-Module ... 413



Teil IV ... Was vor uns liegt ... 415



15 ... Frontend-Engineering ... 417

... 15.1 ... Der neue Blick auf die Performance ... 417

... 15.2 ... Für welche Browser soll man entwickeln? ... 426



16 ... Neue Konzepte ... 429

... 16.1 ... Das Flexible Box Layout Module ... 429

... 16.2 ... Die Eigenschaft display ist zusammengesetzt ... 433

... 16.3 ... Feature Queries ... 434

... 16.4 ... Scoped CSS ... 435

... 16.5 ... Mehr Typografie mit CSS3 ... 436



... Index ... 447

Erscheint lt. Verlag 29.12.2011
Reihe/Serie Galileo Computing
Sprache deutsch
Maße 175 x 240 mm
Gewicht 1274 g
Themenwelt Mathematik / Informatik Informatik Web / Internet
Schlagworte CSS • CSS3 • CSS3 (Cascading Style Sheets); Handbuch/Lehrbuch • CSS (Cascading Style Sheets) • CSS (Cascading Style Sheets); Handbuch/Lehrbuch • CSS-Layouts • HTML • HTML5 • Internetprogrammierung • Webdesign
ISBN-10 3-8362-1695-7 / 3836216957
ISBN-13 978-3-8362-1695-1 / 9783836216951
Zustand Neuware
Informationen gemäß Produktsicherheitsverordnung (GPSR)
Haben Sie eine Frage zum Produkt?
Mehr entdecken
aus dem Bereich