Nuevas reglas CSS y trucos para sacarles más partido

En este artículo vamos a ver las nuevas reglas CSS que se han ido introduciendo en los últimos años y que podrían formar parte de nuestras herramientas diarias.

Por comodidad las hemos agrupado en tres categorías, dependiendo del nivel de soporte del que disponen, y por tanto de si son usables o si todavía nos resultan una mera novedad.

Reglas con soporte total (Mayor del 95%)

Estas reglas son las que ya podemos usar sin miedo a que no se soporten en los navegadores, ya que, en este caso, el soporte es mayor del 95%.

Muchas de ellas, pese a tener varios años, no eran usadas a de forma habitual por la falta de soporte, sin embargo, en este momento podemos empezar a introducirlas en nuestros proyectos para hacernos la vida más sencilla.

Pseudoselector :any-link

• Fecha de introducción: 2013
• Soporte actual: 97.82%

Este selector nos permite seleccionar todos los enlaces, independientemente de si están visitados o no. Es una forma más sencilla de aplicar estilos a todos los enlaces de tus páginas.

a:any-link {
  color: blue;
}

Este selector es equivalente a:

a:link, a:visited {
  color: blue;
}

Y no aplicará para aquellos tag de tipo <a> que no sean enlaces, como, por ejemplo, aquellos que no disponen de ningún atributo href.

Pseudoselector :in-range y :out-of-range

• Fecha de introducción: 2015
• Soporte actual: 98.88%

Estos dos pseudoselectores nos permiten seleccionar aquellos elementos que se encuentran dentro o fuera del rango de valores que se le ha asignado a un input de tipo number o range.

input[type="number"]:in-range {
  background-color: green;
}
input[type="number"]:out-of-range {
  background-color: red;
}

Así podemos aplicar estilos diferentes según si el valor que se ha introducido en el input se encuentra dentro o fuera del rango. En el caso anterior, si el valor introducido es menor que el mínimo o mayor que el máximo, se aplicará el background-color rojo, y si se encuentra dentro del rango, se aplicará el
background-color verde.

Esto soluciona un problema frecuente en la validación de formularios, donde normalmente se valida el valor introducido en el input y se suelen añadir clases o estilos para indicar si el valor es correcto o no. Con estos pseudoselectores simplificamos el código y evitamos tener que añadir clases o estilos innecesarios.

Pseudoselector :is()

• Fecha de introducción: 2018
• Soporte actual: 98.13%

El pseudoselector :is() nos permite agrupar varios selectores y aplicarles el mismo estilo. Es una forma más sencilla de aplicar estilos a varios selectores que comparten las mismas propiedades.

:is(ul, ol) li {
  font-weight: bold;
}

Este selector es equivalente a:

ul li, ol li {
  font-weight: bold;
}

El resultado es equivalente a las agrupaciones en SASS o LESS, pero sin tener que usar preprocesadores ni tener que añadir clases innecesarias.

Propiedad line-clamp

• Fecha de introducción: 2018
• Soporte actual: 97.67%

Esta propiedad nos permite limitar el número de líneas de un texto, muy útil para limitar el máximo de líneas que se van a mostrar en una caja, de forma que si el texto es muy largo se muestre un texto de finalización, como, por ejemplo, la clásica elipsis ...

p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Anteriormente era posible mostrar automáticamente una elipsis utilizando la propiedad text-overflow, sin embargo, esta propiedad sólo tenía en cuenta una única línea de texto, por lo que no era posible mostrar una elipsis en un texto de varias líneas.

Gradientes cónicos

• Fecha de introducción: 2017
• Soporte actual: 97.67%

Los gradientes cónicos nos permiten crear gradientes con un ángulo de inclinación que podemos controlar mediante una propiedad conic-gradient().

div { 
    background: conic-gradient(
        red 0deg,
        yellow 120deg,
        green 240deg
    );
}

La diferencia entre un gradiente radial y un gradiente cónico es que ambos se basan en un círculo, pero el gradiente cónico utiliza el centro del círculo como punto de parada para el color, mientras que el radial usa el propio borde.

Position: Sticky

• Fecha de introducción: 2016
• Soporte actual: 97.67%

La propiedad position: sticky nos permite fijar un elemento en la pantalla cuando el usuario hace scroll hasta él, y cuando el usuario hace scroll hacia arriba, el elemento se vuelve a posicionar en su posición original.

div {
  position: sticky;
  top: 0;
}

Esta propiedad es muy útil para crear menús fijos en la parte superior de la pantalla, o para crear un botón de scroll hacia arriba que se muestre cuando el usuario hace scroll hacia abajo.

Reglas con soporte parcial

Estas reglas, pese a no ser completamente soportadas y por tanto no poder usarse en producción, son muy interesantes y pueden ser una buena opción para probar en en un entorno de desarrollo, y quizás en un futuro nos ayuden a resolver problemas actuales o simplificar nuestros diseños.

CSS Container Query Units

• Fecha de introducción: 2022
• Soporte actual: 76.1%

Las unidades de consulta de contenedor nos permiten aplicar estilos a un elemento en función del tamaño del contenedor que lo contiene. Actualmente esto es posible utilizando medidas porcentuales (%), pero con las nuevas medidas (qw, qh, qi, qmin, qmax) tenemos mucha más variedad y es posible también definir tamaños relativos a medidas como line-height o gap. Las unidades son:

