En este artículo vamos a ver las novedades CSS más destacadas de los últimos años. Aunque muchas de estas propiedades, funciones o técnicas han existido durante algún tiempo, es en la actualidad cuando han alcanzado una amplia aceptación en los navegadores, lo que nos permite incorporarlas sin problemas en nuestras hojas de estilo. No obstante, siempre es recomendable verificar su compatibilidad con los navegadores en Can I Use.
Novedades CSS: Propiedades y técnicas destacadas
CSS, el lenguaje de estilos utilizado para dar forma y diseño a las páginas web, ha experimentado una evolución constante en los últimos años. Las nuevas especificaciones y funcionalidades están transformando la forma en que diseñamos y presentamos contenido en la web. A continuación, destacamos algunas de las novedades CSS más interesantes para darle estilo a nuestros proyectos. ¡Empecemos con Blend Modes!
1. CSS Blend Modes: Mezclar los colores entre dos elementos
Los Blend Modes son una característica que merece estar en este listado de novedades CSS ya que nos permite combinar elementos HTML con otros elementos de fondo, como imágenes, colores o degradados, sin necesidad de usar un programa de diseño gráfico. Estos modos permiten mezclar los colores del fondo con el elemento superpuesto, creando una variedad de efectos estéticos, como aclarado, contraste, saturación, etc.
Sintaxis:
Para aplicar Blend Modes en CSS utilizaremos la propiedad mix-blend-mode. Donde <modo-de-mezcla> es el nombre del Blend Mode que quieres aplicar, como «multiply», «screen», «overlay», etc.
.elemento {
mix-blend-mode: <modo-de-mezcla>;
}
Valores destacados de la propiedad mix-blend-mode:
| Blend Mode | Descripción | Características |
|---|---|---|
| multiply | Multiplica los colores de la capa superior con los de la capa inferior. | – Oscurece la imagen resultante. |
| screen | Invierte los colores de la capa superior y los multiplica con los de la capa inferior. | – Aclara las áreas de la imagen. |
| overlay | Combina Multiply y Screen, oscureciendo o aclarando la capa inferior dependiendo de sus colores. | – Produce un efecto de contraste y saturación. |
| darken | Conserva los colores más oscuros de las dos capas. | – Selecciona el color más oscuro de cada píxel de ambas capas. |
| lighten | Conserva los colores más claros de las dos capas. | – Selecciona el color más claro de cada píxel de ambas capas. |
| color-dodge | Aclara los colores de la capa inferior dependiendo de los colores de la capa superior. | – Aclara las áreas de la imagen de la capa inferior. |
| color-burn | Oscurece los colores de la capa inferior dependiendo de los colores de la capa superior. | – Oscurece las áreas de la imagen de la capa inferior. |
| difference | Resta los colores de la capa superior de los de la capa inferior. | – Produce un efecto de inversión de colores. |
| exclusion | Similar a Difference, pero con una apariencia menos extrema. | – Combina los colores de ambas capas con un efecto de exclusión. |
| hard-light | Combina Multiply y Screen, pero de una manera más intensa. | – Produce un efecto más fuerte de contraste y saturación. |
| soft-light | Similar a Overlay, pero con una apariencia más suave. | – Produce un efecto más suave de contraste y saturación. |
| hue | Preserva el brillo y la saturación de la capa inferior, pero adopta el tono de la capa superior. | – Aplica el tono de la capa superior a la capa inferior. |
| saturation | Preserva el brillo y el tono de la capa inferior, pero adopta la saturación de la capa superior. | – Aplica la saturación de la capa superior a la capa inferior. |
| color | Preserva el brillo de la capa inferior, pero adopta el tono y la saturación de la capa superior. | – Aplica el tono y la saturación de la capa superior a la capa inferior. |
| luminosity | Preserva el tono y la saturación de la capa inferior, pero adopta el brillo de la capa superior. | – Aplica el brillo de la capa superior a la capa inferior. |
Ejemplo:
Veamos un ejemplo para comprender cómo funcionan los Blend modes. En el ejemplo siguiente se aplica el modo de mezcla «Overlay» a un texto superpuesto sobre imágenes de fondo para conseguir un efecto de superposición llamativo y legible.
CSS:
.text {
mix-blend-mode: overlay;
}
Ejemplo en CodePen:
Ver más sobre Blend Modes CSS →
2. Filtros CSS: aplicar efectos en contenedores o imágenes
Los filtros CSS permiten aplicar efectos visuales a las imágenes directamente en CSS sin utilizar previamente un programa de diseño gráfico. Para aplicar un filtro CSS a una imagen se utiliza la propiedad filter y se pueden aplicar efectos como desenfoque, contraste, saturación, ajuste del brillo o conversión a escala de grises, entre otros.
Estos efectos se aplican mediante funciones de filtro, que pueden tener uno o más valores según el efecto deseado. Veamos la sintaxis de la propiedad filter en CSS y los valores que acepta.
Sintaxis:
selector {
filter: <función-de-filtro>(<valor>) ;
}
Los valores más comunes que acepta la propiedad filter son los siguientes:
| Función | Descripción | Valores |
|---|---|---|
blur( | Aplica un desenfoque al elemento | <valor> cantidad de desenfoque a aplicar |
brightness( | Ajusta el brillo del elemento | <valor> 0: completamente oscuro, 1: original |
contrast( | Ajusta el contraste del elemento | <valor> 0: completamente gris, 1: original |
grayscale( | Convierte el elemento a escala de grises | <valor> 0: original, 1: escala de grises |
hue-rotate( | Gira el espectro de colores del elemento | <valor> es la cantidad de grados en sentido horario 0 a 360deg |
invert( | Invierte los colores del elemento | <valor> 0: original, 1: invertido |
opacity( | Ajusta la opacidad del elemento | <valor> 0: transparente, 1: original |
saturate( | Ajusta la saturación del elemento | <valor> 0: grisáceo , 100%: original |
sepia( | Aplica un tono sepia al elemento | <valor> 0: original, 1: sepia completo |
Diferencias entre blend modes y filtros: los blend modes se usan para mezclar colores entre elementos superpuestos, mientras que los filtros se utilizan para aplicar efectos visuales directamente al contenido de un elemento.
Ejemplo:
En el siguiente ejemplo se muestran todos los filtros especificados en la tabla 2 sobre un contenedor de color rojo.
Ejemplo en CodePen:
3. Scroll Snap en CSS: Controlar el desplazamiento o scroll en contenedores
El Scroll Snap, es una propiedad de CSS que nos permite controlar el desplazamiento o scroll en contenedores para que sea suave y centrado. Anteriormente, conseguir este tipo de comportamiento requería el uso de JavaScript. Sin embargo, gracias a Scroll Snap de CSS, ahora podemos implementarlo con solo unas pocas líneas de código gracias a la propiedad scroll-snap-type.
Esta propiedad nos permite definir puntos de «anclaje» a los que el desplazamiento se detendrá de forma automática al hacer scroll. Esto es muy interesante en sitios web que presentan una disposición en bloques horizontales o verticales, como en galerías de imágenes o productos.
Sintaxis:
Para implementar Scroll Snap en CSS, aplicaremos la propiedad scroll-snap-type al contenedor correspondiente con la siguiente sintaxis.
.contenedor-scroll {
scroll-snap-type: [x | y | block | inline] [mandatory | proximity];
}
.seccion {
scroll-snap-align: [start | center | end | none];
}
- La propiedad
scroll-snap-typeespecifica cómo se debe comportar el desplazamiento dentro del contenedor. Puede definir el tipo de desplazamiento en los ejes horizontal (x) o vertical (y), así como también en bloques (block) o en líneas (inline). Además, determina si el desplazamiento debe detenerse obligatoriamente en los puntos de anclaje especificados (mandatory) o si puede detenerse en el punto más cercano (proximity). - La propiedad
scroll-snap-alignse aplica a los elementos hijos del contenedor. Esta propiedad determina cómo se alineará cada elemento con respecto al punto de anclaje. Los valores comunes parascroll-snap-alignsonstart,end,center,none, etc. Por ejemplo,scroll-snap-align: start;alinea el inicio del elemento con el punto de anclaje.
Ejemplo:
Supongamos que tenemos un contenedor que contiene varias secciones y queremos aplicar Scroll Snap para que el desplazamiento se detenga en cada sección. Para ello, creamos un contenedor con la clase «contenedor-scroll» que contiene varias secciones con la clase «seccion». Aplicamos Scroll Snap al contenedor verticalmente (scroll-snap-type: y mandatory), lo que hace que el desplazamiento se detenga obligatoriamente en cada sección. Además, establecemos scroll-snap-align: start en cada sección para alinear el inicio de cada una con el punto de anclaje. Esto garantiza un desplazamiento suave y centrado entre las secciones de contenido.
HTML:
<div class="contenedor-scroll">
<div class="seccion">Sección 1</div>
<div class="seccion">Sección 2</div>
<div class="seccion">Sección 3</div>
<div class="seccion">Sección 4</div>
</div>
CSS:
.contenedor-scroll {
height: 300px; /* Altura del contenedor */
overflow-y: scroll; /* Habilitar el desplazamiento vertical */
scroll-snap-type: y mandatory; /* Desplazamiento vertical obligatorio */
}
.seccion {
height: 300px; /* Altura de cada sección */
scroll-snap-align: start; /* Alinear el inicio de cada sección con el punto de anclaje */
}
Ejemplo en CodePen:
Ver más sobre Scroll Snap CSS →
4. CSS scroll-behavior: Animación suave al pulsar enlaces que llevan a un marcador
La propiedad scroll-behavior de CSS nos permite agregar un efecto de scroll suave (smooth scroll) a nuestra página web para mejorar la experiencia del usuario. De esta manera, al pulsar enlaces que llevan a un ancla o marcador del documento, en lugar de moverse directamente de forma seca, que es el comportamiento por defecto del navegador, se moverá con una animación o transición suave.
Esta es una de las propiedades que más nos gustan de las novedades CSS de los últimos años, ya que anteriormente teníamos que usar librerías externas de JavaScript para implementar esta funcionalidad.
Sintaxis:
La propiedad scroll-behavior se aplica normalmente al elemento html para controlar el comportamiento de desplazamiento en toda la página. Veamos su sintaxis.
html{
scroll-behavior: auto | smooth;
}
- auto: Este es el valor predeterminado. Indica que el desplazamiento será instantáneo, sin transición o animación.
- smooth: Este valor activa el desplazamiento suave, lo que significa que el movimiento entre los diferentes elementos de la página será gradual y animado.
Ejemplo:
Uno de los ejemplos más claros sobre la propiedad scroll-behavior es su uso en páginas de aterrizaje (landing pages) compuestas por un menú principal que enlaza a diversos marcadores insertados en distintos contenedores.
HTML:
<nav>
<ul>
<li><a href="#section1">Sección 1</a></li>
<li><a href="#section2">Sección 2</a></li>
<li><a href="#section3">Sección 3</a></li>
<li><a href="#section4">Sección 4</a></li>
</ul>
</nav>
<section id="section1">Sección 1</section>
<section id="section2">Sección 2</section>
<section id="section3">Sección 3</section>
<section id="section4">Sección 4</section>
CSS:
html{
scroll-behavior: smooth;
}
Ejemplo en CodePen:
Ver más sobre scroll-behavior →
5. CSS position sticky: Encabezados fijos llegados a un punto al hacer scroll
La propiedad position: sticky es una adición reciente a las novedades de CSS y al arsenal de valores de posicionamiento (propiedad position) en CSS. Aunque position: sticky ha existido durante algún tiempo, su amplia adopción en los navegadores modernos ha llevado su uso a un nivel completamente nuevo. Esta propiedad combina características de position: relative y position: fixed, lo que permite a un elemento comportarse de manera relativa hasta que alcanza un punto de referencia específico en el contenedor de desplazamiento, momento en el cual se vuelve fijo en su posición.
Por ejemplo, si tenemos un encabezado de página que queremos que permanezca visible mientras los usuarios desplazan el contenido, podemos aplicar position: sticky junto con valores de desplazamiento (top, right, bottom, left) para definir cuándo y dónde debe volverse fijo.
Una de las características más útiles de position: sticky es su capacidad para crear encabezados fijos llegados a punto o columnas laterales que siguen al usuario mientras navegan por una página web larga. Esto mejora significativamente la experiencia del usuario al proporcionar una navegación constante y accesible.
Sintaxis:
.container {
position: -webkit-sticky;
position: sticky;
}
Ejemplo:
Veamos un ejemplo para entender mejor el valor sticky. A continuación se puede ver un ejemplo que nos permite posicionar los encabezados de una lista alfabética en la parte alta del documento, usando position: sticky; y top:0px;.
CSS:
p {
position: -webkit-sticky;
position: sticky;
top: 0px;
background-color: #e1f4fc;
padding: 20px;
font-weight: bold;
}
ul{
margin: 20px 0;
}
li{
padding-left: 20px;
}
Ejemplo en CodePen:
Ver más sobre position sticky →
6. CSS Line-Clamp: Acortar texto a un número de líneas e incluir puntos suspensivos
La propiedad CSS line-clamp nos permite limitar un texto a un número concreto de líneas, lo que resulta especialmente útil en contenedores en los que el espacio es limitado. Además de truncar el texto, line-clamp se combina con otras propiedades CSS, como display y overflow, para ajustar el comportamiento del texto, incluyendo la adición de puntos suspensivos, también llamados puntos de elipsis, al final del texto truncado.
Sintaxis:
.elemento-truncado {
display: -webkit-box;
-webkit-line-clamp: <numero_de_lineas>;
-webkit-box-orient: horizontal | vertical;
overflow: hidden;
}
display: -webkit-box;: Esta propiedad se utiliza para establecer el tipo de caja de diseño utilizado para el elemento. En este caso,-webkit-boxes necesario para compatibilidad con navegadores basados en WebKit, como Safari y Chrome.-webkit-line-clamp: <numero_de_lineas>;: Esta es la parte principal de la propiedadline-clamp. Aquí se especifica el número de líneas que se mostrarán antes de truncar el texto. Por ejemplo, si estableces-webkit-line-clamp: 3;, solo se mostrarán las primeras tres líneas del texto y el resto será truncado.-webkit-box-orient: vertical;: Esta propiedad se utiliza para establecer la orientación del contenido dentro del contenedor. En el contexto deline-clamp, normalmente se usaverticalpara que los elementos de línea se apilen verticalmente dentro del contenedor flexible, permitiendo así la truncación vertical del texto.overflow: hidden;: Esta propiedad se utiliza para ocultar el contenido que se desborda del contenedor. Es importante para asegurarse de que el texto truncado no sea visible fuera del área designada.
Ejemplo:
Veamos un ejemplo para entender mejor cómo funciona la propiedad. En una tienda online, puedes utilizar line-clamp para truncar las descripciones de productos después de un cierto número de líneas. Esto permite a los usuarios obtener una vista previa del contenido sin abrumarlos con información excesiva.
CSS:
.product-description {
display: -webkit-box;
-webkit-line-clamp: 3; /* Truncar después de 3 líneas */
-webkit-box-orient: vertical;
overflow: hidden;
}
Ejemplo en CodePen:
Ver más sobre CSS line-clamp →
7. CSS Clamp(): Tipografía fluida que cambia de tamaño según el ancho de pantalla
La función CSS clamp() nos permite definir un rango de valores para el tamaño de la fuente, incluyendo un tamaño mínimo, máximo y un valor preferido que se ajusta dinámicamente en relación con el ancho de la pantalla.
Sintaxis:
Su sintaxis básica consiste en tres valores separados por comas.
propiedad: clamp(valor_mínimo, valor_preferido, valor_máximo);
- propiedad: Es la propiedad a la que se va a aplicar
clamp(). Por ejemplo:font-sizepara modificar el tamaño de las fuentes. - valor_mínimo: Es el tamaño mínimo que se aplicará a la propiedad, independientemente del tamaño de la pantalla o del contenedor. Si el valor preferido es menor que este, se aplicará el valor mínimo.
- valor_preferido: Es el valor que se aplicará de manera predeterminada a la propiedad. Este valor puede ser relativo, como en el caso de unidades como
vw(viewport width) oem, lo que permite que el tamaño del texto se ajuste dinámicamente en función del tamaño de la pantalla. - valor_máximo: Es el tamaño máximo que se aplicará a la propiedad. Si el valor preferido es mayor que este, se aplicará el valor máximo.
Ejemplo:
En el siguiente ejemplo, el tamaño de la fuente se ajusta entre 1em y 2.5em, con un tamaño preferido que varía en función del ancho de la pantalla. En el tamaño preferido se usa la unidad de medida relativa vw o viewport-width, que no es más que el ancho de la pantalla o viewport.
El valor 100vw es el 100% del ancho de la pantalla actual. Por lo que el tamaño de nuestra fuente preferida va a ser un porcentaje del ancho en pixeles de la pantalla. Por ejemplo, si decimos que nuestro tamaño preferido es de 3vw, cuando el ancho de la pantalla o viewport sea de 1000px, la fuente tendrá un tamaño de 30px. Si el ancho de la pantalla es de 700px, el tamaño de la fuente será de 21px.
CSS:
h2 {
font-size: clamp(1em, 3vw, 2.5em);
}
Ejemplo en CodePen:
8. Hyphens CSS: Separación de palabras con guiones a final de línea
La propiedad hyphens de CSS nos permite utilizar el guion para dividir aquellas palabras situadas al final de una línea que, por falta de espacio, deben escribirse en parte en la siguiente línea. Y todo ello de forma automática, sin tener que especificar tú en qué lugar poner el guion.
Sintaxis:
.hyphenation {
hyphens: auto | manual | none;
}
Valores:
auto: El navegador decide dónde dividir las palabras para evitar el desbordamiento del texto. Utiliza las reglas de separación de sílabas del idioma predeterminado del documento o del sistema operativo.manual: Las palabras no se dividirán automáticamente. Debes utilizar el carácter de guion (-) para indicar dónde se pueden dividir las palabras manualmente.none: Desactiva la división automática y manual de palabras. El texto puede desbordarse si no cabe en el contenedor.
Además de la sintaxis y los valores de la propiedad hyphens, es importante definir el idioma del contenido para que la división de palabras funcione correctamente. Esto se hace utilizando la propiedad lang en HTML para especificar el idioma del texto. Por ejemplo, si el texto está en español, debes incluir la siguiente declaración en el elemento <html>:
<html lang="es">
Es importante destacar que si tienes fragmentos de código o texto en otro idioma dentro de tu documento HTML, puedes especificar el idioma correspondiente utilizando la etiqueta lang en esos elementos específicos. Por ejemplo, si tienes una cita o un fragmento de texto en inglés dentro de un documento en español, puedes agregar lang="en" al elemento que contiene ese texto en inglés.
<p lang="en">This is an example sentence in English within a paragraph.</p>
Ejemplo:
El siguiente código crea una card con una imagen, un título (h3) y un párrafo (p). Ambos elementos de texto (h3 y p) tienen la propiedad hyphens establecida en auto, lo que permite que el navegador divida automáticamente las palabras al final de una línea si es necesario para evitar el desbordamiento del contenedor. Esto mejora la legibilidad del texto, especialmente en dispositivos con pantallas más pequeñas donde el espacio es limitado.
Ejemplo en CodePen:
9. Variables CSS: Asignar nombres a valores específicos de propiedades para reutilizarlos
Las variables CSS nos permiten asignar nombres a valores específicos de las propiedades, permitiéndonos luego utilizar estos nombres como si fueran variables. Una de sus mayores ventajas radica en que al modificar el valor de estas «variables», se actualiza automáticamente en todas las instancias del documento CSS donde se haya empleado ese nombre. Las variables se suelen utilizar en diferentes contextos, como cambiar colores de fondo, tamaños de fuente, márgenes, etc.
Aunque esta funcionalidad no estaba disponible en las primeras versiones de CSS y no era compatible con todos los navegadores en versiones posteriores, su uso se ha popularizado recientemente.
Sintaxis:
Para definir una propiedad personalizada pondremos dos guiones -- delante del nombre que queramos utilizar. Para definir la propiedad personalizada para todo el documento HTML la incluiremos en el pseudoelemento :root. Ejemplo:
:root {
--principal-color: black; /* Valor personalizado */
--font: "Arial";
}
Para utilizar una propiedad personalizada hay que insertar su nombre dentro de la expresión var():
.clase {
background-color: var(--principal-color);
font-family: var(--font);
}
Ejemplo en CodePen:
9. Modo oscuro y claro con CSS: conoce prefers-color-scheme
En la actualidad, cada vez más usuarios buscan personalizar la experiencia de navegación en función de sus preferencias visuales. La introducción de la media query prefers-color-scheme en CSS permite a los diseñadores adaptar dinámicamente sus sitios web al modo oscuro o claro, según las preferencias del usuario o las configuraciones del sistema operativo.
prefers-color-scheme es una media query introducida en CSS que permite a los desarrolladores detectar si un usuario prefiere un tema de color claro u oscuro en su entorno de navegación.
Sintaxis:
La implementación de prefers-color-scheme es sencilla y consiste en definir reglas CSS específicas para cada tema de color. Por ejemplo, podemos utilizar esta media query para establecer diferentes combinaciones de colores, estilos de texto y fondos según la preferencia del usuario.
@media (prefers-color-scheme: dark) {
/* Estilos para el modo oscuro */
body {
background-color: #222;
color: #fff;
}
}
@media (prefers-color-scheme: light) {
/* Estilos para el modo claro */
body {
background-color: #fff;
color: #222;
}
}
Ejemplo en CodePen:
Veamos un ejemplo sencillo de una página web que puede alternar entre modos claro y oscuro utilizando prefers-color-scheme y un botón para permitir a los usuarios cambiar manualmente entre los dos modos usando JS.
Ver más sobre modo oscuro y claro en CSS →
Además de las novedades CSS que hemos visto en este artículo, como Blend Modes, Scroll Snap, CSS Line Clamp, Variables CSS, etc., hay todo un mundo de características y técnicas adicionales en CSS que vale la pena conocer.
Entre estas novedades CSS, destacan tecnologías como CSS Grid, que revoluciona la forma en que diseñamos layouts en la web, así como Flexbox, que proporciona un control flexible sobre la disposición de los elementos en un contenedor. No podemos olvidar tampoco las funciones matemáticas que permiten cálculos dinámicos en propiedades CSS, así como las transiciones y transformaciones que agregan dinamismo a las interfaces de usuario, o los gradientes para crear fondos y efectos visuales.
Sin embargo, el mundo de CSS sigue evolucionando constantemente, y siempre hay nuevas técnicas y herramientas por descubrir. Si quieres mantenerte al día con el contenido más reciente y recibir actualizaciones sobre nuevas publicaciones, te invitamos a suscribirte a nuestra newsletter o seguirnos en LinkedIn.