Etiqueta: box model

  • CSS
    CSS3 / HTML5 / Ideas / Programación / Programming

    ¡Use el modelo de caja correcto! (Flexible Box Layout)
    flashw

    Versiones Flexible Box Layout

    Muchas veces buscamos información, manuales, tutoriales y libros que explican el modelo de caja desde que se incluyó como draft en las especificaciones CSS3 por parte del W3C, mejor conocido como Flexible Box Model o simplemente como Flexbox,. Muchos documentos hacen referencia a las especificaciones anteriores desde su creación en el 2009, por lo tanto y desafortunadamente muy buenos documentos al respecto han quedado sin actualizar con información obsoleta. Es por ello que me parece oportuno prevenir a todos los que están interesados en HTML5 y concretamente en CSS pero no están muy al tanto de estos cambios, para así crear conciencia y no perder tiempo aprendiendo sintáxis y detalles que ya no funcionan o bien pronto quedarán obsoletos.

    ¿Por qué sucede esto?

    Siempre que hablo de HTML5 y CSS en general, trato de ser muy enfático en que los desarrolladores deben estar al pendiente de cambios y mejoras en las especificaciones, 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 todas estas tecnologías pero nunca se sabe realmente cuando sucederán estas mejoras ni cuando se adoptarán por parte de los navegadores. Sí, esto a una molestia a veces…díganmelo a mi que he tenido que retrasar y modificar publicaciones por estos cambios :/

    ¿Cómo distinguir modelos viejos?

    Como ya mencioné, si usted hace una búsqueda en la web acerca del modelo de caja de CSS, encontrará mucha información sin actualizar, pero un método para distinguir el código muy viejo 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 de 2012 a la actualiad (2018 por lo menos).

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

    ¿Cómo estar al día?

    La menera menos amable pero más precisa de estar al día es consultar directamente la especificación CSS Flexible Box Layout Module del W3C, pero tenga en cuanta que casi permanentemente este documento tiene el título de Candidate Recomendation, lo que significa, que los navegadores quizá aun no implementan lo que ahí se muestra o no en su totalidad. También debe saber que leer estos documentos no siempre es la manera más amable y fácil.

    Otras consideraciones…

    Hay que poner atención en que la última especificación puede publicarse sin aviso y en cualquier fecha, pero como ya mencione la adopción por parte de los navegadores no es rápida ni sumultanea. El navegador que ha estado soportando más rápido los cambios que se hacen en las especificación HTML5 y CSS es sin duda Chrome,  al momento seguido por Firefox y posiblemente por Maxthon, pero como ya dije, hay que estar atentos.

    En caso de que no lo sepa, también es bueno tener en cuanta que tenemos un nuevo niño en el barrio en cuanto a la distribución de elementos llamado CSS Grid que tiene muchas ventajas. Por ahora este no sustituye a Flexbox, este sigue teniendo un lugar sólido en varios casos e incluso, ambos modelos se pueden complementar uno al otro.

    Por lo anterior, muchos especulamos que eventualmente CSS Grid y Flexbox se funcionaran en el futuro de algún modo en una sola especificación, pero ya veremos. Por ahora y desde el 2012 la especificación CSS Grid está separada.  Si está interesado en que escriba más sobre CSS Grid, déjenmelo saber en los comentarios de esta entrada o en Twitter @ManuGekko 🙂

    Otros enlaces de interés:

    Transiciones y Transformaciones en Botones (CSS y HTML5)

    10 CSS Selectors Que Hay Que Tener En Mente

    Crear Una Barra Emergente Con HTML5, CSS3 y JQuery

    No Comment