• qw: 1% del ancho del contenedor.
• qh: 1% del alto del contenedor.
• qi: 1% del tamaño inline del contenedor.
• qb: 1% del tamaño block del contenedor.
• qmin: El menor de los valores anteriores.
• qmax: El mayor de los valores anteriores.

Overflow anchor

• Fecha de introducción: 2020
• Soporte actual: 78.2%

La propiedad overflow-anchor nos permite controlar el comportamiento del scroll cuando aparece nuevo contenido en un elemento con scroll. Por defecto, cuando el usuario hace scroll hacia abajo y aparece nuevo contenido, el scroll se mantiene en la misma posición, pero con esta propiedad podemos hacer que el scroll se mueva hacia abajo para que el usuario pueda ver el nuevo contenido.

div {
  overflow: auto;
  overflow-anchor: none;
}

Reglas sin soporte

Aquí incluyo algunos de los working draft sin soporte, recommendations o propositions que existen actualmente que parecen muy interesantes y pueden solucionarnos más de un dolor de cabeza en el futuro.

Función element()

La función element renderiza una imagen en vivo de cualquier id de un elemento que le demos como parámetro, manteniéndola actualizada con cada cambio en ese elemento.

#myCanvas {
  background-image: element(#myElement);
}

Un caso de uso interesante es mantener renderizado un elemento concreto en un canvas y luego poder forzar una descarga para hacer capturas de elementos concretos de nuestro DOM. De esta forma podemos ahorrarnos todas las soluciones actuales, que pasan desde realizar una impresión en PDF usando el propio navegador a intentar pintar como tal nuestro HTML en un canvas teniendo también que asegurarnos de que se inyecte el CSS correspondiente.

Subgrid

• Fecha de introducción: 2022
• Soporte actual: 10.06%

La propiedad subgrid nos permite crear una rejilla dentro de otra rejilla, de forma que podemos definir una rejilla para un elemento padre, y luego definir una rejilla para cada uno de los hijos de ese elemento padre, así cada hijo tendrá su propia rejilla y el tamaño estará computado con el disponible de la columna del grid padre, a diferencia de lo que ocurre actualmente al anidar un grid dentro de otro.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.item {
  display: subgrid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

Reglas condicionales @when / @else

• Fecha de introducción: 2022
• Soporte actual: 0%

Las reglas condicionales @when / @else nos permiten aplicar estilos en función de una condición, de forma que si la condición se cumple, se aplican los estilos de la regla @when, y si no se cumple, se aplican los estilos de la regla @else.

Aunque ya teníamos la opción de utilizar las media queries para utilizar condiciones a la hora de aplicar reglas, el uso de estas nuevas reglas nos permiten agrupar queries mutuamente excluyentes de forma que se apliquen los estilos de la primera regla que se cumpla, y no se apliquen los estilos de las demás reglas.

@when (min-width: 600px) {
  .container {
    display: grid;
  }
}
@else supports(caret-color: pink) {
  .container {
    display: block;
  }
}
@else {
  .container {
    display: flex;
  }
}

Trucos de CSS que puedes usar hoy

Y después de resumir unas cuantas novedades ¿qué tal si te dejo con algunos trucos de CSS que puedes usar hoy mismo y sin esperar soporte?

Text gradients

Uno de esos trucos que utilizo a menudo para dar más dinamismo al texto es algo que he visto usarse poco generalmente, y es renderizar un gradiente de color en el texto. Para ello podemos utilizar la propiedad background-image y definir un gradiente lineal con la dirección del texto, y luego aplicarle un background-clip: text para que el gradiente se aplique solo al texto.

h1 {
  background-image: linear-gradient(45deg, #09009f, #00ff95 80%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

Esto nos da este resultado:

Experimentando con gradients pueden lograrse efectos de texto muy interesantes, como sombras internas, efectos de degradado o 3D.

Grid areas

Grid es una solución muy potente para organizar nuestro contenido teniendo en cuenta ambos ejes (Aunque quizás solo necesites Flexbox, como indicamos en el Curso de optimización CSS, y aunque en general con flex tenemos suficiente, grid tiene una gran cantidad de utilidades para controlar nuestro contenido, incluyendo las areas.

Las grid-areas nos permiten definir un layout fijo para nuestra rejilla, de manera que podemos indicar explícitamente a sus hijos en cuál de las áreas deben de situarse mediante una serie de comentarios en la propiedad.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
}
.header {
  grid-area: header;
}
.main {
  grid-area: main;
}
.sidebar {
  grid-area: sidebar;
}
.footer {
  grid-area: footer;
}

De esta manera no sólo estamos indicando donde deben situarse, sino cuanto debe de ocupar cada área en relación con el layout fijado.

Y si te interesa profundizar más en contenedores dinámicos, te recomiendo que le eches un vistazo a este interesante curso de Flexbox y CSS Grid.

Conclusión

Cada día CSS crece más y más junto a su comunidad, y aunque lo usemos día a día siempre aparecen nuevos trucos o nuevas formas de resolver problemas que nos pueden ayudar a mejorar nuestra experiencia como desarrolladores. Espero que este artículo te haya servido para conocer algunas de las novedades que nos depara el futuro, y que te haya dado algunas ideas para mejorar tus proyectos.

Y si te estás planteando aprender más de este mundo del diseño web ¿Qué tal si le echas un vistazo a nuestro Curso HTML y CSS3 o al más avanzado Curso de Maquetación web con CSS?