Publicado el 3 de junio de 2026
Te damos la bienvenida al resumen mensual de Baseline. En mayo de 2026, varias funciones nuevas de CSS, propiedades de eventos y adiciones a la API se convirtieron en Baseline Newly available, mientras que las unidades de CSS, las propiedades de interacción del usuario y las pseudoclases alcanzaron Baseline Widely available, junto con actualizaciones importantes de la comunidad de desarrolladores.
Encuesta sobre el estado de CSS en 2026
Ya está aquí el control anual de la comunidad web: la encuesta sobre el estado de CSS en 2026 ya está abierta. Este año, los organizadores hicieron un esfuerzo consciente para refinar la encuesta y se enfocaron en las funciones que más les importan a los desarrolladores en una era de codificación asistida por IA. Los proveedores de navegadores supervisan de cerca estos resultados para ayudar a priorizar sus hojas de ruta de ingeniería y abordar los puntos débiles de los desarrolladores. Asegúrate de dar tu opinión y compartir tu experiencia con el panorama de CSS en evolución antes de que se cierre el 1 de julio.
Funciones de Baseline Newly available
Las funciones de esta sección se admiten a partir de mayo de 2026 en el conjunto de navegadores principales y ahora están disponibles en Baseline Newly available.
Consultas de estilo de contenedores
Las consultas de contenedores ya no se limitan al tamaño. Con las consultas de estilo, ahora puedes aplicar estilos a los elementos según las propiedades personalizadas de un contenedor superior. Esto te permite compilar componentes altamente modulares que pueden adaptar su tema o estilo según su ubicación contextual sin depender de estructuras de clase complejas.
Obtén más información en la página de referencia de MDN para @container.
Pseudoclase :open
Anteriormente, para diseñar elementos que tienen estados abiertos y cerrados, como <dialog> y <details>, era necesario verificar atributos o administrar clases. La pseudoclase :open simplifica esto, ya que coincide con estos elementos solo cuando están en su estado abierto, lo que permite un CSS más limpio y declarativo.
Obtén más información en la página de MDN para la pseudoclase :open.
ToggleEvent.source
Cuando trabajas con la API de Popover, es fundamental reaccionar a los cambios de estado. La propiedad source de la interfaz ToggleEvent muestra el elemento de control que activó la acción de alternancia del elemento emergente. Esto te permite identificar el origen del evento y coordinar interacciones complejas de la IU.
Obtén más información en la documentación de MDN para ToggleEvent.source.
Propiedad image-rendering
La propiedad CSS image-rendering te permite controlar el algoritmo de escalamiento que se usa cuando se cambia el tamaño de las imágenes. Esto es particularmente útil para el pixel art, las imágenes de baja resolución o los códigos QR en los que es importante evitar la interpolación borrosa y mantener el escalamiento nítido y pixelado.
Obtén información para usarlo en la página de MDN para image-rendering.
text-decoration-skip-ink: all
Las líneas de subrayado que pasan por los descendentes a veces pueden verse desordenadas. Si bien text-decoration-skip-ink: auto omite la tinta solo cuando se cruza, si la configuras en all, la línea de subrayado se omite todos los glifos, independientemente de la intersección, lo que ofrece más control sobre la estética de la tipografía.
Lee los detalles en la guía de MDN para text-decoration-skip-ink.
SharedWorker
La API de SharedWorker proporciona un trabajador en segundo plano especializado al que se puede acceder desde varios contextos de navegación, como diferentes ventanas, pestañas o iframes en el mismo origen. Esto es útil para compartir el estado, administrar conexiones o coordinar tareas en segundo plano en los límites de las pestañas.
Consulta la documentación de MDN para SharedWorker.
Funciones de Baseline Widely available
Las siguientes funciones se convirtieron en Baseline Widely available, lo que significa que ahora son ampliamente compatibles y se pueden usar en tus proyectos.
Unidad de longitud lh
La unidad relativa lh corresponde a la altura de línea calculada del elemento en el que se usa. Esto facilita el tamaño de los elementos, como las insignias de íconos o los resaltados de fondo, para que coincidan perfectamente con la altura de una línea de texto.
Obtén más información en la referencia de MDN para las unidades de longitud.
Unidad de longitud rlh
Al igual que lh, la unidad rlh representa la altura de línea, pero específicamente del elemento raíz (<html>). Esto te permite establecer un ritmo vertical coherente en toda la página, independientemente del tamaño de fuente local o de las anulaciones de altura de línea.
Obtén más información en la referencia de MDN para las unidades de longitud.
Navigator.userActivation
Muchas APIs web (como la reproducción de video, las ventanas emergentes o el acceso al portapapeles) requieren la interacción del usuario antes de que se puedan activar. La propiedad Navigator.userActivation muestra un objeto que contiene información sobre el estado de activación actual y el historial del usuario en la ventana, lo que permite que las secuencias de comandos verifiquen si se produjo un gesto del usuario.
Descubre cómo usarlo en la página de MDN para Navigator.userActivation.
clip-path
La propiedad CSS clip-path te permite crear una región de recorte que define qué parte de un elemento debe ser visible. Si usas formas básicas (como círculos, elipses o polígonos) o rutas de SVG, puedes crear diseños y transiciones atractivos sin ocultar el desbordamiento.
Consulta los detalles de implementación en la página de MDN para clip-path.
Pseudoclase :user-invalid
A diferencia de :invalid, que aplica el diseño en cuanto se carga una página (lo que suele generar una UX deficiente), la pseudoclase :user-invalid solo coincide con los elementos de formulario no válidos después de que el usuario interactuó con ellos. Esto significa que puedes mostrar comentarios de validación de formularios después de que el usuario abandone el campo.
Obtén información sobre cómo funciona en la documentación de MDN para :user-invalid.
Recapitulemos
Dinos si nos perdimos algo relacionado con Baseline y nos aseguraremos de incluirlo en una edición futura. Si tienes alguna pregunta o quieres enviar comentarios sobre Baseline, puedes informar un problema en nuestra herramienta de seguimiento de errores.