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.

Usando CSS para poner guiones automáticamente

En la escuela nos enseñaron que para usar toda la hoja al escribir deberíamos separar las palabras que no quepan al final del renglón con un guión al final de una sílaba. De esa manera podríamos usar mejor el papel. Esa solución se ha utilizado en la tipografía desde las primeras imprentas.

En la web no tenemos el problema del uso de papel, pero tenemos otro problema. Por lo general no usamos texto justificado para que no se creen ríos de espacio blanco que dificulta el salto del ojo de renglón en renglón. El problema es que como las palabras son de una longitud muy variable muchas veces el navegador tendrá que pasar una palabra larga completa al renglón siguiente, dejando renglones de longitud muy variable.

Para el CSS3 se creó una propiedad llamada hyphens que le indica al navegador que puede separar las palabras con guiones. Si el idioma de la página tiene un diccionario apropiado, el navegador insertará los guiones y hará que la longitud de los renglones sea más uniforme. Estas son muy buenas noticias desde el punto de vista de la tipografía.

Desafortunadamente todavía no está completamente implementado. Solo funciona si le pones el prefijo del fabricante. En Safari funciona, pero Firefox solo lo ha implementado para el inglés y en Chrome tampoco funciona en español. Aunque a la velocidad con la que se implementan mejoras estos días debe ser cuestión de poco tiempo.

No te recomiendo que digas que tu página está en inglés porque las reglas para poner el guión en ese idioma son diferentes, así que te encontrarás con sílabas partidas a la mitad. Si es que funciona porque los diccionarios se supone que serán distintos.

El código que necesitas incluir en tu css es:

-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

Puedes ver un ejemplo de su uso. Solo funciona en Safari, como dije, pero iremos probando de nuevo conforme se vayan actualizando los navegadores.

Degradados fáciles con CSS

Gracias a el Padrino del Web y sus constantes tweets de la conferencia An Event Apart que se está llevando a cabo en Boston, me entero de esta genial y utilísima herramienta para crear degradados usando CSS 3.

Todavía mejor es la que creó John Allsopp con el mismo fin.

Una de las promesas cumplidas por CSS 3 es el poder especificar degradados sin usar imágenes. Esto ayuda a tener un sitio mucho más fácil de mantener y más rápido de descargar. Lo malo es que calcular todos los valores para introducir en el código es una lata.

Gracias a estas herramientas puedes hacerlo fácilmente de forma visual, sin tener que hacer cálculos a ojo de buen cubero para después probar y ajusta unas cuarenta y cinco veces hasta que quede como quieres.

Nada más falta que la especificación quede fijada y los navegadores la soporten. Mientras, a usar -webkit y -moz.

La caja flexible y el futuro del CSS

Pues sucede que dentro de las muchas cosas que se incluyen dentro del CSS3 está la habilidad de definir una caja flexible dentro de la cual se pueden crear columnas automáticamente, sin necesidad de usar floats y esas cosas.

The Flexible Box Model is part of the CSS3 Specification that doesn’t really get a lot of attention. While everyone’s off checking out how to use selectors, the flexible box model is crying in the corner asking why no one pays him any attention, and rightfully so! The flexible box model has the potential to change the way we design our websites.Future of CSS: The Flexible Box Model

Es un cambio muy importante que puede hacer el desarrollo de un sitio mucho más simple y rápido. Desafortunadamente sólo lo soportan Firefox y Webkit (Chrome y Safari) por el momento y de maneras muy diferentes, pero vale la pena echarle un ojo y juguetear un poco.

Los fondos y gradientes de CSS3 en múltiples navegadores

CSS3 features are making their way into the various browsers and while many are holding off on implementing them, there are those who are venturing ahead and likely running into a world of interesting quirks across the various platforms.Multiple Backgrounds and CSS Gradients – Snook.ca

Jonatan Snook comparte sus hallazgos sobre como hacer funcionar los fondos múltiples y gradientes de CSS3 en múltiples navegadores. Si quieres empezar a experimentar este post es fundamental.

La iPad y el diseño web

Steve Jobs llamó a la nueva iPad “el aparato definitivo para navegar en la web”, algo así. Claro, está por verse que pasará pero lo más seguro es que la iPad se venda muy bien sobre todo en un segmento del mercado más o menos afluente y que de pronto se encontrará con que tiene en sus manos una nueva manera de acceder a la información de la red: desde cursos y videos de gatitos en Youtube, blogs, foros y aplicaciones en línea.

Todo esto tendrá un impacto en los diseñadores y desarrolladores de sitios. Aunque el iPad es un aparato muy flexible con una resolución generosa para un dispositivo portátil, no deja de ser más pequeña que un monitor normal en estos días. Además que se puede voltear para cambiar la orientación.

Por lo que hemos visto en el iPhone esto no será gran limitante pero de todos modos querrás hacer tu sitio adaptable a las diferentes resoluciones del iPad. Por ejemplo, aunque es posible que el iPad haga un zoom automático para meter la página en su pantalla conservando todas las proporciones, tal vez no quieras conservar las proporciones y sea más importante mantener un área con cierto ancho.

