El secreto para diseñar diseños de sitios web sin CSS Flota

Si ha estado diseñando para la Web durante la última década, sin dudas está familiarizado con la propiedad de flotación de CSS. Dado que la industria (afortunadamente) adoptó el principio de diseños sin mesa, los flotadores han sido el arma de elección que la mayoría de nosotros usamos para diseñar nuestras páginas web, pero ¿es la mejor opción?

A pesar de la popularidad de este método, suele ser la causa de la frustración y la confusión para los nuevos diseñadores y se convierte en un problema cuando los elementos flotados se dejan "sin aclarar". Estas carrozas no eliminadas pueden causar múltiples problemas que van desde la estética descuidada hasta la inaccesibilidad completa. Con un proyecto pequeño, es bastante sencillo solucionar problemas de flotación, pero cuando se trabaja en una aplicación web grande con contenido dinámico, puede ser un poco más complicado, consumir un tiempo precioso y costarle dinero.

Una mejor alternativa

Incluso cuando se usa correctamente, los flotadores cambian flujo normal de un documento que puede causar un comportamiento inesperado y limitar las opciones de estilo. Dado que un flotante no está en el 'flujo normal', las cajas de bloques no posicionadas creadas antes y después de la caja flotante fluyen verticalmente como si el flotador no existiera. Con un diseño receptivo, donde los tamaños son dinámicos y fluyen para llenar el espacio disponible, esto está lejos de ser ideal. ¿Y si hubiera una mejor manera?

Flexbox es el futuro emocionante de los diseños web pero, para aquellos de nosotros que deben soportar navegadores heredados, este sigue siendo un sueño lejano. La propiedad de visualización , por otro lado, tiene soporte completo y puede proporcionar casi toda la funcionalidad de disposición de un flotante sin los inconvenientes.

bloque en línea para el rescate

La propiedad de visualización , en combinación con flotación y posición , determina el tipo de recuadro o recuadros que se generan para un elemento. En pocas palabras, los elementos de nivel de bloque abarcan todo el ancho de su contenedor forzando todos los elementos posteriores a la línea siguiente mientras que los elementos de nivel en línea solo abarcan el ancho de sus contenidos, permitiendo que cualquier elemento de nivel en línea fluya junto a él en el mismo línea.

Aplicación de visualización: bloque en línea a un elemento genera un contenedor de bloque de nivel en línea. Piensa en el texto dentro de una etiqueta. Todos están "en línea" entre sí, mientras que la etiqueta en sí es un contenedor de nivel de bloque. Al comprender este comportamiento, podemos utilizar la propiedad de visualización para alinear nuestro contenido junto a la otra. Como todos nuestros elementos permanecen en el flujo normal, no tenemos problemas con un elemento primario colapsado. En mi opinión, esta es una solución mucho más limpia que aún logra el resultado deseado.

Vea la pluma Bloque en línea sobre flotadores por davidicus en CodePen.

La técnica

Este método funciona prácticamente en cualquier lugar donde normalmente aplicarías el flotador. Echemos un vistazo a la disposición clásica de la barra lateral / principal. Para el HTML, tenemos un elemento contenedor con dos elementos secundarios dentro, así:

Nuestro CSS:

        .wrapper,.mainContent,.sideBar {//change the box model for simplicity-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.wrapper {font-size: 1em;padding: 1.5em;width: 100%;}.mainContent,.sideBar {display: inline-block;vertical-align: top;width: 100%;}@media (min-width: 700px) {.mainContent {margin-right: 5%;width: 60%;}.sideBar { width: 35%; }}

Solo así tenemos el contenido principal y la barra lateral establecidos.

La dirección del "flotante" está determinada por la alineación de texto de la div envoltura. Como la alineación por defecto se deja, no tuvimos que hacer nada. Sin embargo, podría establecerlo fácilmente en el centro o en la derecha para lograr algunos diseños que ni siquiera son posibles con flotadores (más sobre esto más adelante). Observe el comentario "sin espacios" colocado entre los dos divs secundarios del contenedor .wrapper . Esto es importante tener en cuenta, y la razón para hacerlo es la única "estafa" acerca de este método.

Espacio en blanco

Regresemos al ejemplo de etiqueta. Al escribir texto en html, todos los espacios en blanco se envuelven en un único carácter de espacio en blanco, independientemente de la cantidad de espacios que tenga en su documento HTML. Entonces, cualquier espacio que tenga entre sus elementos "flotantes" en el marcado se registrará realmente como un espacio entre ellos en el navegador, al igual que nuestro texto de párrafo. Esto, naturalmente, hará que los cálculos de su tamaño se desvíen, derribando el último elemento al siguiente nivel de la página. ¡No bueno! Afortunadamente para nosotros hay varias soluciones para solucionar este pequeño problema. Como:

• Establecer tamaño de letra: 0; . El espacio con el que estamos tratando es un espacio de caracteres, por lo que establecer el tamaño de fuente en cero también hace que el tamaño del espacio sea cero. El problema con esto es que debe aumentar el tamaño de fuente de los elementos secundarios y cualquier tamaño de 'em' sale completamente por la ventana. Esto podría ser un poco engorroso para mantenerse al día, por lo que esta forma no es ideal.

• Elimine el espacio entre sus elementos en su HTML, eliminando así el espacio de la ecuación. Hice esto por un tiempo, pero parecía descuidado e hizo que fuera más difícil de leer.

• Agregar un comentario HTML entre sus elementos también eliminará el carácter de espacio como lo hizo en nuestro ejemplo. Esta es mi solución preferida . El texto resaltado en la mayoría de los editores de texto es tal que el contraste entre la nota y los elementos es suficiente para mejorar significativamente la legibilidad de su marca. Esto también le permitirá mantener la sangría apropiada del elemento real en sí.

Los flotadores funcionan para mí, ¿por qué cambiar?

Usted puede estar pensando, "Esto es bueno y todo, pero ¿por qué iba a cambiar un método que funciona bien para mí?" Bueno, incluso si usted es un maestro flotante, hay ciertas cosas que simplemente no pueden hacer. Por ejemplo:

• El elusivo "flotador centrado", que a menudo es deseable, requiere un marcado adicional y múltiples propiedades CSS para lograr. Con el método de visualización esto simplemente se hace aplicando text-align: center al wrapper.

• La mayor ventaja de elegir el método de visualización es la capacidad de alinear verticalmente su contenido. ¿Con qué frecuencia ha querido centrar un elemento en su hermano? Puede usar el posicionamiento con el truco de margen negativo / traducción, pero, de nuevo, con un entorno dinámico y receptivo, esto no es preferible. En lugar de aplicar vertical-align: middle; centrará perfectamente sus elementos en todo momento sin ningún trabajo adicional de su parte. (Vea la pluma Bloque en línea sobre flotadores por davidicus en CodePen.)

Para concluir

En realidad, no se trata de una "talla única" cuando se trata de diseño web y realmente se reduce a las preferencias personales. Todavía utilizo flotadores en ciertas situaciones y, a veces, realmente es la mejor herramienta para el trabajo. Sí, sin embargo, creo que hay una ventaja definitiva en el uso del método de visualización. Según mi experiencia, considero que es el método mejor y menos propenso a errores para tratar con diseños. Para aquellos de ustedes que quieran explorar este método más, he creado una grilla "Just Say No To Floats": Cuadrícula de bloque en línea con SASS en CodePen.

Imagen / miniatura destacada, pared derrumbada a través de Chris Cotterman