¡Cuidado, aprenda el modelo de caja correcto!..Flexible Box Layout 2012

CSS3

He encontrado al momento de escribir estas líneas, que la mayor parte de los manuales, tutoriales y libros que explican el modelo de caja de CSS3, mejor conocido como Flexible Box Model o simplemente como Flexbox, hacen referencia a las especificaciones anteriores (2009 – 2011), por lo tanto y desafortunadamente muy buenos documentos al respecto han quedado sin actualizar con información obviamente atrasada. Es por ello que me parece oportuno prevenir a todos los que están interesados en HTML5 y concretamente en CSS3 pero aun no enterados,  para así estar atentos y no perder tiempo aprendiendo sintaxis que pronto quedarán obsoletas.

¿Por qué sucede esto?

Siempre que hablo de HTML5 en general, trato de ser muy enfático en que los desarrolladores debemos estar al pendiente de cambios y mejoras en la especificación, ya que es algo que puede suceder en cualquier momento, esto pasa debido a que las organizaciones que se encargan de desarrollar las especificaciones tratan de mejorar activa y rápidamente toda esta tecnología de acuerdo a su criterio. Sí, esto a veces es una “lata”…díganmelo a mi que tuve que retrasar publicaciones por estos cambios, pero todo sea por estar al día…..

¿Cómo distinguir modelos viejos del último?

Como ya mencioné, si usted hace una búsqueda en la web acerca del modelo de caja de CSS3, encontrará mucha información sin actualizar, pero un método fácil y rápido para distinguir el código que utiliza la versión del modelo actual de las versiones anteriores es:

  • Si usted observa en el código CSS3 display: box o bien alguna propiedad box-{*} entonces lo que ve es código que utiliza el modelo viejo 2009.
  • Si usted observa en el código CSS3 display: flexbox o una función flex() entonces lo que ve es código que utiliza el modelo viejo 2011.
  • Si usted observa en el código CSS3 display: flex y propiedades flex-{*} entonces lo que ve es código que utiliza el modelo actual 2012.

Si es usted principiante tenga en cuenta que los navegadores utilizan bastante su correspondiente prefijo (-webkit-, -moz-, -ms-, -o- )

¿Cómo estar al día?

La manera más efectiva, aunque ciertamente no la más amable con los principiantes, es leer la especificación oficial http://www.w3.org/TR/css3-flexbox/ con un poco de paciencia y curiosidad se logra entender sin tanto esfuerzo.

Otras consideraciones…

Hay que poner atención en que la última especificación puede publicarse en una fecha determinada, pero no hay garantía de que los navegadores soporten los cambios de inmediato ni de que lo hagan al mismo tiempo. El navegador que ha estado soportando más rápido los cambios que se hacen en las especificación HTML5 y CSS3 es sin duda Chrome, seguido por Firefox y Maxthon, pero como ya dije, hay que estar atentos.

IT professional with several years of experience in management and systems development with different goals within public and private sectors.

Leave Comment

Your email address will not be published. Required fields are marked *

%d bloggers like this: