Uno de los aspectos que menos me gusta sobre el diseño con CSS es la relación entre el ancho y el relleno (padding). Estás ocupado definiendo anchos para que coincidan con tu rejilla o proporciones generales de columnas, y luego, al agregar texto, necesitas definir relleno para esas cajas. Y de repente, estás restando píxeles de tu ancho original para que la caja no se expanda.
¡Uf! Si digo que el ancho es de 200px, maldición, va a ser una caja de 200px de ancho, incluso si tengo 20px de relleno. Como sabes, esto NO es cómo ha funcionado el modelo de caja en los últimos diez años. Wikipedia tiene un gran historial de este modelo de caja. Jeff Kaufman también profundizó en la historia.
De todos modos, tengo una recomendación para tu CSS en adelante:
/* Aplica un modelo de caja natural a todos los elementos, pero permite cambios en los componentes */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Esto te brinda el modelo de caja que deseas. Se aplica a todos los elementos. Resulta que muchos navegadores ya utilizan border-box para muchos elementos de formulario (por eso los inputs y textareas se ven diferentes con width: 100%). Pero aplicar esto a todos los elementos es seguro y sensato.
Soporte del Navegador
Debido al soporte del navegador, esta recomendación es solo para proyectos que admitan IE8 en adelante. Firefox <= 28 todavía necesita el prefijo -moz-, y <= iOS4, Android <= 2.3 necesitan el prefijo -webkit-, pero todos los demás usan el sin prefijo. Puedes encontrar más información sobre un polyfill para box-sizing en IE6 y 7 en html5please.com/#box-sizing (que fue desarrollado con * { box-sizing: border-box!).
Ajustes para Contenido de Terceros
Cualquier widget de terceros que agregue contenido directamente a la página puede necesitar atención adicional. Cualquier widget dentro de un iframe (como el nuevo tema de Disqus) está naturalmente aislado de los estilos de diseño de la página principal. Si necesitas hacer ajustes al contenido de terceros, puedes aplicar box-sizing: content-box;
al widget y sus descendientes. Esto puede no ser trivial, ya que los controles de formulario en particular son border-box de forma predeterminada, así que también tendrás que tener eso en cuenta.
Top comments (1)
Hola!
Un saludo :)... muchas gracias por compartir conocimiento por estos rumbos. Te invito a dejar un tag a #spanish para que la comunidad hispanoparlante pueda encontrar tu contenido (sí, es contradictorio que sea spanish y no español, pero bueh...).
El límite de tags es 4.
Por último, creo que IE y versiones viejas de Firefox ya están bien enterradas como para dar los mensajes de "polyfill" =)
Saludos!