Ir al contenido

Este post hace más de dos años que no se ha revisado, es posible que la información publicada sea obsoleta o las referéncias no existan.

box-sizing-polyfill añade esta característica CSS3 a Internet Explorer 6 y 7

Desde que empecé a usar Box-sizing maquetar en web es otra historia. Es considerable el ahorro de tiempo que representa, ya no hay que hacer piruetas matemáticas para crear columnas y resulta mucho más fácil ordenar y nombrar cada columna, algo necesario a la hora de ordenar y entender tu propia CSS.

.cuatro-columnas{width:25%;}
.cuatro-columnas-2{width:50%;}
.cuatro-columnas-3{width:75%;}
.cuatro-columnas-1-3{width:33.66%;} /* 1/3 de cuatro columnas*/
.cuetro-columnas-2-3{width:66.66%;} /* 2/3 de cuatro columnas */

El gran incoveniente es su soporte en Explorer 7, casi todo el tiempo que ahorras en el montaje de la estructura lo pierdes parcheando para IE7. Hace unos días descubrí el proyecto de Christian Schaefer en Github que da soporte a Explorer 6 y 7.

Y aunque soy de los que piensa que no es aconsejable sobrecargar a los navegadores antiguos para que soporten funcionalidades de navegadores más modernos, vale la pena implementarlo para evitarse dolores de cabeza.

He añadido a mi lista de Snipets la implementación para wordpress de box-sizing-polyfill, añadís el Snipet a functions.php, modificando la ruta si es necesario, descargais el archivo de Github y listo.