Hallo!

Mein Name ist Mario Fink — ich arbeite als Webentwickler & UX Designer in Fulda.

Konkret heißt das, ich entwerfe und baue Webseiten die

  • leicht zugänglich sind
  • sich auf das Wesentliche konzentrieren
  • den Besucher nicht mit unnötigem Klimm-Bimm verwirren

Im Detail heißt das, ich beschäftige mich mit

  • HTML5, CSS3 & JavaScript
  • Responsive Design
  • Progressive Enhancement
  • Benutzer-zentriertem Design
  • vielem mehr

Außerdem schreibe ich über das, was ich tue.


Hier ist mein aktuellster Beitrag:

Layouts ohne Kopfschmerzen – box-sizing: border-box

Ich weiß nicht genau woran es lag, dass ich die CSS3-Eigenschaft box-sizing so lange ignoriert hatte. Vermutlich daran, dass sie der Internet Explorer 7 nicht unterstützt und keine akzeptablen Polyfills existieren.
Wie dem auch sei, der IE7 ist nun endlich Geschichte — höchste Zeit, sich diese CSS-Eigenschaft etwas näher anzuschauen.

Kurz gesagt:
Mit box-sizing: border-box ist endlich ein leicht verständliches CSS-Box-Model verfügbar, bei dem nicht permanent auf unsemantische Hilfscontainer zurückgegriffen werden muss.

Klassisches Beispiel:
Ein Layout mit einem Hauptbereich und einer Seitenleiste. Man benutzt zwei Divs – das eine bekommt eine Breite von 75%, das andere 25%.

Soweit so gut.

Nun klebt aber der Inhalt direkt am Rand der beiden Bereiche. Also fügt man jeweils einen Innenabstand hinzu – sagen wir padding: 1em. Und da sich im klassischen CSS-Box-Model die Breite eines Elements errechnet aus

Breite des Inhalts + Innen- und Außenabstand + Rand

zerfällt das eigentlich klar definierte Layout in seine Einzelteile.

Beispiel ohne box-sizing

See the Pen Box-sizing demo (without box-sizing) by Mario Fink (@mariofink) on CodePen.

Um dieses Problem im klassischen Box-Model zu beheben, muss der Inhalt jedes Bereiches in einen Hilfscontainer gepackt werden (auch als Gutter bekannt). Wer sein HTML gerne halbwegs semantisch liebt, wird hier die Nase rümpfen.

box-sizing: border-box zur Hilfe!

Um das eigentlich erwartete Ergebnis zu erlangen, genügt es im obigen Beispiel für die beiden Inhaltscontainer box-sizing auf border-box zu setzen. Nun beziehen sich sowohl Breiten- als auch Höhenangaben auf das komplette Element – nicht nur auf den Inhaltsbereich.

Gerade bei komplexeren Layouts erspart das den ein oder anderen Knoten im Gehirn.

Beispiel mit box-sizing: border-box

See the Pen Box-sizing demo (border-box) by Mario Fink (@mariofink) on CodePen.

border-box all the things!

Für zukünftige Projekt sollte man sich an die Empfehlung von Paul Irish halten und sämtlichen HTML Elementen border-box verpassen:

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Hilft besser als jede Kopfschmerztablette – versprochen!

Links

* { Box-sizing: Border-box } FTW von Paul Irish
Can I use: CSS3 box-sizing Kompatibilitätstabelle