Compré esta taza recientemente para usarla en el trabajo. Siendo un desarrollador web profesional, decidí que me convertiría en el rey de la ironía de la oficina. La broma no es única, por supuesto. Lo he visto en todas partes, desde camisetas hasta presentaciones de conferencias.
La mayoría de los que leen esto probablemente se hayan encontrado con esta imagen al menos una vez. Es una broma con la que todos podemos identificarnos, ¿verdad? Intentas hacer algo simple con CSS, y las formas misteriosas en las que incluso las propiedades básicas interactúan inevitablemente lo estropean.
Si esta broma personifica la frustración colectiva que los desarrolladores tienen con CSS, entonces, a riesgo de arruinar la diversión, pensé que sería interesante analizar el error en su corazón, como un caso de estudio sobre por qué la gente se frustra con CSS.
El problema
Vea el Pen CSS is Awesome de Brandon (@brundolf) en CodePen.
Hay tres condiciones que deben cumplirse para que ocurra este problema:
- El contenido no se puede encoger para ajustarse al contenedor.
- El contenedor no se puede expandir para adaptarse al contenido
- El contenedor no maneja el desbordamiento con elegancia
En escenarios del mundo real, lo más probable es que la segunda condición sea la que deba arreglarse, pero exploraremos las tres.
Corregir el tamaño del contenido
Esto es un poco injusto para el contenido del cuadro porque la palabra INCREÍBLE no cabe en una línea con el tamaño de fuente y el ancho del contenedor dados. De forma predeterminada, el texto se ajusta a los espacios en blanco y no divide las palabras. Pero supongamos por un momento que no podemos permitirnos cambiar el tamaño del contenedor. Quizás, por ejemplo, el texto sea un encabezado ampliado en un sitio que se está viendo en un teléfono especialmente pequeño.
Rompiendo palabras
Para ajustar una palabra continua, tenemos que usar la propiedad CSS word-break. Poniéndolo en break-all le indicará al navegador que divida las palabras si es necesario para envolver el contenido del texto dentro de su contenedor.
Vea el CSS de la pluma es impresionante: salto de palabras de Brandon (@brundolf) en CodePen.
Otro contenido
En este caso, la única forma de hacer que el contenido sea más receptivo fue habilitar la ruptura de palabras. Pero hay otros tipos de contenido que pueden estar desbordados. Si word-wrap estaban configurados para nowrap, el texto ni siquiera se ajustaba entre palabras. O bien, el contenido podría ser un elemento a nivel de bloque, cuyo width o min-width está configurado para ser mayor que el ancho del contenedor.
Fijar el tamaño del contenedor
Hay muchas formas posibles de que el elemento contenedor se haya visto obligado a no crecer. Por ejemplo: width, max-width, y flex. Pero lo que todos tienen en común es que el ancho está determinado por algo más que su contenido. Esto no es intrínsecamente malo, especialmente porque no hay una altura fija, lo que en la mayoría de los casos haría que el contenido simplemente se expandiera hacia abajo. Pero si se encuentra con una variación en esta situación, vale la pena considerar si realmente necesita controlar el ancho o si se puede dejar a la página para determinarlo.
Alternativas a la ambientación width
La mayoría de las veces, si establece un elemento width, y lo estableciste en píxeles, realmente querías establecer min-width o max-width. Pregúntese qué es lo que realmente le importa. ¿Este elemento desapareció por completo cuando carecía de contenido porque se redujo a un ancho de 0? Colocar min-width, para que tenga dimensión pero aún tenga espacio para crecer. ¿Se estaba volviendo tan ancho que un párrafo completo cabía en una línea y era difícil de leer? Colocar max-width, por lo que no irá más allá de cierto límite, pero tampoco se extenderá más allá del borde de la pantalla en dispositivos pequeños. CSS es como un asistente: quieres guiarlo, no dictar todos sus movimientos.
Desbordamiento causado por flexbox
Si uno de sus elementos flexibles tiene contenido desbordado, las cosas se complican un poco más. Lo primero que puede hacer es verificar si está especificando su ancho, como en la sección anterior. Si no es así, probablemente lo que está sucediendo es que el elemento es “flex-encogimiento”. Los artículos Flex primero se dimensionan siguiendo las reglas normales; width, contenido, etc. El tamaño resultante se llama su flex-basis (que también se puede establecer explícitamente con una propiedad del mismo nombre). Después de establecer la base flexible para cada artículo, flex-grow y flex-shrink se aplican (o flex, que especifica ambos a la vez). Los artículos crecen y se encogen de forma ponderada, según estos dos valores y el tamaño del contenedor.
Ajuste flex-shrink: 0 le indicará al navegador que este elemento nunca debe ser más pequeño que su base flexible. Si la base flexible está determinada por el contenido (el predeterminado), esto debería resolver su problema. Pero ten cuidado con esto. Podría terminar encontrando el mismo problema nuevamente en el elemento primario del elemento. Si este artículo flexible se niega a encogerse, incluso cuando el contenedor flexible es más pequeño que él, se desbordará y volverá al punto de partida.
Manejo de desbordamiento
A veces simplemente no hay forma de evitarlo. Quizás el ancho del contenedor esté limitado por el tamaño de la pantalla en sí. Tal vez el contenido sea una tabla de datos, con filas que no se pueden ajustar y columnas que no se pueden contraer más. Todavía podemos manejar el desbordamiento con más gracia que simplemente derramarlo donde sea.
desbordamiento: oculto;
La solución más sencilla es ocultar el contenido que se desborda. Ajuste overflow: hidden; simplemente cortará las cosas donde lleguen al borde del elemento contenedor. Si el contenido es de naturaleza más estética y no incluye información crítica, esto podría ser aceptable.
Vea que el lápiz CSS es impresionante: desbordamiento: oculto por Brandon (@brundolf) en CodePen.
Si el contenido es texto, podemos hacerlo un poco más atractivo visualmente agregando text-overflow: ellipsis;, que agrega automáticamente un pequeño “…” al texto que se corta. Sin embargo, vale la pena señalar que verá un poco menos del contenido real para dejar espacio para los puntos suspensivos. También tenga en cuenta que esto requiere overflow: hidden; para ajustar.
Vea el lápiz CSS es impresionante: puntos suspensivos de Brandon (@brundolf) en CodePen.
desbordamiento: automático;
El remedio preferible suele ser el establecimiento overflow-x: auto;. Esto le da al navegador el visto bueno para agregar una barra de desplazamiento si el contenido se desborda, lo que permite al usuario desplazar el contenedor en esa dirección.
Vea que Pen CSS is Awesome: overflow: auto de Brandon (@brundolf) en CodePen.
Esta es una alternativa particularmente elegante, porque significa que pase lo que pase, el usuario podrá acceder a todo el contenido. Además, la barra de desplazamiento solo aparecerá si es necesaria, lo que significa que no es una mala idea agregar esta propiedad en lugares clave, incluso si no espera que entre en juego.
¿Por qué este acertijo resuena tan universalmente entre las personas que han utilizado CSS?
CSS es difícil porque sus propiedades interactúan, a menudo de formas inesperadas. Porque cuando configuras uno de ellos, nunca solo configuras esa única cosa. Esa única cosa se combina, rebota y contradice con una docena de otras cosas, incluidas las cosas predeterminadas que nunca configuraste tú mismo.
Una regla general para mitigar esto es: nunca seas más explícito de lo necesario. Las páginas web responden de forma predeterminada. Escribir un buen CSS significa aprovechar ese hecho en lugar de anularlo. Utilice porcentajes o unidades de ventana gráfica en lugar de una consulta de medios si es posible. Usar min-width en vez de width Donde puedes. Piense en términos de reglas, en términos de lo que realmente quiere decir, en lugar de simplemente agregar propiedades hasta que todo se vea bien. Intente tener una idea de cómo el navegador resuelve el diseño y el tamaño, y haga sus cambios y adiciones además de eso con prudencia. Trabaja con CSS, en lugar de contra él.
Otra regla general es deje que el ancho o la altura sean determinados por el contenido. En este caso, eso no fue suficiente, pero en la mayoría de los casos lo será. Dale a las cosas una vía para la expansión. Cuando establezca reglas sobre cómo se dimensionan sus elementos, especialmente si esos elementos contendrán contenido de texto, piense en los casos extremos. “¿Y si este contenido se redujera a un solo personaje? ¿Y si este contenido se expandiera a tres párrafos? Puede que no se vea muy bien, pero ¿mi diseño estaría totalmente roto? “
CSS es extraño. Es diferente a cualquier otro código y eso incomoda a muchos programadores. Pero usado sabiamente puede, de hecho, ser asombroso.