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.

Video con HTML5

De hace mucho tiempo una de las cosas más latosas de hacer en la web ha sido la inclusión de video en una página. HTML 4 tiene una etiqueta para incluir elementos de multimedios: <object> que gracias a la estúpida implementación de Internet Explorer casi siempre tenemos que usarla junto con el obsoleto <embed> para que funcione bien.

Hasta ahora la reproducción de video ha dependido de que el usuario tenga un aditamento (plug-in) instalado en su navegador con la consecuente pérdida de desempeño y riesgos de seguridad. Además de tener que ir a otro sitio a instalarlo antes de poder ver el video.

El reproductor más utilizado es Flash, propiedad de Adobe que se puede decir que son los dueños del pandero cuando se trata de producir video en internet.

HTML5 introduce una nueva etiqueta para video que se llama ¡<video>! y que no depende de un plug-in. Peero sí depende de un decodificadorr.

La pelea grande está entre el decodificador patentado y propiedad de Apple llamado H.264 y el libre y exótico (por poco común) Ogg Theora. El primero es apoyado por Safari y Chrome (Google le pasa una lana a Apple para poder usarlo). Los otros navegadores grandes, Firefox y Opera, apuestan por el Ogg Theora porque no tienen que pagar nada para usarlo y tampoco los creadores de contenido tendrán que pagar nada.

No me acuerdo cual es el que apoya Internet Explorer pero como seguramente no van a introducir la etiqueta sino hasta el 2020 pues no importa. Y cuando lo hagan seguro la van a romper. Espero equivocarme, pero no me extrañaría mucho.

El caso es que hace unos días Youtube anunció que servirá páginas HTML5 con la etiqueta de video pero el formato H.264, seguido al poco tiempo por Vimeo y otros servicios. Esto deja fuera de la jugada a Firefox y Opera que tendrán que pagar el precio de entrada a Apple, formar alianzas con otros servicios, o arriesgarse a quedarse atrás en la competencia.

Aunque H.264 es un formato más avanzado, compacto y rápido que Ogg Theora, creo que no hay que perder de vista lo que esto puede significar para el futuro de los navegadores. De acuerdo, hasta ahora hemos dependido de otro formato propietario, el de Adobe, pero todos los navegadores dependían del mismo y necesitaban el plugin. Ahora, hay unos que tienen ventaja sobre los demás.

¿Contraatacarán Firefox y Opera o se rendirán? ¿Liberará Apple su formato? ¿Dirá algo el WHATWG? ¿Soportará Youtube Ogg Theora? No se pierda el próximo emocionante capítulo cuando salga.

En Bitelia también están tratando el tema: ¿Por qué la versión en HTML5 de Youtube no funciona en Firefox?

¿Qué harías si no tuvieras que soportar a Internet Explorer?

Esta pregunta se la hizo un desarrollador hace poco en Twitter, obviamente mi respuesta es “lo mismo, para eso está el mejoramiento progresivo”.

Parece que a mucha gente no le queda muy claro lo que se ha explicado antes en este augusto órgano blogueril: no es necesario olvidarse o apartarse de navegadores viejos o limitados cuando desarrollas un sitio.

A pesar de que algunos desarrolladores conocen el término “mejoramiento progresvio” no les queda muy clara la idea. Mejoramiento progresivo no es desarrollar para el mejor navegador, no es un ideal, una aspiración o una filosofía.

Mejoramiento progresivo es una técnica, una mejor práctica, para darle a cada usuario de un sitio la mejor experiencia posible de acuerdo a las capacidades de su navegador.

Lo voy a repetir en negritas: mejoramiento progresivo es una técnica para darle a cada usuario de un sitio la mejor experiencia posible de acuerdo a las capacidades de su navegador. Y debería añadir que de su dispositivo de navegación también.

¿Quedó claro? ¿No? Bueno, aquí les va: Cada navegador tiene sus habilidades y carencias. Aunque se supone que deberían seguir los lineamientos de estandarización del W3C la mayoría no lo hace. Así es, la mayoría, ni IE, ni Firefox, ni Safari, siguen los lineamientos del W3C. Se acercan, a veces más a veces menos, pero por razones técnicas no es posible para todas las versiones implementar todos los lineamientos del CSS2 y menos de CSS3 que marca el W3C. Y no, no salgan con mamadas del Acid Test, esa es una prueba artificial, no porque el navegador pase el Acid Test significa necesariamente que cumple con el estándar.

