Markup Webdesign Journal

Der sparsame Einsatz von CSS-Hacks ist zu empfehlen. Das hat vor allem zwei Gründe. Zum einen fordert das prinzipiell ein standardkonformes und effizientes Vorgehen beim Design einer Website. Auf der anderen Seite, ist dazu aus aktuellem Anlass zu raten. Der Bedarf an alternativen CSS-Formatierungen für die ein oder andere Design-Problemstellung, lässt sich von vorn herein auf ein erträgliches Maß reduzieren und senkt somit auch den Umstellungsaufwand im Bezug auf den Internet Explorer 7.

Hacks sind nicht im Sinne des Erfinders

Ganz darauf verzichten kann man dennoch nicht, auch wenn das Ziel der standardkonformen Entwicklung einer Website im Widerspruch zu dem Einsatz von CSS-Hacks steht, die Sonderwünsche einzelner Browser erfüllen. Daher sollte man den direkten Weg zum Ziel immer im Auge behalten und Umwege vermeiden. Sauber strukturierte Dokumente und der effiziente Einsatz von CSS sind bereits eine gute Grundlage.

Der Universalhelfer und andere Methoden

Es gibt zwei gute Möglichkeiten, den Hack-Aufwand zu reduzieren und mehr Sicherheit im Umgang mit dem dimensionalen Verhalten der Elemente einer Website zu bekommen.

Kleines Sternchen, große Wirkung

Das ist der oft zitierte Univeralselektor in CSS. Mit seiner Hilfe lassen sich global die meisten Eigenschaften der Elemente ansprechen. So auch die Polster (padding) und die Außenabstände (margin) von Elementen.

* {
margin: 0;
padding: 0;
}

Abstände und Polster werden auf Null gesetzt. Der Umstand, dass die Browser teilweise andere Ausgangswerte verwenden, wird somit außer Kraft gesetzt. So machen es alle Browser zunächst gleich. Werden im Nachhinein Abstände und Polster benötigt, notiert man sie an entsprechender Stelle im Stylesheet. Die Browser verhalten sich gleich, es kommt browserüberreifen nicht zu unerwünschten Ergebnissen bei der Positionierung von Elementen auf der Website. Es können auf diese Weise einige Hacks eingespart werden. Weniger Sorgen im Bezug auf IE7 und schlankere Stylesheets sind die Folge.

Weniger Polsterung

Im Allgemeinen bereiten die Polster (padding) vielen Webdesignern des Öfteren einiges an Kopfzerbrechen. Dann nämlich, wenn die so gestylten Elemente, durch unterschiedliche Interpretation eines Browsers, verschiedene Größen aufweisen. Vor allem in der Horizontalen besteht dieses Problem in Verbindung mit älteren Versionen des Internet Explorers.

Hierfür gibt es den so genannten Box-Model-Hack, der dieses Problem für den Internet Explorer < Version 6 korrigiert. Ohne ihn zum tausendsten Mal nachzubeten, hier die ein Link zum Nachlesen, falls ihn jemand nicht kennen sollte.

Auf ihn kann man allerdings auch verzichten. Es ist zwar etwas mehr Aufwand, trotzdem behält man so besser die Kontrolle. Man verzichtet bei Elementen, die der Positionierung von Inhalten dienen, z.B. bei den Hauptboxen (DIV) des Seitengerüsts aber auch sonst wo es "eng" werden könnte, auf die Festlegung von padding-Werten. Dafür wendet man Abstände (margin) auf die enthaltenen Elemente dieser Hauptboxen an.

/*Beispiel alt*/
DIV {
width: 500px;
padding: 10px;
}

/*mit margin*/
DIV {
width: 500px;
}

P {
margin: 5px 10px;
}

Textabsätze z.B. bekommen einen Außenabstand (horizontal) von 10px. Andere Elemente analog. Die margin-Werte haben keinen Einfluss auf die Größe der umgebenden Box. Padding kann auf enthaltene Elemente, z.B. eine Überschrift innerhalb eines DIVs, bedenkenlos angewandt werden.

Management

Die dennoch benötigten Hacks sollte man regelrecht verwalten. Zumindest sollten sie mit Kommentaren im Stylesheet versehen werden, um auch langfristig den Überblick zu behalten. Bei extrem aufwendigen Designs, mit u.U. einer Vielzahl von Hacks ist erweiternd ein systematisches Hackmanagement zu empfehlen, wie es folgende zwei Ansätze beschreiben.

• Strategies for Long-Term CSS Hack Management
• CSS Hack Management

Und noch ein Link, um sich auf IE7 vorzubereiten: Future-proof your CSS with Conditional Comments

Gerade im Hinblick auf die bevorstehende Veröffentlichung von Nummer 7, sollte man sich gut organisieren und vorbereiten. Auch er wird wieder als Marktführer die meisten Menschen ins Internet bringen. Ob einem das gefällt oder nicht.

Fazit

Es handelt sich bei diesen Ausführungen natürlich nicht um neue Erkenntnisse in der Arbeit mit CSS. In Summe wird man so auch nicht die Größe eines Stylesheets reduzieren. Ich persönlich bin so am besten gefahren. Das Ergebnis ist ein Stylesheet fast ohne Hacks, das dennoch die browserübergreifend fast identische Darstellung der Websites ermöglicht. Es ist nicht Jedermanns Sache, aber für mich waren und sind es ein Ansätze zu mehr Spaß am Stylsheet.