Como arreglar el modelo de cajas (o IE6 hacía algunas cosas bien)

Los navegadores interpretan el código HTML y acomodan el contenido usando un “modelo de cajas”, es decir, van dibujando cajas de diversos tamaños donde acomodan el contenido, le ponen el fondo que indiquemos, los bordes, etc.

Para determinar el ancho y alto se basan en lo que les pasemos con width y height en el CSS. Pero no nada más eso, sino que también toman en cuenta el relleno (padding) y los bordes. Sumando todo eso el navegador determina el ancho de la caja. Por ejemplo si tenemos el siguiente CSS:

width: 300px;
padding: 20px;
border: 2px;

El ancho de nuestra caja no será 300 pixeles, ése será el ancho dedicado al contenido, sino que será de 344 pixeles (300 + 20*2 + 2*2). Esto no estaría del todo mal si no fuera porque nos complica los cálculos a la hora de tratar de acomodar cajas en nuestra página, tenemos que tomar en cuenta que los cambios en padding cambiarán el ancho y eso nos puede alterar la distribución de nuestra página.

IE6 usaba un sistema mejor. Así es, aunque no seguía el estándar IE6 tenía un mejor sistema para determinar el ancho de una caja. Del ejemplo anterior, nuestra caja tendría un ancho de 300 pixeles, incluyendo bordes y relleno. El ancho para el contenido se reduciría a 256 pixeles, pero al momento de calcular la distribución y tamaños de las cajas las cosas serían mucho más sencillas. Después de todo, cuando tienes una caja de verdad y le añades relleno la caja no se hace más grande, sino que se reduce el espacio para meter cosas.

Supongamos que queremos acomodar dos cajas lado a lado en un espacio de 960 pixeles con 20 pixeles entre cada caja. Con el modelo estándar tendríamos que calcular márgenes o rellenos para determinar el ancho, más o menos así:

#caja1 { width: 610px; padding-right: 10px; }
#caja2 { width: 330px; padding-left: 10px; }

Este ejemplo es sencillo, pero cuando empezamos a añadir cajas y distribuciones más complejas puede complicarse bastante rápido. Si queremos cambiar el espacio entre las cajas, deberemos cambiar tanto width como padding. Con el sistema de cajas de IE6, sin embargo, todo resulta mucho más sencillo:

#caja1 { width: 620px; padding-right: 10px; }
#caja2 { width: 340px; padding-left: 10px; }

Si queremos cambiar el espacio entre cajas simplemente cambiamos padding. Si queremos añadir más cajas hacemos una suma simple de width sin tener que preocuparnos por los rellenos y bordes (y recordar que tenemos que sumar cada lado).

¿Hay una manera de regresar a es modelo de cajas más sencillo? ¡Sí la hay! A partir de CSS3 podemos usar la declaración box-sizing para decirle al navegador que modelo de cajas utilizar:

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 

Con esto podemos usar la manera más racional de darle ancho a nuestras cajas. Aunque usamos los prefijos -moz y -webkit es bastante seguro usar esta propiedad desde ya.

Si quieres leer más sobre el tema, en inglés, Paul Irish escribió un excelente artículo sobre box-sizing y su fiabilidad. También Chris Coyier tiene un muy buen artículo de box sizing donde además habla un poco más de los problemas del modelo de cajas actual.

Internet Explorer detiene su caída

Después de varios meses de perder participación en el mercado de los navegadores Internet Explorer recuperó medio punto durante el mes de junio. No necesariamente es una tendencia porque pasa de vez en vez. Microsoft cree que este crecimiento se debe a la campaña publicitaria que empezó hace algunas semanas y enfatiza las características nuevas de IE8, sobre todo las de seguridad y velocidad.

IE6 en su funeral

¿Los funerales para IE6 habrán sido anticipados? Foto de CarlosWes vía Flickr.

