International box-sizing Awareness Day

Heute ist der 1. Februar, den ich zum Internationalen Tag des Bewusstseins für box-sizing erklärt habe. Zu Ehren, Sie ahnten es bereits, der bescheidensten und am wenigsten gefeierten, aber dennoch großartigen und nützlichen CSS-Eigenschaft: box-sizing.

Das Datum entspricht Paul Irishs Beitrag, in dem er das Konzept vorstellte, es für jedes einzelne Element auf der Seite zu verwenden. Wir haben auch hier schon ein paar Mal darüber gesprochen.

Hier ist es, in all seiner Pracht

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

Der Standardwert für box-sizing ist content-box, den wir hier überschreiben. Es gibt auch einen padding-box-Wert, der aber... ziemlich nutzlos ist, wenn Sie mich fragen. Wir werden gleich darauf eingehen, was das bedeutet.

Beachten Sie, dass wir den Selektor * verwenden, um alle Elemente auszuwählen, und auch Pseudo-Elemente dasselbe Modell verwenden lassen, die sonst nicht allein vom *-Selektor ausgewählt würden.

Hier ist die Situation der Browserunterstützung. „-“ = „diese Version und älter“. „+“ = „diese Version und neuer“.

*, *:before, *:after {
  /* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
  -webkit-box-sizing: border-box; 

  /* Firefox (desktop or Android) 28- */
  -moz-box-sizing: border-box;

  /* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
  box-sizing: border-box;
}

In nicht allzu ferner Zukunft werden wir dafür überhaupt keine Präfixe mehr benötigen, aber ich überlasse diese Art von Dingen gerne Autoprefixer.

Warum die ganze Aufregung?!

Es macht die Arbeit mit Boxen so viel angenehmer.

Wenn Sie die Breite eines Elements festlegen, dann ist das die Breite, die es hat. Wenn Sie die Breite auf 25 % festlegen, nimmt sie 1/4 des horizontalen Platzes ein, der in ihrem übergeordneten Element verfügbar ist. Das war's.

Das ist nicht immer der Fall. Mit der Standard-Box-Sizing ist die tatsächlich gerenderte Breite, sobald ein Element entweder Padding oder einen Rand hat, breiter als die von Ihnen festgelegte Breite.

Tatsächliche Breite = Breite + linker Rand + rechter Rand + linker Abstand + rechter Abstand

Die Mathematik ist schlimm genug, aber in Kombination mit Prozentangaben (oder eigentlich jeder gemischten Einheit) ist das Ergebnis unmöglich im Kopf zu berechnen und, was noch wichtiger ist, führt zu einer nutzlosen Zahl, mit der man nichts anfangen kann.

Man kann es sich so vorstellen: Mit box-sizing: border-box drängen sich Padding und Rand in die Box hinein, anstatt die Box zu vergrößern. Das Ergebnis ist eine Box mit genau der Breite, die Sie festgelegt haben und auf die Sie sich verlassen können.

Spalten sind ein besonders nützlicher Anwendungsfall, aber dies ist jederzeit nützlich und wird zu einer dieser Dinge, die einfach die CSS-Entwicklung verbessern.

Denken Sie daran, Paul's Originalbeitrag zu lesen, der sich mit weiteren Themen wie Leistung (machen Sie sich keine Sorgen), jQuery (machen Sie sich keine Sorgen) und Drittanbieterinhalten (leicht zu beheben) befasst.

Frohen Internationalen Tag des Bewusstseins für box-sizing! Vielleicht können wir uns nächstes Jahr organisieren und alle coole eckige Sonnenbrillen oder so tragen.