Hoy es 1 de febrero, que he decidido declarar Día Internacional de la Concienciación sobre el tamaño de las cajas. En honor a, lo adivinaste, la propiedad CSS más humilde y menos conocida, pero asombrosa y útil: box-sizing.
La fecha corresponde a la publicación de Paul Irish donde introdujo el concepto de usarlo en cada elemento de la página. También hemos hablado de ello por aquí un par de veces.
Aquí está, en todo su esplendor:
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}También podría considerar tener una cascada de tamaño de caja con esta técnica. El box-sizing La propiedad normalmente no se aplica en cascada, y lo obligaría a hacerlo, pero hace que sea mucho más fácil anularla a nivel de componente.
El valor predeterminado para box-sizing es content-box, que es lo que estamos anulando aquí. También hay un valor de cuadro de relleno pero… un poco inútil si me preguntas. Llegaremos a lo que esto significa en breve.
Observe que estamos usando el * selector para seleccionar todos los elementos, así como hacer que los pseudo elementos usen el mismo modelo, que de otro modo no serían seleccionados por el * seleccionador solo.
Aquí está la situación de soporte del navegador. “-” = “esta versión y hacia abajo”. “+” = “esta versión y más”.
*, *: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;
}En un futuro bastante cercano no necesitaremos ningún prefijo, pero me gusta dejar ese tipo de cosas a Autoprefixer.
¡¿Por qué todo el HOO-RAH?!
Hace que trabajar con cajas sea mucho más agradable.
Cuando establece el ancho de un elemento, ese es el ancho que es. Si establece el ancho en 25%, ocupará 1/4 del espacio horizontal disponible en su elemento principal. Eso es.
Ese no es siempre el caso. Con el tamaño de cuadro predeterminado, tan pronto como un elemento tiene relleno o borde aplicado, el ancho renderizado real es más ancho que el ancho establecido.
Ancho real = ancho + borde izquierdo + borde derecho + relleno izquierdo + relleno derecho
Las matemáticas son bastante malas, pero cuando se combinan con porcentajes (o cualquier unidad mixta, en realidad) el resultado es imposible de hacer en tu cabeza y, lo que es más importante, termina siendo un número inútil con el que no puedes hacer nada.
Podrías pensarlo de esta manera: con box-sizing: border-box el relleno y el borde se abren camino dentro de la caja en lugar de expandir la caja. El resultado es un cuadro del ancho exacto que usted configuró y con el que puede contar.
Columns es un caso particularmente útil, pero resulta útil todo el tiempo y se convierte en una de esas cosas que simplemente mejora el desarrollo de CSS.
Recuerde leer la publicación original de Paul que cubre un poco más de rendimiento (no se preocupe por eso), jQuery (no se preocupe por eso) y contenido de terceros (fácil de arreglar).
Feliz Día Internacional de la Concienciación sobre el tamaño de las cajas! Tal vez el próximo año podamos organizarnos al respecto y todos usemos gafas de sol cuadradas geniales o algo así.