Esto estaría muy bien porque, dentro de lo que cabe, IE8 es buen navegador. Es mucho menos inseguro que versiones anteriores y se compara muy bien con Firefox y Chrome en este sentido. También sigue CSS 2 muy conforme al estándar, lo cual es bastante bueno para quienes desarrollamos sitios.

Las malas noticias son que Internet Explorer 6 también ha detenido su caída e incluso ganó 0.01%. Aunque esto puede ser un error de medición de todos modos no augura nada bueno. Su participación es algo así del 17%, lo cual sigue siendo significativo y quiere decir que debemos seguir tomándolo en cuenta, junto con sus idiosincracias para mostrar páginas.

Lo malo es que parece que todos los que iban a abandonar IE6 ya lo abandonaron, los que quedan van a seguir con esa versión para largo. Son gente que trabaja en oficinas de gobierno o corporativos que necesitan mantener compatibilidad con sistemas propietarios, organizaciones o personas que no tienen dinero para actualizar sus equipos, o gente que tiene una versión pirateada de Windows XP y no piensa cambiarla o actualizarse por mucho tiempo a pesar de que la instalación de IE8 no requiere certificación de autenticidad y el muy sonado caso de Google y la brecha de seguridad en IE6. Pero, bueno, hay gente que nunca se va a enterar.

Más que nunca es necesario mantener una filosofía de mejoramiento progresivo cuando desarrolles un sitio. De este modo puedes tener una certeza razonable que el sitio se verá bien en navegadores viejos y mucho mejor en los nuevos y así no perder ningún visitante.

En lo que se muere: Guía para diseño web en IE6

In this comprehensive article, you’ll learn some of the best methods for supporting IE6, including proper targeting, specific hacks, image support, box models, floats, and everything in between.Definitive Guide to Taming the IE6 Beast

Pues a pesar de los muchos esfuerzos y campañas para matar a IE6 de manera humana en vez de tener que verlo arrastrar sus miserias tratando de interpretar correctamente los estándares de desarrollo web y fallando de manera patética, todavía queda muchísima gente que por una razón u otra, ya sea por su propia voluntad o por imposición, siguen usando Internet Explorer 6. Tal vez estén expiando alguna horrible acción de una vida pasada.

Bueno, en lo que esa gente se avispa y actualiza su navegador es posible que tengamos que crear páginas que se vean bien en IE6 (en este caso es el diseñador expiando los horribles pecados de vidas pasadas). Afortunadamente después de tantos años de estar batallando, la mayoría de las deficiencias de IE6 son conocidas y hay todo un arsenal de técnicas para arreglarlos y conseguir que funcione de manera más o menos decente y que seguro todos hemos usado una, dos o tres de estas en algún momento.

Vía Leeanne Lowe me entero que Jeff Starr ha recopilado estas técnicas y armó una Guía Definitiva para IE6. Es un maravilloso documento de referencia y soporte que creo se va a convertir en esencial para todo desarrollador y diseñador, por lo menos hasta que IE6 deje de patalear.

MaestrosdelWeb en contra de la accesibilidad

Realmente no creo que Maestros del Web esté en contra de la accesibilidad, aunque sus acciones atentan contra esta estoy seguro que es porque no se han puesto a considerar. En Maestros del Web se enteraron de una iniciativa en Noruega para impulsar a la gente a dejar de usar IE6 y lo han tomado como novedad para implementarla ellos mismos y sugerir a otros desarrolladores a hacer lo mismo.

Bueno, la iniciativa me parece mala. Para empezar, cosas así llevan años ¿no se han fijado en como se ve el sitio de Stuff and Nonsense en IE6? Lleva así como dos años. ¿Tampoco se acuerdan de cuando 37Signals anunció que dejarían de desarrollar para IE6?

Puse un comentario en la nota de ellos, pero en lo que se acomiden a aprobarlo lo repito aquí:

