7 propiedades CSS que quizás no conozcas

La ley de Bushnell, que se atribuye al fundador de Atari, nos habla sobre el diseño de videojuegos, y dice que debe ser fácil de aprender, dificil de dominar. Y casi que podríamos aplicarlo a CSS ya que, como vimos en nuestro artículo de introducción a este lenguaje, no es tan complejo como otros. Eso sí, su dificultad radica en otro lado: tiene cientos de propiedades diferentes, que suelen tener diferentes valores, para poder dar estilo a nuestras webs.

A esto hay que sumarle que, tal como nos contó Ricardo hace unos meses, en CSS ya no existen nuevas versiones que aparecen cada ciertos años, sino que su evolución es constante. Por lo que puede provocar que las nuevas incorporaciones se hagan de forma casi invisible, ya que si no tendríamos que estar revisando casi de forma continúa para saber cada novedad.

Al final, en nuestro día a día, es casi imposible conseguir memorizar todas estas propiedades y sus valores, y acabamos echando mano de un numero más manejable con el que nos sentimos más cómodos. Por eso hemos querido crear un pequeño listado con algunas propiedades CSS no muy conocidas, pero que seguro que os pueden servir en algún momento puntual. Y, sobre todo, nos servirá para seguir ampliando nuestros conocimientos, que siempre está bien.

caret-color

Cuando creamos un input en HTML para, por ejemplo, un formulario, con CSS podemos cambiar cualquier parte que lo compone: el borde, fondo, tipo de fuente del texto que vamos a escribir… Y con la propiedad caret-color vamos un paso más allá, dándonos la posibilidad de modificar incluso el color del cursor que aparece en el input cuando vamos a escribir. Un cambio apenas perceptible, pero que seguro que agradecen aquellos que les gusta diseñar hasta el último detalle, y que no quede nada a su libre albedrío. Como punto extra, también podemos mezclar esta propiedad con lo que vimos en el artículo sobre colores animados en textos, y hacer que nuestro cursos vaya cambiando de color.

writing-mode

Normalmente vamos a escribir nuestros textos en dos sentidos: de arriba hacia abajo, y de izquierda a derecha. Pero, ¿sabes que podemos cambiar el sentido de la lectura? Y no me refiero precisamente a girar el texto. El valor por defecto de la propiedad writing-mode es horizontal-tb, que es el sentido de lectura al que estamos acostumbrado, pero tenemos dos opciones más:

• vertical-rl – el texto se lee de derecha a izquierda, y de arriba a abajo.
• vertical-lr – el texto se lee de izquierda a derecha, y de arriba a abajo.

Esto lo hace idóneo si estamos escribiendo en idiomas con un sentido de lectura diferente, como el japonés.

hyphens

Cuando escribimos un texto en la web, siempre hay un salto de línea al terminar una palabra pero puede que prefiramos que en cada reglón haya el máximo número de caracteres posibles, y que incluso las palabras aparezcan cortadas con un guion antes del salto al siguiente reglón. Activaremos esto gracias a la propiedad hyphens, a la que daremos el valor auto para que aparezcan estos guiones en las palabras. Si queremos tener de vuelta el tipo de texto habitual, solo tendremos que borrar esta propiedad, o aplicarle el valor none.

line-clamp

Cuando escribimos una entrada en WordPress, es habitual añadirle un extracto como resumen del artículo. Pero a veces, como diseñadores y/o desarrolladores, no podemos controlar que el usuario final escriba este extracto, y que aparezcan en el feed de entradas textos de diferentes tamaños. Una solución la tenemos gracias a CSS con line-clamp, donde podemos delimitar el número de líneas que van a mostrarse de un texto, añadiéndose al final unos puntos suspensivos. No olvidar añadir también la propiedad y el el valor overflow: hidden;, con el que ocultaremos el texto sobrante.

place-content

El uso de Grid y Flexbox en CSS esta ya muy extendido gracias a la facilidad que nos dan para crear maquetaciones complejas con pocas líneas de código. Pero también nos facilitan otras tareas más comunes, como centrar elementos. Esto lo hacemos con justify-content, para alinear en el eje vertical, y align-items, para el eje horizontal. Aquí es donde entra place-content, que no es más que las dos propiedades anteriores juntas. Solo con aplicarle el valor center, estaremos centrando tanto de forma vertical como horizontal. Seguro que los que diseñabais antes de la llegada de Grid y Flexbox, nunca imaginasteis que se podía haber este tipo de tareas en una simple línea de código.

column-rule

No es una propiedad CSS muy conocida, pero column es tremendamente eficiente si queremos dividir un texto en columnas. Y dentro de las propiedades adyacentes a esta, una de las más curiosas es column-rule, que nos permite añadir una línea separadora entre columnas. A esta línea le podemos asignar un grosor, un estilo de línea y su color. Sus valores funcioan prácticamente igual que la propiedad border, que seguro que os suena más.

object-fit

Una de los aspectos que más me duelen es añadir una imagen a mi diseño web y que no se muestre de forma correcta. Sobre todo cuando la imagen se deforma para encajar en su contenedor. Para arreglar estos problemas con las imágenes, y también con los videos, existe la propiedad object-fit. Por defecto, su valor es fill que, como digo, nos va a deformar las imágenes. Pero podemos usar cualquiera de sus otros valores para controlarlo de manera más precisa:

• contain – mantenemos la relación de aspecto de la imagen original, pero es posible que tengamos espacio vacío si el contenedor de la imagen no tiene la misma relación de aspecto.
• cover – la imagen se ajustará al ancho o el alto del contenedor, pero se cortará parte si el contenedor no tiene la misma relación de aspecto
• none – la imagen estar;a a su tamaño original, sin deformarse, pero también sis respetar los límites de su contenedor padre.
• scale-down – escoge de forma automática la imagen a menor tamaño entre los valores contain y none.

Y con esto terminamos con las propiedades CSS que os queríamos mostrar hoy. ¿Las conocíais ya?. Si la respuesta es no, esperamos que os sirvan de ayuda, y que las podáis usar en vuestros proyectos. Como siempre, tenéis disponibles los comentarios para hacernos llegar vuestras preguntas, sugerencias, u otras propiedades CSS que os hayan sacado de algún apuro y que no sean muy habituales. Seguro que nos pueden servir a todos!