Los flotadores son una de las herramientas más básicas para estructurar una página web utilizando CSS. Ambos son una de las primeras cosas que aprendemos y una de las últimas cosas que realmente dominamos.
El artículo de hoy analiza algunas de las razones por las que los flotadores son bastante aburridos y analiza una serie de sistemas de diseño alternativos, algunos de los cuales aún están en desarrollo pero que algún día pueden representar el estándar para el diseño basado en CSS.
Un cuento de tablas
Una vez, los diseñadores web utilizaron tablas HTML para lograr diseños de página complejos. A pesar de que era un proceso desordenado y no semántico, trató de aprovechar lo mejor de la tecnología disponible para crear mejores diseños.
Para los novatos, cuando digo "no semántico". Quiero decir que el diseño basado en tablas es una bastardización del elemento de tabla. Está pensado para mantener tablas reales de información dentro de una página, no para servir como la estructura de la página en sí.
Flotadores: ¿Las nuevas tablas?
Hoy, nos burlamos de esta práctica. ¡Qué forma tan tonta de diseñar un sitio web! CSS vino a nuestro rescate y nos proporcionó varias herramientas para crear diseños mucho más semánticos que pueden lograr fácilmente cualquier cosa que se haya creado con una tabla.
Hoy en día, una de las formas principales en que hemos reemplazado nuestras formas dependientes de la tabla es el uso de flotadores para el diseño. Por defecto, los elementos HTML secuenciales aparecerán apilados verticalmente. Los flotadores nos sirven para alinear los elementos horizontalmente. Flota una lista de elementos de li a la izquierda y tendrás un pequeño menú de navegación horizontal.
Aunque muchos de nosotros simplemente nos hemos acostumbrado a usarlos, los flotadores están lejos de ser ideales. Son torpes, con errores y difíciles de aprender. Si recuerdas la primera vez que comenzaste el diseño basado en CSS, lo que te hizo rascarte la cabeza y solucionar problemas durante horas probablemente fue un error.
La curita de Clearfix
La pesadilla de los diseños basados en flotación (aparte de las pesadillas del margen de IE6) es, por supuesto, el hecho de que simplemente no juegan bien con sus elementos contenedores. Para que el elemento primario aparezca como si contuviera elementos flotantes, normalmente insertamos un elemento borrado en último lugar en el contenedor utilizando "borrar: ambos".
¿Es una buena práctica crear un contenedor vacío para cortar un diseño roto? Probablemente no. ¿Funciona? Usted apuesta
Un mejor Clearfix
Los pensadores avanzados han decidido que este negocio de agregar marcado HTML adicional no es bueno. La forma favorita actual de eliminar un flotador es insertar el nuevo elemento utilizando el CSS?: ¿Después? pseudo clase
Una vez más, esto es aceptable debido a lo acostumbrados que estamos a jugar con las carrozas para obligarlas a nuestra voluntad. Sin embargo, intente dar un paso atrás y mirar realmente lo que está pasando aquí. ¡Esto es un desastre! Estamos usando CSS para insertar un elemento invisible en el HTML para que nuestros problemas de diseño desaparezcan mágicamente cuando nos estremecemos ante la idea de usar diseños basados en tablas porque no son semánticos.
No estoy defendiendo el diseño basado en tablas, está muerto y necesita seguir siéndolo, pero no puedo evitar preguntarme si los futuros diseñadores web se reirán de nuestro uso de flotadores de la forma en que ahora nos reímos al pensar en una web Página construida sobre una mesa.
El futuro
Tienes que admitir que, si realmente lo piensas, los flotadores son una forma bastante complicada y complicada de manejar el diseño de la página. No veo que los flotadores se vayan completamente lejos en el futuro, probablemente seguirán siendo útiles incluso si todos aceptamos un nuevo proceso de diseño.
Sin embargo, hay varias herramientas de diseño interesantes en el horizonte que podrían reemplazar los flotadores como una forma principal de estructurar páginas web. Echemos un vistazo a algunas de estas ideas y construcciones y veamos si podemos echar un vistazo a cómo será el futuro del diseño CSS.
Inline-Block
Antes de sumergirnos en técnicas de diseño experimental futurista, vale la pena discutir bloque en linea Como una alternativa interesante a los diseños basados en flotación. Considere el siguiente fragmento de código:
En realidad, esto hará que los elementos de nuestra lista aparezcan en línea al mismo tiempo que conservan sus atributos de bloque, ¡lo que es realmente sorprendente! Conseguimos lo mejor de ambos mundos.
Desventajas de Inline-Block
Andrew Tetlaw de Sitepoint publicó recientemente un artículo fantástico que elogia mucho usando bloque en linea sobre flotadores Señala correctamente que este método funciona de manera efectiva en todos los navegadores modernos, incluidos IE8 y superiores, que es casi el mismo que se puede esperar del claro clearfix de pseudo-clase desde arriba.
Desafortunadamente, como señala Robert Nyman en un artículo similar, este método no está exento de problemas.
Además de los problemas de IE (tiene un truco inteligente para obtener soporte en IE7), Nyman muestra que usa bloque en linea hace que su diseño sea algo dependiente del espacio en blanco cuando se trata de su HTML. El ejemplo que usa es la siguiente lista desordenada:
¡Créalo o no, la línea devuelve automáticamente un ligero margen para agregarse a los elementos de la lista! La única forma de solucionarlo es colocarlos en la misma línea:
Es cierto que es una solución bastante fácil, pero si eres un fanático de los códigos perfectamente organizados, esto puede hacerte temblar. En general, en comparación con los problemas que enfrentamos con el uso de flotadores, Tetlaw tiene el argumento de que esta puede ser una mejor solución que puede usar ahora con una cantidad aceptable de soporte de navegador.
Flexbox
Una de las nuevas formas en que CSS3 está cambiando las prácticas de diseño es a través del Flexible Box Module, o Flexbox, para abreviar. Aquí hay una cita del resumen de Flexbox w3.
[Flexbox] proporciona un sistema de diseño adicional junto con los que ya están en CSS. [CSS21] En este nuevo modelo de caja, los hijos de una caja se disponen horizontal o verticalmente, y el espacio no utilizado puede asignarse a un niño en particular o distribuirse entre los niños por asignación de? Flex? A los niños que deberían expandirse. El agrupamiento de estas cajas (horizontal dentro de vertical, o vertical dentro de horizontal) se puede utilizar para construir diseños en dos dimensiones.
Flexbox representa una forma completamente nueva de diseñar sitios web. Es posible que hayas oído hablar de esto recientemente, pero la sintaxis está cambiando un poco, así que asegúrate de mantenerte al tanto de las especificaciones de trabajo para mantenerte al día (creo que la casilla cambiará a flex o flexbox en la mayoría de los casos) . La sintaxis CSS actual para aplicar flexbox es la siguiente:
Para ver cómo funciona, saltemos a la derecha en un ejemplo. Básicamente, una vez que se aplica caja de presentación Para el elemento padre, los hijos se pueden redistribuir automáticamente en función del tamaño relativo simple.
Imagina que tenemos tres etiquetas de párrafo (que servirán como columnas) dentro de un contenedor principal con caja de presentación Aplicado y queremos que la columna central tenga el doble del ancho de los otros dos. Esto es lo que hacemos:
Con ese poco de código (más un estilo visual superfluo), podemos lograr el siguiente resultado.
Tenga en cuenta que el valor predeterminado es? 0? para box-flex. ¿Cambiar la segunda casilla a? 2? activó el comando para llenar el ancho al hacer que la segunda casilla sea más ancha que las otras dos. Consideremos algunos ejemplos más para que realmente pueda tener una idea de cómo funciona.
Como puede ver, Flexbox tiene implicaciones dramáticas en la forma en que estructuramos los sitios web con CSS. Esto no solo tiene el potencial de resolver los problemas asociados con los flotadores, sino que hace que los diseños basados en cuadrículas de varias columnas sean infinitamente más fáciles.
Excavar más hondo
Este artículo está pensado simplemente como una introducción a los nuevos métodos de diseño y no es de ninguna manera exhaustivo. Apenas he arañado la superficie de lo que puede hacer Flexbox. Por ejemplo, puede lograr lo mismo que hicimos anteriormente con elementos apilados verticalmente y reorganizar completamente las cajas utilizando solo CSS.
Para más información sobre lo que se puede hacer con Flexbox, altamente te recomendamos que juegues con Flexie, The Flexbox Playground. Esto le dará una experiencia práctica con el nuevo sistema de diseño y le permitirá probar cada configuración para tener una idea del resultado.
El módulo de diseño de plantillas
Otra idea propuesta para el diseño de CSS es el Módulo de diseño de plantillas. Aquí hay una cita de la especificación oficial.
? Las propiedades en esta especificación funcionan al asociar una política de diseño con un elemento. En lugar de dejar que un elemento extienda a sus descendientes en su orden normal como texto en línea o como bloques de texto (las políticas disponibles en el nivel 1 de CSS), la política definida en este módulo, denominada posicionamiento basado en plantillas, le da a un elemento una cuadrícula invisible para alinear elementos descendientes.
El módulo de diseño de plantillas utiliza una sintaxis peculiar pero directa que hace que el diseño sea muy fácil. Lo primero que debe hacer es crear un contenedor con algunos elementos secundarios. Para cada elemento secundario, asigna una letra arbitraria (no importa qué letra, solo asegúrese de que sean únicas).
A continuación, aplica un valor de visualización al elemento principal utilizando estas letras para definir sus proporciones. Por ejemplo, para crear tres columnas iguales, simplemente escríbalas todas en una fila:
Esto le dará el siguiente resultado:
Si desea reorganizar las cajas, simplemente reorganice las letras en su CSS. En lugar de escribir "abc", intente escribir "bca".
Para crear una nueva fila, crea un nuevo conjunto de comillas. Puede repetir letras para establecer un sentido de la proporción. Por ejemplo, aquí ponemos la primera fila a? Ab? y el segundo a? cc ?, que significa? c? será el doble del ancho de? a? o? b ?.
Cada sección (a, b, c) se conoce como una? Ranura? Para crear una ranura vacía, simplemente use un punto:? A.b.c? Creará dos ranuras vacías en nuestra fila. Para apuntar a una ranura para un estilo adicional, usa el pseudo elemento de ranura:
Excavar más hondo
Al igual que en el ejemplo anterior, aquí se puede hacer mucho más, como establecer alturas y anchos utilizando dimensiones o porcentajes precisos. ¡Nada de esto está listo para usar en ningún navegador en este momento, pero puedes instalar un complemento jQuery para probarlo! Echa un vistazo a las páginas de demostración del complemento para ver algunos ejemplos asombrosos codificados de cómo crear cualquier diseño que desees utilizando el Módulo de diseño de plantillas.
Volver a las tablas?
El artículo de Andrew Tetlaw Sitepoint que mencioné anteriormente presenta una opción más interesante para el diseño.
Curiosamente, configurar la pantalla? propiedad a? mesa? Nos permite estructurar nuestro diseño como si fueran tablas. De inmediato sé que esto va a asustar a mucha gente. Volviendo de nuevo a la disposición basada en la tabla? ¿Estás loco? Sin embargo, la parte loca es que esta es, de hecho, una práctica completamente diferente a utilizar literalmente un elemento de tabla. Aquí simplemente le estás diciendo al CSS que posicione los elementos. similar Cómo se posicionan las celdas y filas de la tabla.
Personalmente, todavía me gustan los nuevos métodos sofisticados de CSS3 que acabamos de cubrir mucho mejor y realmente nos cuesta imaginar que esto tenga una aceptación generalizada, pero vale la pena echarle un vistazo y discutir. Si estás interesado, asegúrate de revisar la explicación de Tetlaw.
Conclusión
El punto de este artículo fue para que pienses en cómo los flotadores pueden no ser necesariamente la mejor manera de estructurar sitios web. Aunque son una de las mejores soluciones que podemos usar actualmente en proyectos de clientes en vivo, representan un sistema bastante descuidado y roto que está lejos de ser ideal.
Hay varias formas en que puede abordar las caídas de flotadores. Por ahora, puedes revisar? Display: inline-block? como una opción o incluso mirar en? mostrar: tabla? si eres particularmente valiente
Los asistentes que hacen que toda esta tecnología funcione reconocen que el sistema está dañado y están trabajando arduamente para resolver los problemas con los módulos de diseño que pueden resultar extremadamente útiles en el futuro. Espere escuchar mucho más sobre los módulos Flexbox y Template Layout en el futuro. Quién sabe, uno o ambos de estos podrían ser la forma estándar en que los futuros desarrolladores crean diseños web.
Deja un comentario y déjanos saber tus pensamientos sobre todo esto. ¿Crees que los flotadores representan un sistema de diseño defectuoso? ¿Alguno de los módulos de diseño propuestos parece una solución sólida para estos problemas?