¿Qué Hay de Nuevo en CSS Esta Semana?

Si parpadeaste, te perdiste una oleada de propuestas, lanzamientos de navegadores y tutoriales prácticos. Aquí va un resumen rápido de lo más impactante para desarrolladores web.

Favicons SVG que Respetan el Esquema de Colores

Paweł Grzybek mostró cómo servir favicons SVG que se adaptan al modo claro/oscuro usando media queries prefers-color-scheme dentro del propio SVG. La idea es elegante, pero el soporte entre navegadores sigue siendo inconsistente. La comunidad está presionando para una estandarización. Ve el artículo original en CSS-Tricks para los detalles completos.

@mixin en CSS – Ayuda a Definir la Especificación

Lea Verou compartió un fragmento de código y pidió retroalimentación a la comunidad sobre la sintaxis de mixins en CSS. El objetivo es tener bloques de estilo reutilizables tan naturales como en Sass, pero sin necesidad de preprocesador. El CSS Working Group está escuchando activamente a los desarrolladores.

/* Sintaxis propuesta para @mixin en CSS (no final) */
@mixin tarjeta-responsiva($min-width: 300px) {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  & > * {
    flex: 1 1 $min-width;
  }
}

.contenedor-tarjeta {
  @include tarjeta-responsiva(250px);
}

Morphing con Anclas (AIM) – Tutorial

Chris Coyier publicó un tutorial sobre cómo construir una galería de imágenes usando popovers y AIM. Esta técnica anima un elemento desde su posición inicial hasta una posición anclada, creando transiciones suaves sin librerías de JavaScript.

object-view-box – Recorte de Imagen Nativo en CSS

Victor Ponamariov nos recordó object-view-box, una propiedad que permite hacer zoom, recortar o encuadrar un elemento como el viewBox de SVG. Chrome lo soporta desde agosto de 2022, pero Safari y Firefox aún no lo han implementado.

/* Recortando una imagen con object-view-box */
.imagen-recortada {
  object-view-box: inset(10% 20% 30% 40%);
}

corner-shape para Componentes Cotidianos

Brecht De Ruyte exploró cómo usar corner-shape en componentes prácticos como cards, botones y badges. Actualmente solo funciona en Chrome, pero permite crear esquinas redondeadas, biseladas o recortadas con una sola propiedad.

Novedades de los Navegadores

  • Firefox 149: popover=hint (también en Chrome), contenedores con nombre (@container nombre { })
  • Safari 26.4: contenedores con nombre, display: grid-lanes, flow-tolerance
  • Safari TP 240: mejoras en grid
  • Chrome 148: consultas de features en at-rules; background-image ahora soporta light-dark()

Un nuevo sitio llamado BaseWatch rastrea el estado baseline de todas estas features.

Relacionado: Échale un ojo a nuestro análisis de "El Nuevo Capítulo de React: Mudándose a una Fundación Independiente" – otro cambio importante en el ecosistema web.

Developer inspecting CSS code with browser dev tools showing new features like @mixin and corner-shape Coding Session Visual

Manos a la Obra: Morphing con Anclas y Popovers

Veamos un ejemplo práctico de AIM. La idea es animar un popover desde la posición del elemento disparador hasta un overlay centrado.

<button popovertarget="galeria-popover">Abrir Galería</button>

<div id="galeria-popover" popover>
  <img src="foto.jpg" alt="Imagen de la galería" />
</div>

[popover] {
  /* Comienza en la posición del botón */
  position-anchor: --disparador;
  top: anchor(--disparador bottom);
  left: anchor(--disparador left);
  transition: top 0.3s, left 0.3s, transform 0.3s;
}

[popover]:popover-open {
  /* Morph al centro */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Esta técnica elimina la necesidad de animaciones con JavaScript y mantiene toda la lógica en CSS.

CSS toggle switch and popover gallery demo on a modern laptop screen Developer Related Image

Limitaciones y Precauciones

  • Soporte fragmentado. Muchas features (@mixin, corner-shape, object-view-box) son exclusivas de Chrome o están detrás de flags.
  • La sintaxis de @mixin aún es propuesta. Puede cambiar significativamente antes de volverse baseline.
  • AIM depende de popover y anchor-positioning, que aún no tienen soporte universal.
  • Favicons SVG con prefers-color-scheme no funcionan de manera consistente en todos los navegadores (Safari los igna, por ejemplo).

Próximos Pasos

  1. Prueba object-view-box en Chrome para familiarizarte con el recorte nativo.
  2. Participa en la discusión sobre @mixin en GitHub para dar tu opinión.
  3. Arma una galería popover simple usando AIM para entender el flujo de animación.
  4. Monitorea BaseWatch para saber cuándo estas features se vuelven baseline.

Web developer testing object-view-box and light-dark() background-image in Chrome and Firefox Dev Environment Setup

Reflexiones Finales

Las novedades CSS de esta semana muestran que la plataforma evoluciona rápidamente. Muchas features aún son experimentales, pero la dirección es clara: más poder para CSS, menos dependencia de JavaScript para layout e interacción. Empieza a probar estas funcionalidades en Chrome hoy y prepárate para el soporte ampliado en los próximos meses.

También te puede interesar: "RCCLX de Meta: Revolucionando la Comunicación GPU para Plataformas AMD" – cómo Meta está cambiando el juego para la computación de alto rendimiento.

Este contenido fue redactado con la asistencia de herramientas de IA, basándose en fuentes confiables, y fue revisado por nuestro equipo editorial antes de su publicación. No reemplaza el asesoramiento de un profesional especializado.