Así que hay que establecer compromisos a la hora de desarrollar nuestro sitio. Estos tendrán que ver, entre otras cosas, con las limitaciones de cada navegador. Por ejemplo, Safari reconoce una buena cantidad de atributos de CSS3 que a Firefox ni le pasan por la cabeza, pero éste interpreta algunos que Opera no entiende. Pero para complicar las cosas Opera también interpreta algunas cosas mejor pero diferente a Firefox y Safari.

Lo que es más, el gran problema de Internet Explorer, que su modelo de cajas es diferente a lo que marca el W3C, tiene más sentido lógico que el del estándar. En el modelo estandarizado el ancho del margen, que va por fuera de la caja, se añade al ancho total de la caja como si estuviera en el interior. En IE, el margen se no afecta al ancho de la caja, tal como el tamaño de una caja en la vida real no cambia con lo lejos o cerca que esté de otra caja.

Sin embargo muchos desarrolladores, quienes de ahora en adelante serán designados con el mote de nenitas quejicas, siguen quejándose cual nenitas (¿ven?) de que Internet Explorer no los deja hacer lo que quieren.

¡Pamplinas! Los diseñadores y desarrolladores pueden hacer lo que quieran con un sitio siempre y cuando sepan usar las técnicas de mejoramiento progresivo. El  mayor truco consiste en crear una distribución y estilos lo más sencillos posibles para servirlos a navegadores antiguos o de texto. ¿Cómo saber si eres una nena quejica? Fácil ¿Pruebas tus sitios en Lynx? ¿No? Entonces eres una nena quejica.

Después de esto usas una hoja de estilos separados (servida mediante un hack, sí, pero es un hack bastante seguro) para navegadores modernos. Aquí le puedes meter todo lo que quieras de CSS2 y CSS3, los navegadores modernos ignorarán lo que no conozcan en vez de tratar de interpretarlo.

La otra mitad del truco está en usar javascript para cargar estilos dinámicamente, no haciendo “sniffing” sino checando cosas como el ancho de la ventana y probando las capacidades del motor de dibujo del navegador. De esta manera los dispositivos menos capaces, digamos un celular de hace cinco años, recibirán una versión sencilla del sitio, mientras que los más modernos podrán desplegar todo el sitio a lo ancho que les permita el monitor y con la vistosidad que sea capaz su motor de dibujo.

¿Qué hacer con navegadores que creen poder hacer las cosas bien pero que en realidad las hacen mal, o sea, IE6? Afortunadamente, y esto es uno de los más grandes aciertos de Microsoft, podemos usar comentarios condicionales no nada más para servir ciertas hojas de estilos a IE6, sino también para ocultárselos.

De este modo, nuestra hoja de estilos avanzada con el CSS3, png semitransparentes, elementos posicionados de manera absoluta, o flotados, IE6 no podrá ni verla, menos interpretarla. Lo va a hacer mal, así que para que le hacemos pasar vergüenzas. En vez de eso le damos otra hoja de estilos, que puede ser más sencilla o similar pero que IE6 pueda interpretar correctamente.

¿Se van a ver todos los sitios iguales? No. Pero para ahora ya sabemos que no es necesario que se vean igual. ¿Van a funcionar igual? No. En algunos el menú quedará en cierta posición, algunos tendrán más ayudas que otros. Tal vez en Firefox 3 usemos Ajax para cierta funcionalidad, pero la misma estará desactivada si accedes desde un celular con Windows Mobile 5.

¿Podrán todos los visitantes ver nuestro sitio? Sí ¿Podrán todos los visitantes navegar por nuestro sitio? Sí ¿Podrán todos los visitantes responder a nuestro llamado de acción? Sí. ¡Eso es lo que es importante! No si tal elemento tiene tal o cual color, o tal o cual tipografía. Lo siento mucho, diseñadores gráficos, pero lo importante es que los usuarios puedan acceder y usar el sitio.

La decisión es tuya: seguir siendo una nena quejica llorando porque tienes que darle soporte a IE6, o aprender a hacer sitios como se debe y darle rienda suelta a tu creatividad sin olvidar lo que verdaderamente es importante en cada sitio.