Schon oft in der Webstandards-Mailinglist diskutiert und in Blogs gepostet:
evolt.org – Top 10 CSS Tricks you may not know
Ergänzend zu evolt.org Ten CSS Tricks:
eine korrigierte und verbesserte Version von Tantek, die ich auch irgendwie lehrreicher finde.
Der CSS Box Model Hack von Tantek Celik wird derzeit von Webdevelopern benutzt, um einen Rendering-Fehler in älteren Browsern als dem IE6 auszugleichen, in dem die Größenangaben für padding und border zur inneren statt zur äußeren Gesamtbreite eines Elements addiert werden.
Eine gewöhnliche Stylesheet-Regel für das Markup
<div id="myBox">...</div>
könnte in etwa so aussehen:
#myBox{
width: 300px;
border: 5px;
padding: 10px;
}
Daraus resultiert für das DIV-Element #myBox eine Gesamtbreite von 330px (300px Breitet + zweimal 5px Rahmen + zweimal 10px-Padding), dargestellt von allen Browsern; außer Vorgängerversionen des IE6 (In jenen Browsern würde die Gesamtbreite 300px betragen, die dann auch die Werte für padding und border beinhaltet. )
Der Box Model Hack von Tantek hilft zwar bei dem Problem, die CSS-Regeln können aber bei umfangreicheren Stylesheets schnell unübersichtlich werden.
Mit einer einfachen Alternative, die ich auf evolt.org entdeckt habe, läßt sich das Problem des falschen Renderings des Box-Modells gleich ganz umgehen:
#myBox{
width: 300px;
}
#myBox div{
border: 5px;
padding: 20px;
}
Das dazugehörige Markup sieht dann folgendermaßen aus:
<div id="myBox"><div>...</div></div>
Wie man sieht wird in das ‘eigentliche’ DIV-Tag ein weiteres DIV eingebettet, daß dann mit den gewünschten padding und border Werten formatiert wird.
Die Box hat nun die gewünschte Breite von 300px; unabhängig mit welchem Browser das Dokument betrachtet wird.
Zur Veranschaulichung gibt’s hier eine Live-Demo.
Nun kann man sich streiten, welche Style-Definition Vor- bzw. Nachteile hat.
Beim Vergleich der CSS-Regeln fällt auf, daß die Alternative zu Tantek’s Hack mit nur drei Attribut-Selektoren weniger Codeaufwand darstellt; andererseits muss im Markup noch ein zusätzliches DIV-Tag eingefügt werden.
Andere Web-Entwickler wiederum arbeiten evtl. ungern mit solchen ‘Hacks’ bzw. mit der Verwendung von eigentlich nicht benötigten Attribut-Selektoren (voice-family). Die andere Hälfte ist der Meinung, lieber Hacks in den CSS zu verwenden, als im Markup selbst.
Hin und her: Letztenendes ist es eine Frage des eigenen Programmierstils oder der Vorgaben der verwendeten Semantik im Markup, welche Variante man verwendet.
Dennoch sehe ich immer mehr CSS-basierende Layouts, die für den eigentlichen Content jeder DIV-Box eine outer sowohl als auch eine inner-Regel (+ein ‘inneres’ DIV-Tag) definieren, um den Content layoutgerecht handhaben zu können. (Paddings, um bspw. Textinhalt vom Box-Rand zu lösen sollen ja nicht das halbe Site-Layout sprengen.)
Daher halte ich die Alternative zum Box Model Hack für sinnvoll, da durch die zweite Regel die Formatierung der (inneren) DIV-Box getrennt von der Größe und Position der äußeren gehandhabt werden kann.
RT @dertimbo CSS Box Model Hack-AlternativePosted in Developing,
Possibly Related Entries
Who is this?
freshlabs journal is the bi-lingual weblog and digital playground of Tim Isenheim, designer and webdeveloper from Hamburg, Germany. More →
