Cosas que quizás no sabías de CSS

Con la reciente encuesta del estado de CSS, vamos a comentar algunas características que pueden ser menos conocidas de CSS. Espero que os sirva de ayuda 😃.

1. Visualizar texto en vertical

¿Alguna vez has querido poner un texto en vertical y has estado jugando con los filtros de CSS? Pues, una forma muy sencilla de situar un texto en vertical es con la propiedad writing-mode.

2. Espacio entre elementos

¿Recuerdas los tiempos en los que para diseños con varias filas y columnas usabas las propiedades margin y padding para dejar espacio entre ellas? Pues eso es cosa del pasado gracias a la propiedad gap. Quizás, ya conocías esto, pero lo que menos gente sabe es que, por un lado, gap, es unalias de grid-gap (puedes usar ambas de forma indistinta); y por otro que ambos son un shorthand o propiedad abreviada de grid-row-gap, y column-row-gap. Por lo que podemos especificar un espaciado distinto para filas y columnas, algo que podéis comprobar en el ejemplo siguiente:

Esta propiedad la podréis usar con flex, grid y columnas (algo que veremos en el punto siguiente).

3. Texto en columnas de forma sencilla

Lo primero que se te vendrá a la cabeza al hablar de texto en columnas, puede que sea un periódico. Y es que si necesitamos aplicar ese estilo, ya no nos tenemos que romper la cabeza, pues la propiedad column-count viene al rescate. Con ella, básicamente podemos indicar en cuantas columnas se dividirá el texto.

4. Filtros

Ya llevan varios años entre nosotros, pero por si no lo sabías puedes aplicar una gran cantidad de efectos gráficos mediante el uso de CSS con la propiedad filter. Esta propiedad permite un sinfín de posibilidades, tantas que darían para un artículo (o varios). Ya que podemos combinar distintos efectos en un único filtro.

En el código de ejemplo, os pongo una imagen (aunque se puede aplicar a cualquier elemento sea o no una imagen), a la que se aplican distintos filtros con CSS.

5. Ajustar el alto (y el ancho) al contenido

Una de los valores predefinidos menos conocidos de CSS es fit-content. Aplicado al alto o al ancho de un componente, lo que hace es ajustar el tamaño del bloque HTML (ya sea ancho, alto o ambos) a su contenido. Un ejemplo lo podéis ver a continuación, donde al usar en éste flex, el alto de cada elemento se "estira" para igualarse al que tenga un alto mayor. Con la función fit-content, lo que haremos es que el componente que menos altura tiene se quede con ésta, en lugar de estirarse.

Esta función se puede usar sin parámetros o de una forma más compleja, especificando el mínimo y el máximo.

6. Cambiar el color de fondo de algunos controles

Seguro que más de una vez has visto que se oculta un checkbox con CSS para poner una especie de capa por encima que deje el checkbox con otro estilo u otros colores. Desde hace un tiempo, al menos si lo hacía por cambiar los colores, ya no es necesario. En este caso, con la propiedad accent-color, podrás modificar el color de fondo de checkbox, radio buttons, rangos y barras de progreso.

7. Aplicar estilos según el tema de color del sistema operativo

CSS ha avanzado mucho en los últimos tiempos, y prueba de ello es que ahora podemos aplicar distintos estilos según el tema de color del sistema operativo. Para ello, disponemos de la media-query prefers-color-scheme. Con ella podemos comprobar si el usuario ha seleccionado un tema claro u oscuro (valores light y dark), y según esto aplicar distintos estilos.

Para probar el ejemplo siguiente, cambia el tema de color de tu sistema operativo. Si el navegador con el que estás viendo esta página lo soporta, deberías ver como cambian los colores del fondo y el texto.

Y con esto terminamos esta compilación de cosillas que quizás no sabías de CSS. ¿Os han resultado interesantes? ¿Os gustaría que habláramos del alguna en un artículo más detallado? Como siempre, espero vuestros comentarios 😉.