O tal vez quieras hacer ciertos elementos y contenido más prominentes en la pantalla del iPad de lo que son en una pantalla de escritorio. Esto implica diseños líquidos y flexibles, el diseñador tendrá que pensar en términos de distintas resoluciones y orientaciones. Es algo que algunos hacían hace un par de años pero con las nuevas funcionalidades de zoom se dejó de hacer. Ahora va a rescatarse.

Afortunadamente el iPad incluye un gran navegador con soporte para HTML5, CSS3 y JavaScript por lo que hacer estas cosas no representará gran dificultad técnica. De hecho, si eres de los que sigue las mejores prácticas de desarrollo web probablemente no tengas que hacer absolutamente nada.

Lo más complicado será cambiar la mentalidad del diseñador, sobre todo aquellos que no entienden bien el medio en que se están desenvolviendo. En más apuros estarán los diseñadores que no saben hacer sitios flexibles o que no se molestan en aprender html (esa cosa que sale cuando le aprietas en vista de código en el Dreamweaver). Si sus clientes se comienzan a dar cuenta que su sitio no se ve bien en el iPad (a ver si friegan igual que como cuando no se ve en IE6) muchos van a tener que ponerse al día de manera acelerada.

Más color de hormiga la tendrán los flasheros. Por flashero no me refiero a todos los desarrolladores de flash, sino nada más a los que todo lo hacen con flash sin consideración por la accesibilidad y usabilidad del sitio.

El iPad, hasta donde sabemos ahora, no soportará Flash. Así que si has hecho un sitio que sea puro Flash o que tenga elementos importantes, como la navegación, hecha en Flash, no se verá nada o será inutilizable para quienes tengan un iPad.

A lo mejor no te importa mucho, pero tus clientes van a estar perdiendo clientes y visitantes, así que no les va a agradar (ok, a los que se den cuenta), y finalmente te va a repercutir.

En las filas de Adobe no están nada contentos y culpan a Apple de la falta de soporte para Flash. No dudo que tengan parte de razón, sobre todo cuando señalan que el iPad no puede ser el dispositivo definitivo para navegar por la red si no soporta Flash.

Para bien o para mal Flash es parte importante de la red y pasará mucho tiempo antes que HTML5 alcance una presencia suficiente para desbancarlo (y que se desarrolle un IDE con el que los diseñadores puedan trabajar de un modo parecido a que lo hacen en Flash).

Adobe dice que no hay por que temer, la versión CS5 te permitirá crear una aplicación lista para iPhone simplemente haciendo click en “Save As…”, pero una aplicación no es un sitio web y habría que ver que tan bien se implementa esta característica.

Por lo pronto los fans de Flash están haciendo trinchera, pero si el iPad es tan exitoso como el iPod a mí me parece que no les quedará otra que admitir derrota y aprender estándares si no quieren ser arrollados por la Appleanadora.

El diseñador británico Andy Clarke está de acuerdo conmigo, por lo menos en la parte sobre el diseño líquido.

5 propiedades de CSS3 para usar ya

Let’s take a look at 5 different CSS3 properties that you can start playing with right now, provided that you always keep in mind that they should only be used to enhance your design, and not be relied upon for site usability.5 CSS3 Design Enhancements That You Can Use Today | Webdesigner Depot

Muy buenas propiedades que varios de los más modernos navegadores soportan ya. Y muy bueno también el consejo de WebDesigner Depot sobre sólo usarlos para mejorar el diseño pero teniendo en cuenta la usabilidad. Eso es algo que debería ir para todo. El diseño no es nada más el aspecto visual, sino la experiencia de usar el sitio para todos los visitantes. Sin importar el navegador que tengan.

Por eso es también interesante notar en los comentarios como la gente sigue quejándose que Internet Explorer no puede interprestar ninguno de estas propiedades, a pesar de que en el artículo mismo se dan consejos para evitar que estas propiedades interfieran con la usabilidad en navegadores que no los pueden interpretar, no sólo IE, sino también Opera y Firefox (cuyas versiones anteriores a 3.5 no interpretan muchas de estas propiedades).

En fin. Hay mucha gente que se dice “diseñador web” pero la manera de reaccionar ante IE es lo que distingue a los verdaderos de los falsos.

Usando listas de definiciones y CSS 3

Definition lists are an often forgotten HTML element, but they can be used in a wide variety of ways, and are actually the most semantically accurate element in many cases.Web Designer Notebook » Belgian Beer Types, or How to Style a Definition List the CSS3 Way

Este es un muy buen ejemplo de como usar CSS3 y las listas de definiciones para crear un efecto muy atractivo y mantener compatibilidad con navegadores que no soportan CSS3.

Como hacer botones atractivos con CSS3

We love CSS at ZURB. We love it so much that we’re using the new, yet-to-be released version (CSS3) in some of our projects. In the works for nearly 10 years now, CSS3 is finally starting to see the light at the end of the tunnel as new browsers like Firefox and Safari continue to push its implementation.ZURB – Super Awesome Buttons with CSS3 and RGBA”>

En Zurb enseñan como usar CSS3 para la creación de botones atractivos que sean tambián accesibles, semántivos y utilizables. Recomiendo aprender la técnica básica y no olvidarse que algunos navegadores requerirán un poco de ayuda para que no se pierda la utilidad de los botones.