La mayoría de estas frases de una línea serán una declaración dentro de la regla CSS. En algunos casos, el selector será algo más que un simple elemento; en otros, añadiré declaraciones adicionales como recomendaciones para una mejor experiencia, convirtiéndolas así en algo más que una regla de una sola línea; mis disculpas por adelantado en esos casos.
Algunas de estas frases son más bien una elección personal y no se aplicarán a todos los sitios web (no todo el mundo utiliza tablas o formularios). Describiré brevemente cada una de ellas, lo que hacen (con imágenes de ejemplo) y por qué me gusta utilizarlas.
Ten en cuenta que las imágenes de muestra pueden basarse en ejemplos anteriores.
He aquí un resumen de lo que hacen los one-liners:
- Limitar el ancho del contenido dentro de la ventana gráfica.
- Aumentar el tamaño del cuerpo del texto.
- Aumentar la línea entre filas de texto.
- Limitar la anchura de las imágenes.
- Limitar la anchura del texto dentro del contenido.
- Envolver los encabezados de forma más equilibrada.
- Formule los colores de control para que coincidan con los estilos de página.
- Filas de tabla fáciles de seguir.
- Espaciado en las celdas de las tablas y los encabezados.
- Reducir las animaciones y el movimiento.
Limitar la anchura del contenido en la ventana gráfica
body {
max-width: clamp(320px, 90%, 1000px);
/* additional recommendation */
margin: auto;
}Añadiendo esta línea se reducirá el tamaño del contenido para ocupar el 90% de la ventana gráfica, limitando su anchura entre 320 y 1000 píxeles (siéntase libre de actualizar los valores mínimo y máximo).
Este cambio automáticamente hará que tu contenido se vea mucho mejor. Ya no será un inmenso bloque de texto, sino algo con un aspecto más estructurado y organizado. Y si además añades margin: auto; al body, el contenido quedará centrado en la página. Dos líneas de código hacen que el contenido se vea mucho mejor.
Aumentar el tamaño del texto
body {
font-size: 1.25rem;
}Afrontemos la realidad: el tamaño de fuente de 16px por defecto de los navegadores es pequeño. Aunque eso puede ser una opinión personal basada en que me estoy haciendo viejo 😅👴.
Una solución rápida es aumentar el tamaño de la fuente en el cuerpo. Gracias a las unidades cascada y em que utilizan los navegadores, todo el texto de una página web aumentará automáticamente.
Aumentar el espacio entre líneas
body {
line-height: 1.5;
}Otra preferencia para mejorar la legibilidad y romper el temido muro de texto es aumentar el espacio entre líneas en los párrafos y contenidos. Podemos hacerlo fácilmente con la propiedad line-height.
Esta opción (junto con las dos anteriores) aumentará considerablemente el tamaño vertical de nuestra página, pero te aseguro que el texto será más legible y amigable para todos los usuarios.
Limitar el tamaño de las imágenes
img {
max-width: 100%;
}Las imágenes deberían tener aproximadamente el tamaño del espacio que van a ocupar, pero a veces, acabamos con imágenes realmente largas que hacen que el contenido se desplace y se cree un desplazamiento horizontal.
Una forma de evitarlo es establecer una anchura máxima del 100%. Aunque no es una solución infalible (los márgenes y los rellenos pueden afectar a la anchura), funcionará en la mayoría de los casos.
Limitar la anchura del texto dentro del contenido
p {
max-width: 65ch;
}Otra táctica para evitar el temido muro de texto y los ríos de espacio es aplicar este estilo incluso junto con el ancho máximo en el cuerpo. Puede parecer innecesario y a veces raro, ya que los párrafos serán más estrechos que otros elementos. Pero me gusta el contraste y las líneas más cortas.
Un valor de 60ch o 65ch me ha funcionado en el pasado, pero puedes usar un valor diferente y ajustar el ancho máximo a tus necesidades. Juega y explora cómo se ve en tu página web.
Envolver los títulos de forma más equilibrada
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}Los encabezados son una parte esencial de la estructura de la web, pero debido a su mayor tamaño y a su contenido corto(-er), pueden tener un aspecto extraño. Sobre todo cuando ocupan más de una línea. Una solución que ayudará es equilibrar los encabezados con text-wrap.
Aunque balance parece ser el valor más popular para text-wrap, no es el único. También podríamos utilizar «bonito», que mueve una palabra extra a la última fila si es necesario en lugar de equilibrar todo el contenido. Por desgracia, «pretty» aún no cuenta con un amplio apoyo.
Los colores de los controles de los formularios coinciden con los estilos de las páginas
body {
accent-color: #080; /* use your favorite color */
}Otro pequeño cambio que no tiene un impacto significativo pero que hace que las cosas se vean mejor. Hasta hace poco, no podíamos dar estilo a los controles de formulario nativos con CSS y estábamos atascados con la visualización del navegador. Pero las cosas han cambiado.
El desarrollo de un componente completo puede ser un dolor, pero el establecimiento de un color que es más similar al resto del sitio y el sistema de diseño es posible y sencillo con este one-liner.
Filas de tablas fáciles de seguir
:is(tbody, table) > tr:nth-child(odd) {
background: #0001; /* or #fff1 for dark themes */
}Debemos utilizar las tablas para mostrar datos, no para maquetarlos. Pero las tablas son feas por defecto, y no queremos que los datos se vean feos. En particular, una cosa que ayuda a organizar los datos y hacerlos más legibles es tener una tabla cebra con filas oscuras/claras alternadas.
La línea de comandos que se muestra arriba hace que conseguir ese estilo sea fácil. Se puede simplificar para que sea sólo tr sin tener en cuenta el tbody o el padre de la tabla, pero también se aplicaría a la cabecera de la tabla, que puede que no queramos. Es cuestión de gustos.
Espaciado en celdas de tablas y títulos
td, th {
padding: 0.5em; /* or 0.5em 1em... or any value different from 0 */
}Un último cambio para hacer las tablas más accesibles y fáciles de leer es espaciar ligeramente el contenido añadiendo relleno a las celdas y encabezados de la tabla. Por defecto, la mayoría de los navegadores no tienen relleno, y el texto de las distintas celdas se toca, haciendo confuso diferenciar dónde empieza una y acaba la otra.
Podemos cambiar el valor del relleno para ajustarlo a nuestro tamaño favorito. Sin embargo, hay que evitar pasarse para evitar desplazamientos innecesarios o demasiado espacio en blanco.
Reducir animaciones y movimientos
@media (prefers-reduced-motion) {
*, *::before, *::after {
animation-duration: 0s !important;
/* additional recommendation */
transition: none !important;
scroll-behavior: auto !important;
}
}Vale, vale. Este código es mucho más que un one-liner. Tiene una versión de una sola línea (eliminar animaciones estableciendo su duración a cero segundos), pero otras cosas en una página web hacen que los elementos se muevan.
Estableciendo estas declaraciones dentro de la consulta de medios prefiere-movimiento-reducido, respetaremos la elección de la persona de tener menos movimiento.
Este enfoque es un tanto radical porque elimina todo el movimiento, lo que puede no ser necesariamente la intención del usuario: se trata de «movimiento reducido» y no de «ningún movimiento».
Aún así, podemos preservar el movimiento caso por caso si lo consideramos oportuno.