Pues estoy totalmente en desacuerdo. Bueno, estoy de acuerdo en que IE6 ya ha cumplido y es un navegador anticuado que no puede mantener el paso de la tecnología actual; pero estoy en desacuerdo en que poner trabas a los usuarios de tal navegador sea buena práctica, ni de creación de sitios, ni de accesibilidad ni nada.

Tengamos en cuenta que el principio de la accesibilidad es crear sitios que puedan ser utilizados por cualquier navegador, incluyendo IE6. También tengamos en cuenta que para alcanzar los objetivos de un sitio no es necesario que este se vea exactamente igual en todos los navegadores. Tanto crear una versión “compatible con IE6″ como construir estos artilugio para decirle al usuario que actualice son una pérdida de tiempo y falta de respeto al usuario (¿cómo sabes qué el usuario está en posibilidades de actualizar?)

Un desarrollador inteligente construirá un sitio que se adapte gradualmente a las capacidades del navegador y no presupondrá la capacidad del usuario. El navegador puede estar en un celular, ser de sólo texto, ser antiguo, etc. El desarrollador no puede suponer que todos usan lo más moderno o el mismo dispositivo para consultar el sitio.

En esencia lo que Maestros del Web propone es detectar el navegador del usuario y mostrarle un mensaje molesto para que se actualice. En esencia parece algo inofensivo y hasta benéfico, pero en realidad va en contra de todas las disposiciones de accesiblidad y buen diseño de un sitio. Peor aún, esto le puede dar excusa a los desarrolladores para no implementar técnicas de mejoramiento progresivo, dejando de lado no sólo a IE6, sino a otros navegadores y dispositivos que no pueden interpretar CSS3 o la más reciente implementación de Javascript. ¿No nos quejábamos cuándo veíamos “Este sitio se ve mejor en IE6”?

“Pero, Roberto,” preguntarán, “¿pero no acabas de señalar ejemplos de eso viniendo de Andy Clarke y 37Signals? Ellos son grandes desarrolladores, seguramente lo harán por algo.” Y tienen razón, lo hacen por algo. Por ejemplo, 37signals no puede implementar nueva funcionalidad en sus aplicaciones en IE6, todo lo nuevo necesita IE7 para funcionar; pero eso no quiere decir que IE6 no pueda usar la funcionalidad anterior. Y Andy Clarke mismo deja clara su posición en otro sitio:

When I talk about designs not looking exactly the same in all browsers I am not talking about making bad designs for people using older or abandoned software. I would never accept that. Andy Clarke, Five CSS design browser differences I can live with

Por cierto, chequen el sitio de la liga de la cita anterior. Es buenísimo.

Hay muchas razones y circunstancias por las cuales es posible que un usuario no quiera o no pueda actualizar su navegador, y no es nuestro papel decirle “tienes que usar tal o cual”, sino proveer la mejor experiencia posible dependiendo de la capacidad de cada navegador; es decir, construir una estructura que permita mejorar gradualmente el sitio de acuerdo a lo que el navegador puede hacer.

Para un ejemplo concreto vean la entrada en Boagworld sobre como implementar mejoramiento progresivo. El tema también se ha tratado en A List Apart y varios otros lugares.

Por supuesto que es más difícil planear e implementar una estrategia de mejoramiento progresivo, al igual que es más difícil la planeación de un sitio hecho con capas y no tablas. Pero al igual que las capas, una vez que se entiende y domina el mejoramiento progresivo las ventajas son bastante evidentes.

Compañeros diseñadores y desarrolladores, gente de Maestros del Web, entiendo que el odio hacia IE6 es comprensible y merecido, y la ira contra él justa, sus ofensas múltiples; pero en nuestro afán por deshacernos de él no debemos afectar al usuario ni pasar a afectar a otros usuarios de otros navegadores. Pensemos mejor en mejorar nuestro dominio de las artes webólicas y procurar la mejor experiencia posible para todo usuario. Además, si creen que actualizar navegadores arregla algo, es que no han visto la sorpresa que trae IE8 o no se han puesto bien a verificar las diferencias entre Safari, Opera y Firefox.