-
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
Emmanuel Herrera
IT professional with several years of experience in management and systems development with different goals within public and private sectors.
Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.
Some certifications include: PSM, PSPO, SSM.
No Comment
Desde la implementación de hojas de estilo nivel 3 (CSS3) el uso de selectors en páginas web se convirtió en algo muy común, no solo por la versatilidad que ofrecen en cuanto al diseño estético de aplicaciones o páginas, si no por la enorme ventaja que implican desde el punto de vista de codificación, ya que no solo se pueden usar dentro del código CSS, si no también con los métodos de JavaScript querySelector() y querySelectorAll() que permiten un manejo mucho más dinámico de los objetos DOM de una página. Estos métodos se suman a los métodos de selección por id, clase o descendencia, implicando con esto un considerable ahorro de código.
Cualquier entusiasta de las hojas de estilo o de HTML5 me puede reclamar la existencia de más de 10 CSS3 selectors, lo cual es totalmente cierto, pero hoy no seré tan exigente y sólo le propondré que aprenda 10 CSS selectors de uso común, que creo que todos los desarrolladores deberiamos de tener presentes, aunque claro, si desea aprenderlos todos ¿qué mejor? (puede consultar la lista completa de selectors en la especificación oficial aquí). Utilizaré la letra E para señalar a cualquier elemento DOM.
1. Selector E
Permite seleccionar cualquier elemento del tipo E. Este selector no es nuevo pero si es básico e importante.
2. Selector E[atr1]
Selecciona el elemento E que tenga un atributo llamado atr1
3. Selector E[atr1=”dum”]
Selecciona el elemento E que tenga un atributo llamado atr1 cuyo valor sea exactamente dum.
4. Selector E[atr1^=”dum”]
Selecciona el elemento E que tenga un atributo llamado atr1 cuyo valor sea termine con la cadena de caracteres dum.
5. Selector E[atr1$=”dum”]
Selecciona el elemento E que tenga un atributo llamado atr1 cuyo valor sea comience con la cadena de caracteres dum.
6. Selector E[atr1*=”dum”]
Selecciona el elemento E que tenga un atributo llamado atr1 cuyo valor contenga la cadena de caracteres dum.
7. Selector E#elid
Selecciona el elemento E que tenga como valor del atributo id la cadena elid.
8. Selector E:first-child
Selecciona el primer elemento descendiente del padre del elemento E (el primer hijo).
9. Selector E:last-child
Selecciona el último elemento descendiente del padre del elemento E (el último hijo).
10. Selector E:nth-child(n)
Selecciona un elemento descendiente del padre del elemento E que se encuentre en la posición de n.
Si alguien considera que es importante colocar otro selector en la lista y ejemplificarlo…en el pedir está el dar 🙂 . Para ver el pequeño ejemplo que utiliza todos los selectors expuestos haga click aquí.
Enlaces de interés:
Transiciones y Transformaciones en Botones (CSS y HTML5)
Emmanuel Herrera
IT professional with several years of experience in management and systems development with different goals within public and private sectors.
Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.
Some certifications include: PSM, PSPO, SSM.
