El diseño receptivo a menudo requiere establecer sus anchos usando porcentajes. Esto es bastante fácil de lograr, es decir, hasta que empieces a lanzar bordes en la mezcla. Si sus columnas y el ancho total se establecen utilizando porcentajes, un tamaño de borde estático causará estragos en su diseño.
Hoy vamos a ver un par de maneras diferentes para superar este problema. Aprenderá cómo crear un diseño completamente fluido que no le importe bordes extra o rellenar un bit.
Diseño responsivo es fácil? En teoria
El diseño responsivo es actualmente nuestra mejor respuesta para ofrecer contenido optimizado a la gran cantidad de dispositivos y tamaños de pantalla que acceden a la web hoy en día. Con algunas consultas básicas de medios, podemos tomar un diseño estático de forma rápida y sencilla y convertirlo en algo que evolucione según las necesidades exclusivas del usuario. ¿Qué tan increíble es eso?
La codificación del mundo real tiene una forma de sorprenderte.En teoría, esto me parece agradable y simple. He pasado mucho tiempo leyendo y escribiendo sobre diseño receptivo, por lo que conozco tanto la teoría como las prácticas lo suficiente como para no encontrar obstáculos importantes. Sin embargo, la codificación del mundo real tiene una manera de sorprenderte. No importa qué tan preparado esté, cuando llegue el momento de dar vida a su proyecto, es probable que se presenten algunos obstáculos importantes. Especialmente cuando te acercas a diseños complejos en CSS.
Hay un millón de problemas que surgen en situaciones como esta, pero hoy quiero centrarme en una que específicamente me lanzó una bola curva: las fronteras. Al diseñar diseños sensibles, estos toques aparentemente inocentes pueden tener el efecto de arruinar todo.
Matemáticas receptivas
Al codificar un sitio completo en un sitio receptivo, una práctica altamente recomendada es usar anchos basados en porcentajes en su contenido. Claro, puede combinar consultas de medios con anchos estáticos, pero entonces su diseño no es tan adaptable como podría ser. Si ese es el objetivo final, ¿por qué no ir hasta el final?
Combinar diseños de columnas múltiples con anchos basados en porcentajes implica un poco de matemática, pero en realidad es muy básico y puede ser manejado por cualquier persona con habilidades básicas de suma y multiplicación (realizamos este siguiente bit en nuestro tutorial de galería de miniaturas de respuestas).
Digamos que queremos un diseño de cinco columnas. Lo primero que me gusta hacer es pensar en los márgenes. Si queremos un margen del 4% entre nuestras columnas, el 4% multiplicado por 5 columnas equivale al 20% de nuestro ancho reservado a los márgenes. Luego restamos el 20% del ancho total (100%) para obtener el 80% restante para las columnas reales. El 80% dividido por cinco columnas equivale a un 16% de ancho en cada columna. Aquí hay un gráfico para hacer todo un poco más claro:
Darle un buen uso a esta matemática en nuestro CSS sería algo como lo siguiente. Bastante fácil ¿verdad?
El problema de la frontera
No tan rapido. Digamos que queremos añadir un borde a nuestro diseño. ¿Como hacemos eso? Normalmente, simplemente agregaríamos un borde a la clase de columna, pero ya hemos explicado el 100% del ancho en el diseño anterior. Añadiendo borde completamente atornilla nuestro diseño. Aquí tenemos cinco columnas distribuidas a través del CSS anterior:
Y esto es lo que sucede cuando agregamos un borde de, por ejemplo, 2px a una columna:
La solución, por supuesto, sería dar cuenta de la frontera en nuestras matemáticas anteriores, pero ¿cómo podemos hacer esto? Resulta que no podemos establecer el tamaño del borde como un porcentaje, solo un valor estático. Esto es problemático porque si usamos porcentajes para todo lo demás, la cantidad de espacio que dejamos para el borde será un valor variable, lo que significa que cambiará a medida que cambie el ancho de la página. ¡Esto hace casi imposible decidir el ancho de nuestras fronteras! ¿Asi que que hacemos? ¿Debemos renunciar y desechar la idea de la frontera?
Esquema de CSS para el rescate
Obviamente, lo que necesitamos es una forma de aplicar un borde a una columna sin atornillar con su ancho. Como cualquier buen engañador de CSS sabe, de hecho hay una propiedad que hace precisamente eso: esquema. Usando el siguiente código, podemos dejar nuestros cálculos exactamente como calculamos antes y aún así obtener un efecto de borde que no rompe nuestro diseño.
Esto funciona muy bien para nuestra prueba, las columnas fluyen muy bien y encajan perfectamente en el espacio provisto a pesar del contorno:
Dolores de cabeza
Encontramos nuestra solución, vamos a darnos una palmada en la espalda y llamémosla un día. Desafortunadamente, siempre hay una advertencia. En este caso, hay varios.
Compatibilidad del navegador
El primer problema que surge con el uso de la propiedad de esquema CSS es, por supuesto, la compatibilidad del navegador. Para ser justos, la situación aquí podría ser peor. Tenemos un excelente soporte en todos los navegadores modernos: Safari, Chrome, Opera, ¡incluso IE! Desafortunadamente, el soporte de IE solo vuelve a IE8 con IE6 y 7 con soporte cero.
Muchos desarrolladores han decidido recientemente que pueden descartar el soporte de IE6, así que sé que muchos no estarán dispuestos a hacer lo mismo para IE7 todavía. Sin embargo, la buena noticia es que esto es puramente un toque estético sutil y definitivamente no va a arruinar mi día si todos ven el perfil excepto los usuarios de IE7.
Problema de Firefox Box-Shadow
A pesar de que Firefox es totalmente compatible con la propiedad de esquema CSS, debes tener mucho cuidado al usarlo. Específicamente, se encontrará con problemas si combina un esquema con una sombra de cuadro. Para ver lo que quiero decir con esto, aquí hay un esquema y una sombra de cuadro representados en Safari (la forma correcta):
Ahora aquí está el mismo código exacto representado en Firefox (la manera en la que se desordenó):
Como puede ver, por alguna extraña razón, Firefox coloca el contorno fuera de la sombra en lugar del borde real de nuestra columna. Esto resulta en una fealdad inaceptable!
Todo o nada
Una última cosa para recordar acerca de los contornos de CSS: no puede aplicarlos de manera selectiva. Con los bordes, puede usar el borde derecho, el borde superior, etc., pero con un esquema se ve obligado a aceptar la idea de que será uniforme en todo el borde del objeto.
Otra solución: tamaño de caja
El esquema de CSS tiene mucho equipaje! Resuelve nuestro problema, pero viene con un conjunto bastante fuerte de instrucciones que quizás no le interesen. Si solo hubiera una forma de usar la propiedad de borde muy superior, pero ajustar el modelo de caja CSS a nuestros propios dispositivos. Bueno, estás de suerte, porque de hecho existe una propiedad de este tipo: el tamaño de la caja.
Esta propiedad mágica nos permite modificar ese confuso modelo de caja. El valor predeterminado del tamaño de la caja es "content-box", que es esencialmente el modelo de caja que conocemos y amamos. Los valores de ancho y alto determinan el tamaño del contenido y cualquier relleno o bordes se dibujan fuera de eso y, por lo tanto, se agregan al ancho. Así que un div de 200px de ancho con un borde de 2px técnicamente consume hasta 204px de espacio.
casillero
El otro valor posible para el tamaño de la caja es "cuadro de borde", que en realidad coloca cualquier relleno y bordes dentro de la altura y el ancho especificados. ¡Esto significa que un div de 200px de ancho con un borde de 2px sigue siendo solo de 200px! Esto es lo que parece si lo aplicamos a nuestras columnas:
Con este código, nuestras columnas fluyen perfectamente a pesar de tener bordes aplicados:
Incluso podemos llevar esto un paso más allá y agregar algo de relleno a la ecuación sin arruinar nada. Mientras tenga configurada la propiedad de tamaño de cuadro en cuadro de borde, no será necesario ningún cálculo adicional. Agregue todos los bordes y el relleno que le gusten y todo seguirá funcionando:
Compatibilidad del navegador
Curiosamente, la compatibilidad del navegador aquí es la misma que con el esquema, lo que significa que funciona en casi todo, excepto IE6 e IE7. Sin embargo, su principal preocupación aquí es que, a diferencia del esquema, el diseño fallará en los navegadores que no admiten esta propiedad.
¿Qué método es el mejor?
La propiedad de esquema es definitivamente la solución más sencilla, funciona en muchas situaciones y, si falla, no sucede nada malo en su diseño. Sin embargo, creo que el método de tamaño de caja se siente mucho mejor. Puedo combinarlo con una sombra sin ningún problema serio, el soporte del navegador no es realmente malo y todavía puedo disfrutar de todas las bondades de las fronteras. El hecho de que el relleno también puede ser incluido en la mezcla es la guinda del pastel y lo lleva a la competencia en mi mente. Si le preocupa IE7, siempre puede preparar una hoja de estilo condicional rápida que resuelva el problema.
Manifestación
Si desea ver el tamaño de la caja en acción, navegue hasta Dabblet para ver la demostración en vivo del ejemplo anterior.
Conclusión
El esquema y el tamaño de la caja representan dos soluciones posibles a nuestro problema de combinar bordes con anchos basados en porcentajes en diseños CSS. Ninguna de las soluciones es perfecta, pero mientras sepa lo que está haciendo, ambas pueden usarse para resolver con éxito sus problemas de diseño.
Ahora que ha visto mis soluciones para este problema, es hora de que participe. ¿Cómo maneja el problema de los bordes en diseños sensibles? ¿Tienes una solución diferente no mencionada anteriormente?