skip to Navigation

Does your style sheet need some service?

– What! He takes money for the help he offers?

– Yes. See my service page and dolphin's back.

Book!

Fortgeschrittene CSS-Techniken
Inkl. Debugging und Performance-Optimierung

amazon.deGalileo Computing

Ingo Chao, Corina Rudel Galileo Computing 3., aktualisierte Auflage 2012 454 S., gebunden, komplett in Farbe, mit DVD 44,90 Euro [D] ISBN 978-3-8362-1695-1

CSS ist nicht einfach. Man steht oft vor dem leeren Stylesheet, vor der Frage nach dem optimalen Verfahren, mit dem sich ein angestrebtes Layout sicher zusammenfügen lässt. Wir greifen Fragen von fortgeschrittenen Webdesignern und Entwicklern auf, die wir in den letzten Jahren in Foren und Mailinglisten beantwortet haben. Unser Buch ist eine kritische Auseinandersetzung mit der Sprache CSS und ihren Techniken, die Ihnen helfen soll, Ihre Fragen im Zusammenhang mit den zugrunde liegenden Prinzipien sehen zu können. Sie werden mit diesem Buch lernen, eigene Lösungen zu finden und wichtige CSS-Techniken sicher anzuwenden.

Die Grenzen von CSS 2.1 und die Unzulänglichkeiten der Browser sind sehr gegenwärtig, daher kann sich unser Buch, das sich mit fortgeschrittenen Techniken an seine Leser wendet, nicht auf die Möglichkeiten von CSS3 allein festlegen. Wir haben uns nicht an einem Spagat versucht, sondern die hilfreichen Neuerungen aus dem nächsten CSS-Level zu dem gerade behandelten Problem eingepflegt. CSS3 soll CSS 2.1 nicht widersprechen, sondern es erweitern – und unser Buch folgt dieser Auffassung. Den Text des Buches haben wir aktualisiert, gerafft und um einige Abschnitte erweitert. Zusätzlich haben wir den in der zweiten Auflage hinzugekommenen Teil IV ergänzt ... Wie schon in der ersten und zweiten Auflage diskutieren wir die Sprache CSS, indem wir auf ihre Prinzipien zurückkommen.

Leseprobe: Fortgeschrittene CSS-Techniken (PDF)

Currently available only in German.

Writings

CSS selector specificity and complexity in development

Calculating the mean selector specificity of Cascading Style Sheets identifies three prototypical authoring styles. In large projects, a selector architecture that prefers classes over types and unique identifiers may reduce complexity and development costs.

Companion Columns

Introducing a technique for equal heights aspect of columns.

On having layout

In this article, we focus on some aspects of "hasLayout" in IE/Win. The editors of this revision are: Holly Bergevin, Ingo Chao, Bruno Fassino, John Gallant, Georg Sørtun and Philippe Wittenbergh.

pseudo-class, pseudo-element, pseudo-CSS

Bugs and inconsistencies regarding pseudo-elements and pseudo-classes in IE/Win.

acidic float tests

In IE, floats are auto-contained by elements that have “layout.” Sometimes, this auto-containing might be not desired. An in-depth discussion by the haslayout-editors.

IE/Win: relatively positioned parent and floated child – disappearance

Where is my float? Where is my positioned element? In IE/Win, position: relative renders strange: in conjunction with float and clear, elements are disappearing.

Quirky Percentages in IE6's Visual Formatting Model

In this guest demo (hosted on Position is Everything), I describe the IE6 percentages bug on margins and paddings and provide information about the reflow on hover-transitions.

IE6/Win: jump on hover in Ala's Holy Grail layout

This article focuses on a jumping column sometimes visible in the "Holy Grail" layout published in A list apart and in similar layouts that use percentage margins.

background images lost on multi line inline links

IE/Win does not render non-repeating background images when the link breaks into a new line.

IE6: Filter flaws

Links don't work when the filter: progid: DXImageTransform. Microsoft. AlphaImageLoader is used on an absolutely positioned element.

absolutely positioned element with auto offset: the static position

The specification says, absolutely positioned elements that have no offset like left:0 are positioned at their static position. IE cannot calculate a static position that meets the specification when the a.p. element follows a float, due to a conflict between the float model and the proprietary layout model.

list injection for PRE tags

How to present a long source listing with pre? An experimental technique to replace a preformatted source listing by injecting an ordered list.

Not yet sorted out

Design fragments and test pages

Development zone: CSS stuff