Por una web más fluida: Menos "float" y más "inline-block"
Si en algún momento deciden aprender CSS o si ya lo están dominando, seguramente tendrán como reto armar sitios web responsive (es decir, que fluyan y se adapten a las diversas dimensiones de computadoras y dispositivos móviles).
Como he escrito en un post anterior, un sitio necesita fluir y adaptarse a cualquier pantalla, así que como diseñadores de interfaz de usuario necesitamos tener clara esta meta.
Cuando descubrí el poder del atributo de CSS “float:left” hace varios años, en verdad que no lo dejaba de usar, me parecía la forma más fácil de controlar el alineado de columnas y elementos en mi layout. Realmente el atributo “display:inline-block” era algo que pasaba completamente desapercibido.
Antes de pasar al ejemplo, otro punto importante para diseñar/maquetar sitios web realmente responsive, es en usar cada vez más medidas proporcionales, como porcentajes o em’s (seguro que esto lo explicaré en algún artículo).
Nota: Es bien conocido que al aplicar “display:inline-block” entre elementos, se genera un margen a la derecha de 4px de manera automática. En CSS Tricks explican diversas soluciones para eliminar este espacio. Pero aún con esta línea extra de CSS, les mostraré por qué vale la pena usar mejor este atributo.
Float vs Inline-block: Round 1
Aparentemente si vemos ambos casos de forma aislada, parece que el resultado es el mismo: Todos los bloques tienen las mismas dimensiones y se adaptan a la medida del contenedor. Funcionan exactamente igual y podríamos decir que se declara un empate.
See the Pen Float vs Inline-block by Bernardo (@25Horas) on CodePen.
Float vs Inline-block: Round 2
En este segundo ejemplo se hizo un ligero ajuste de dimensiones: Cambiamos el “width” de los bloques a 40%, de manera que los elementos automáticamente se desplazaran a una segunda línea y agregamos un elemento extra para observar como interactúa con los bloques.
See the Pen Float vs Inline-block. Ejemplo2 by Bernardo (@25Horas) on CodePen.
Como verán, aquí es cuando uno se da cuenta que usar “floats” genera más problemas. Por su naturaleza, el “float” actúa como una fuerza que alinea los elementos de forma quizás abrupta. Además que, como los elementos no alcanzan a llenar el 100% del contenedor, el div extra (aka. “Elemento Random”) ocupa el resto del espacio de forma indeseada.
Para solucionar esto, se necesitaría agregar un “div” vacío con el atributo “clear:both” y quizás el elemento afectado tendría que tener otros valores como un “display:block” o un “float:left” (algo nada recomendado). Y peor aún, para que los elementos aparezcan centrados sería necesario agregar algún contenedor extra que responda a las dimensiones para luego agregar márgenes que puedan alinear al centro.
El problema viene cuando existen muchos elementos alineados y el layout se vuelva más y más complejo. Esto por lo general causa que el HTML esté inundado del famoso “clearfix” y muchos “wrappers” o containers…
Las ventajas del “inline-block”
Usar “inline-block” definitivamente es una forma más amigable de armar sitios web fluidos. Reacciona de forma amigable con el entorno de elementos y cuando las dimensiones cambian ya sea por un ajuste para la visualización en móviles u otro dispositivo, los elementos se adaptan y desplazan de forma natural. Particularmente en el ejemplo anterior, el “body” tenía el atributo “text-align:center”, lo cual afectó a los bloques con el “inline-block” y se centraron automáticamente sin necesidad de declararlo otra vez.
Atrévanse a usar este atributo para todos elementos que requieran alinearse: menús, bloques, columnas, listados, headers y footers. Si antes no dejaban de usar los floats, les será un gran alivio.
Si les gustó este tipo de post, ¡comenten y sugieran qué les gustaría aprender!
Te puede interesar
-
Marco Antonio
-
Laura Chi
-
25Horas
-
-
Javier Mateos
-
Diana Ronceros
-
Samy Oquendo
-
-
Luis
-
Luis
-
-
Luis