Programación accesible

Web de la comunidad programación accesible

CSS Snapshot 2025 - el estado actual del lenguaje de estilos

Autor: Miguel Barraza.
En la categoría: noticias
Publicado:

CSS Snapshot 2025 es una publicación del grupo de trabajo CSS del W3C que resume el estado actual del lenguaje CSS. Define qué módulos están considerados suficientemente estables para usarse con confianza en proyectos reales. No es un estándar, sino una referencia consolidada sobre qué tecnologías CSS modernas ya están maduras.

El documento completo está disponible aquí: https://drafts.csswg.org/css-2025/

¿Qué módulos y tecnologías se incluyen?

CSS Snapshot 2025 agrupa y clasifica más de 30 módulos en diferentes niveles de estabilidad. A continuación, repasamos los conceptos clave incluidos en esta edición y explicamos cómo usarlos.

Conceptos clave de CSS explicados

1. Media Queries

Permiten aplicar estilos en función de las características del dispositivo (ancho de pantalla, orientación, resolución, etc.). Son esenciales para diseño responsivo.

Ejemplo:

@media (max-width: 768px) {
  nav { display: none; }
}

Oculta la navegación en pantallas pequeñas como móviles.

También hay condiciones como:

@media (prefers-color-scheme: dark) {
  body { background-color: #111; color: #eee; }
}

Detecta si el usuario usa modo oscuro.

2. Container Queries

Permiten aplicar estilos según el tamaño del contenedor del elemento, no del viewport completo. Ideal para componentes reutilizables.

Ejemplo:

@container (min-width: 500px) {
  .card { display: flex; }
}

El diseño cambia si el contenedor (por ejemplo, una tarjeta o widget) supera los 500px.

Más sobre esto en: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries

3. Pseudo-clase :has()

Permite seleccionar un elemento padre si contiene un hijo que cumpla cierta condición. Antes solo era posible con JavaScript.

Ejemplo:

form:has(input:invalid) {
  border: 2px solid red;
}

Aplica un borde rojo si hay campos inválidos dentro del formulario.

Más info: https://developer.mozilla.org/en-US/docs/Web/CSS/:has

4. Mixins y funciones CSS (@mixin, clamp(), min(), etc.)

Permiten reutilizar bloques de estilos y calcular valores dinámicos.

Ejemplo con clamp():

font-size: clamp(1rem, 2vw, 2rem);

El tamaño se ajusta automáticamente entre un mínimo y un máximo según el ancho de pantalla.

Ejemplo de función personalizada en CSS actual:

width: min(100%, 600px);

Usa el menor valor entre el 100% del contenedor o 600px.

5. @layer

Agrupa estilos por prioridades, mejorando la cascada y el mantenimiento del CSS.

Ejemplo:

@layer base, components;

@layer base {
  body { font-family: sans-serif; }
}

@layer components {
  .btn { padding: 1rem; }
}

base se aplica primero, y components puede sobrescribirlo si es necesario.

Más detalles: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

6. Scroll Snap

Permite que el scroll se detenga automáticamente en puntos definidos, útil para carruseles o galerías.

Ejemplo:

.carousel {
  scroll-snap-type: x mandatory;
}
.item {
  scroll-snap-align: center;
}

7. Pseudo-elementos avanzados

Permiten estilizar partes específicas de un elemento.

Ejemplo:

::placeholder {
  color: gray;
}
::marker {
  font-size: 1.5em;
}

8. Interoperabilidad

Es el grado en que los módulos CSS funcionan igual en todos los navegadores. El Snapshot 2025 prioriza aquellos módulos con alto nivel de interoperabilidad.

¿Qué significa todo esto para desarrolladores?

  • Puedes usar más funcionalidades sin depender de JavaScript o frameworks.
  • Los estilos son más adaptables, modulares y mantenibles.
  • Hay mayor precisión y control en cómo y cuándo se aplican los estilos.
  • Estas capacidades están ampliamente soportadas en navegadores modernos (Chrome, Edge, Firefox, Safari).

Glosario técnico

  • CSS Snapshot: resumen oficial del estado actual del lenguaje CSS.
  • Media Queries: reglas que aplican estilos según características del dispositivo.
  • Container Queries: estilos aplicados según el tamaño del contenedor del elemento.
  • :has(): selecciona un elemento si tiene un hijo que cumple una condición.
  • Mixins/funciones: bloques reutilizables o calculadores de valores dinámicos.
  • @layer: permite organizar el orden de aplicación de los estilos CSS.
  • Scroll Snap: técnica que alinea el scroll en posiciones definidas.
  • Pseudo-elementos: estilos aplicados a partes específicas de un elemento, como marcadores o texto de entrada.
  • Interoperabilidad: compatibilidad uniforme de funcionalidades entre navegadores.

Fuentes

  1. CSS Snapshot 2025 — W3C https://drafts.csswg.org/css-2025/ Documento oficial con la lista de módulos CSS considerados estables y su nivel de interoperabilidad.

  2. New Front-End Features For Designers In 2025 — Smashing Magazine https://www.smashingmagazine.com/2024/12/new-front-end-features-for-designers-in-2025/ Explora las características de CSS modernas ya soportadas en navegadores, incluyendo ejemplos visuales.

  3. Mastering Modern CSS Techniques in 2025 — Medium https://medium.com/design-bootcamp/mastering-modern-css-techniques-in-2025-with-real-world-code-examples-cd9eea7f63eb Ejemplos prácticos de nuevas técnicas CSS aplicadas a diseño real.

  4. The 10 Best New CSS Features in 2025 — Medium (Karsten Biedermann) https://medium.com/@karstenbiedermann/the-10-best-new-css-features-in-2025-already-supported-in-all-major-browsers-c4a4cbbf71ea Resumen de características destacadas ya disponibles con amplio soporte.

  5. CSS Overview — W3C https://www.w3.org/Style/CSS/Overview.en.html Sitio oficial del W3C sobre CSS, con enlaces a especificaciones, borradores y grupos de trabajo.

etiquetas: