Fecha de publicación: 19 de mayo de 2026
Esta es una lista generada de todos los casos de uso que ahora están disponibles en la guía de la Web moderna.
accessibility
accessible-error-announcement
Sincroniza los estados de accesibilidad programáticos (como aria-invalid) con el estado visual :user-invalid para garantizar que los usuarios de lectores de pantalla reciban comentarios sobre errores solo después de la interacción, lo que refleja la experiencia visual.
Funciones utilizadas:
built-in-ai
language-detection
Funciones utilizadas:
language-model
Ejecuta la inferencia de lenguaje natural integrado en el dispositivo en el navegador con la API de Prompt, con salida de transmisión, respuestas JSON estructuradas y administración de sesiones de varios turnos.
Funciones utilizadas:
summarizer
Resume contenido de texto con la API de Summarizer integrada en el dispositivo.
Funciones utilizadas:
translator
Funciones utilizadas:
css
highlight-text-ranges
Destaca rangos de texto arbitrarios en una página, como resultados de la búsqueda, errores ortográficos o cursores de edición colaborativa.
Funciones utilizadas:
forms
animated-select-picker
Crea un componente de selección personalizado cuyo menú desplegable esté animado. Por ejemplo, el menú aparece con un efecto de desvanecimiento o deslizamiento, o las opciones se animan cuando se seleccionan.
Funciones utilizadas:
autofill-address-form
Crea un formulario de direcciones con atributos de autocompletado correctos y compatibilidad con el autocompletado.
Funciones utilizadas:
autofill-highlight-inputs
Usa CSS para destacar los campos de formulario que el navegador autocompletó y que el usuario no editó.
Funciones utilizadas:
autofill-payment-form
Crea un formulario de pago que recopile los datos de la tarjeta con valores de autocompletar correctos y compatibilidad con la función de autocompletar.
Funciones utilizadas:
autofill-sign-in-form
Crea un formulario de acceso con valores de autocompletado correctos y compatibilidad con el autocompletado.
Funciones utilizadas:
autofill-sign-up-form
Crea un formulario de registro con valores de autocompletado correctos y compatibilidad con el autocompletado.
Funciones utilizadas:
brand-consistent-forms
Haz que las casillas de verificación, los botones de opción, los controles deslizantes de rango y las barras de progreso coincidan con la paleta de colores de tu sitio sin reemplazarlos por componentes personalizados.
Funciones utilizadas:
branded-select-styling
Crea elementos select personalizados cuyo botón, selector, ícono de flecha y marca de verificación coincidan a la perfección con la tipografía, los colores, el espaciado y los tratamientos de borde de tu marca o sistema de diseño.
Funciones utilizadas:
custom-select-picker-layouts
Crea selectores personalizados cuyas opciones se posicionen de formas únicas o interesantes, en lugar de la tradicional lista apilada de opciones.
Funciones utilizadas:
form-fields-automatically-fit-contents
Permite que los campos de formulario crezcan y se reduzcan para adaptarse a la entrada del usuario, por ejemplo, a medida que el usuario escribe o selecciona una opción diferente. Aplica límites de tamaño máximo y mínimo para crear campos de formulario dinámicos y responsivos que se ajusten al diseño de la página.
Funciones utilizadas:
required-field-feedback
Proporciona mensajes de error para los campos obligatorios del formulario que se omitieron o se dejaron vacíos solo después de la interacción del usuario para evitar errores preventivos y garantizar que los comentarios sean oportunos y pertinentes para el contexto del flujo del usuario.
Funciones utilizadas:
rich-media-picker
Crea un componente de selección personalizado cuyas opciones puedan contener un formato HTML complejo (p.ej., imágenes, íconos y otro formato enriquecido) en lugar de solo texto sin formato.
Funciones utilizadas:
select-menu-interaction
Valida que se haya elegido una opción no predeterminada en un menú de selección solo después de que el usuario haya interactuado con el control.
Funciones utilizadas:
validate-input-after-interaction
Muestra comentarios sobre la validación de los campos del formulario (p.ej., requisitos de complejidad de la contraseña o formato de correo electrónico) solo después de que el usuario haya terminado su interacción inicial, para evitar errores prematuros en la carga de la página o mientras el usuario escribe.
Funciones utilizadas:
passkeys
passkey-authentication
Autentica a un usuario recurrente con una llave de acceso para el acceso principal.
Funciones utilizadas:
passkey-conditional-create
Registra de forma silenciosa una llave de acceso para un usuario existente después de que se accede correctamente con una contraseña.
Funciones utilizadas:
passkey-management
Permite que los usuarios vean y administren las llaves de acceso registradas en su cuenta.
Funciones utilizadas:
passkey-reauthentication
Verifica la identidad de un usuario que accedió con sus llaves de acceso existentes antes de realizar una acción sensible.
Funciones utilizadas:
passkey-registration
Registra una llave de acceso para una cuenta de usuario existente.
Funciones utilizadas:
performance
batch-analytics-events
Agrupa y retrasa varios eventos de Analytics en un solo baliza para minimizar la contención de la red y reducir la carga del servidor, sin dejar de ofrecer actualizaciones en tiempo real.
Funciones utilizadas:
break-up-long-tasks
Divide el procesamiento síncrono pesado (cálculos complejos o bucles largos) o las actualizaciones del DOM para permitir que el navegador controle la entrada del usuario y vuelva a pintar la pantalla.
Funciones utilizadas:
calculate-total-foreground-time
Calcula el tiempo total que un usuario dedicó a ver una página, sin incluir los períodos en los que la pestaña estuvo en segundo plano.
Funciones utilizadas:
conditional-async-dependencies
Carga o inicializa de forma condicional las dependencias asíncronas (como la importación de polyfills para las funciones web faltantes) sin necesidad de una orquestación compleja en todas las dependencias de secuencias de comandos de una página.
Funciones utilizadas:
defer-rendering-heavy-content
Reduce los tiempos de procesamiento en las páginas web con mucho contenido (p.ej., páginas con feeds largos, muchos artículos o paneles complejos) posponiendo el procesamiento de todo el contenido que no sea visible de inmediato para el usuario.
Funciones utilizadas:
defer-work-until-scroll-ends
Posponer las operaciones costosas, como las actualizaciones del DOM, la recuperación de datos, el seguimiento de estadísticas o el recálculo del diseño, hasta que finalice el desplazamiento para mantener un rendimiento de desplazamiento fluido
Funciones utilizadas:
deprioritize-background-fetches
Se reduce la prioridad de las recuperaciones de datos en segundo plano realizadas con la API de Fetch para evitar la contención de la red con las solicitudes iniciadas por el usuario.
Funciones utilizadas:
detect-initial-visibility-state
Determina de manera confiable si una página se cargó inicialmente en segundo plano, incluso en los casos en que la secuencia de comandos se carga de forma asíncrona después de que el usuario puso la página en primer plano.
Funciones utilizadas:
efficient-background-processing
Conserva los recursos del sistema y la duración de la batería deteniendo la ejecución de JavaScript en segundo plano (como las animaciones de <canvas>, la renderización de WebGL o el sondeo de datos de WebSocket de alta frecuencia) cuando el componente está fuera de la pantalla y, luego, reanúdalo justo a tiempo cuando vuelva a aparecer en la vista.
Funciones utilizadas:
faster-spa-view-transitions
Habilita transiciones más rápidas a las vistas visitadas anteriormente en una aplicación de una sola página (SPA) conservando su estado DOM estructural en lugar de destruirlas y volver a compilarlas en cada navegación.
Funciones utilizadas:
full-session-analytics
Realiza un seguimiento confiable de las estadísticas, los errores y los datos de telemetría durante toda la visita del usuario a la página, y pospone el envío de los datos hasta que el usuario abandone la página.
Funciones utilizadas:
identify-heavy-scripts
Identifica los scripts que más contribuyen a los fotogramas de animación largos
Funciones utilizadas:
identify-inp-causes
Identifica el código JavaScript de ejecución lenta que afecta la métrica del INP
Funciones utilizadas:
improve-next-page-load-performance
Mejora el rendimiento de la carga de página con la carga previa o la renderización previa de las páginas que es probable que el usuario visite a continuación.
Funciones utilizadas:
interactions-in-complex-layouts
Evita los nuevos cálculos de diseño en diseños complejos, como los paneles con muchos datos o las cuadrículas de estilo de hoja de cálculo, para que las interacciones sean más rápidas y con mayor capacidad de respuesta (lo que reduce las puntuaciones de Interaction to Next Paint [INP]).
Funciones utilizadas:
optimize-image-priority
Optimiza la prioridad de carga de las imágenes candidatas a Largest Contentful Paint (LCP) y reduce la prioridad de las imágenes no críticas para reducir los retrasos en la carga de recursos críticos.
Funciones utilizadas:
optimize-preload-priority
Optimiza la prioridad relativa del contenido precargado para reducir los retrasos en la carga de recursos críticos.
Funciones utilizadas:
optimize-script-priority
Optimiza la prioridad de carga de las secuencias de comandos potenciando las secuencias de comandos asíncronas críticas y reduciendo la prioridad de las secuencias de comandos no esenciales o que se encuentran al final del cuerpo para mejorar la secuenciación y reducir las demoras.
Funciones utilizadas:
resolution-optimized-pseudo-elements
Usa imágenes optimizadas para la resolución en pseudoelementos CSS (como ::before y ::after) para reducir la cantidad de nodos DOM.
Funciones utilizadas:
schedule-tasks-by-priority
Programa tareas con diferentes prioridades para garantizar que el trabajo crítico se ejecute primero mientras se aplaza el trabajo en segundo plano.
Funciones utilizadas:
sequence-distributed-events
Registra y secuencia operaciones en microservicios distribuidos o entornos de seguimiento de alta capacidad de procesamiento grabando marcas de tiempo con una resolución de nanosegundos.
Funciones utilizadas:
user-experience
adapt-scrollbar-to-contrast-preferences
Mejora la visibilidad de la barra de desplazamiento para los usuarios que prefieren interfaces de alto contraste
Funciones utilizadas:
anchor-positioning-tab-underline
Realiza una transición fluida de un elemento entre dos posiciones de elementos de destino. Por ejemplo, mover el subrayado de una pestaña seleccionada entre la pestaña seleccionada anteriormente y la pestaña seleccionada actualmente.
Funciones utilizadas:
animate-element-entry-exit
Oculta o muestra elementos de forma fluida a medida que se agregan o quitan del DOM, o a medida que se activan o desactivan sus valores de visualización.
Funciones utilizadas:
animate-to-from-top-layer
Anima elementos como diálogos, ventanas emergentes y tooltips cuando entran o salen de la capa superior.
Funciones utilizadas:
animate-to-intrinsic-sizes
Anima de forma fluida los componentes interactivos (como acordeones, menús y tarjetas expandibles) hacia y desde sus dimensiones naturales.
Funciones utilizadas:
apply-webgl-shaders
Aplica efectos visuales personalizados con sombreadores de WebGL al contenido HTML.
Funciones utilizadas:
calculate-event-differentials
Calcula la duración y el tiempo restante entre fechas y horas.
Funciones utilizadas:
calculate-with-intrinsic-sizes
Calcula el tamaño de un elemento en función de su tamaño intrínseco y, al mismo tiempo, garantiza que se ajuste a las restricciones de diseño determinadas.
Funciones utilizadas:
capture-location-agnostic-data
Registra datos cronológicos que no deberían cambiar según la ubicación del usuario, como fechas de nacimiento, alarmas recurrentes o días festivos nacionales.
Funciones utilizadas:
carousel-slide-effects
Crea un carrusel de diapositivas con imágenes o elementos visuales, en el que cada diapositiva se anime a medida que entra, se centra o sale del elemento de desplazamiento. Por ejemplo, las diapositivas pueden aparecer y desaparecer gradualmente, rotar, agrandarse o achicarse, etcétera.
Funciones utilizadas:
carousel-snap-highlights
Destaca visualmente el elemento no interactivo que se ajustó actualmente en los carruseles, las galerías o las experiencias de deslizamiento de página completa con ajuste de desplazamiento. Por ejemplo, expandir una tarjeta cuando se ajusta o revelar contenido oculto.
Funciones utilizadas:
child-state-based-styling
Crea un componente que cambie su estilo según el estado de uno de sus elementos secundarios. Por ejemplo, un componente que se renderiza en modo claro o modo oscuro según si se marca (o no) un botón de activación del tema.
Funciones utilizadas:
complex-shapes
Recorta elementos y su contenido en cualquier forma libre, como un símbolo, un trazo de pincel o una textura orgánica para crear diseños más expresivos.
Funciones utilizadas:
component-specific-light-dark-theme
Forzar que ciertos elementos estén en modo claro o modo oscuro (p.ej., bloques de código, reproductores multimedia, etc.) independientemente del esquema de color de la página
Funciones utilizadas:
consistent-cross-document-transitions
Asegúrate de que el estado de la página crítica se cargue y sea estable antes de iniciar una transición de vista entre documentos. Esto significa que los estilos CSS críticos se cargan y aplican, el JavaScript crítico se carga y ejecuta, y el HTML visible para la vista inicial de la página del usuario se analizó antes de que se ejecute la transición.
Funciones utilizadas:
content-based-styling
Crea un componente que cambie su diseño según si contiene elementos secundarios específicos (o no). Por ejemplo, si el componente contiene una imagen, usa un diseño de varias columnas; de lo contrario, usa un diseño de una sola columna de forma predeterminada.
Funciones utilizadas:
coordinate-global-events
Programa reuniones o eventos futuros vinculándolos explícitamente a una zona horaria geográfica de IANA para que las horas de los eventos sigan siendo precisas independientemente de las transiciones del horario de verano (DST), las horas "omitidas" o "repetidas" durante los cambios de reloj.
Funciones utilizadas:
cross-document-transitions
Crea transiciones fluidas y sin interrupciones entre las navegaciones de página completa, como fundidos cruzados, efectos de revelación personalizados o transformación del contenido de una página a la siguiente.
Funciones utilizadas:
customize-scrollbar-color-and-thickness
Cómo personalizar el color o el grosor de una barra de desplazamiento
Funciones utilizadas:
dark-mode
Implementa la compatibilidad con el modo oscuro de manera que se respete la preferencia del usuario por el tema claro u oscuro y se adapte la IU del navegador (p. ej., barras de desplazamiento, controles de formularios, etcétera).
Funciones utilizadas:
declarative-button-actions
Conecta de forma declarativa un botón a cualquier elemento para activar acciones personalizadas y específicas de la aplicación con comandos de botón declarativos, comandos de invocador, comandos de botón, comandos personalizados o acciones de activación declarativas.
Funciones utilizadas:
declarative-dialog-popover-control
Alterna la visibilidad de un diálogo o una ventana emergente desde un botón sin escribir JavaScript.
Funciones utilizadas:
deliver-optimized-decorative-images
Publica imágenes decorativas optimizadas (como fondos, íconos de IU o máscaras complejas) proporcionando simultáneamente formatos de imagen de próxima generación (como AVIF o WebP) junto con varias densidades de píxeles (como 1x y 2x) para que el navegador pueda negociar de forma dinámica la mejor combinación de tamaño de archivo y calidad visual para las capacidades del dispositivo del usuario.
Funciones utilizadas:
design-token-reactivity
Define tokens de diseño de orden superior, como modos de densidad (compacto, cómodo, espacioso) o temas, y haz que los componentes descendientes reaccionen a los cambios directamente y de formas adecuadas para el componente.
Funciones utilizadas:
directional-navigation-transitions
Anima los cambios de estado visual para reflejar la dirección del flujo de navegación del usuario, como deslizar contenido nuevo desde la derecha cuando se avanza o desde la izquierda cuando se regresa a una pantalla anterior.
Funciones utilizadas:
dynamic-sibling-animations
Escalonar la sincronización de la animación o la transición entre elementos secundarios para que cada uno comience después de una demora calculada según su posición en la lista de elementos secundarios
Funciones utilizadas:
dynamic-sibling-styling
Crea espectros visuales dinámicos o diseños que se adapten automáticamente a la cantidad de elementos de un grupo.
Funciones utilizadas:
export-html-media-from-canvas
Captura y exporta contenido HTML dinámico como imágenes o fotogramas de video desde el lienzo.
Funciones utilizadas:
expose-canvas-content-to-browser-features
Expone el contenido renderizado en un lienzo a las funciones del navegador, como las tecnologías de asistencia, la traducción o el modo de lectura.
Funciones utilizadas:
flicker-free-client-side-ab-testing
Publicar y renderizar pruebas A/B, pruebas multivariadas o cualquier otro experimento con JavaScript del cliente para alterar o insertar HTML, CSS y JavaScript sin que se muestre primero el contenido original antes de parpadear o destellar para mostrar el contenido del experimento
Funciones utilizadas:
fluid-scaling
Escalar elementos como el tamaño de la fuente, el espaciado y los tamaños de los medios de forma fluida según el tamaño del contenedor principal en lugar de usar puntos de interrupción fijos
Funciones utilizadas:
format-human-readable-durations
Presenta el tiempo transcurrido o las duraciones a los usuarios en un formato legible y localizado, con la flexibilidad de mostrar desgloses detallados de las unidades (p.ej., "1 hora y 30 minutos") o recuentos totales de unidades (p.ej., "90 minutos") según el contexto.
Funciones utilizadas:
group-element-transitions
Realiza la transición de un grupo de elementos similares de forma simultánea con la misma lógica de transición, como quitar un producto de un carrito de compras y hacer que todos los demás productos se animen a sus nuevas posiciones.
Funciones utilizadas:
improve-text-layout-and-legibility
Mejora el diseño y la legibilidad del contenido de texto corto independiente, como los encabezados que no superan las pocas líneas, permitiendo que el navegador aplique saltos de línea equilibrados de manera uniforme cuando se ajuste el texto.
Funciones utilizadas:
individual-transform-properties
Animar o anular propiedades de transformación CSS individuales (p. ej., translate, rotate, scale) de forma independiente de otras propiedades de transformación en un solo elemento
Funciones utilizadas:
interactive-content-in-3d-scenes
Integra elementos HTML interactivos en una escena 3D.
Funciones utilizadas:
interactive-content-reveal
Crea efectos de revelación interactivos, como un foco que sigue el puntero del usuario para descubrir detalles dentro de una imagen o sección de la IU.
Funciones utilizadas:
interest-triggered-action-previews
Muestra una vista previa en vivo del efecto de un botón cuando un usuario indica interés (p.ej., cuando se desplaza sobre él, lo enfoca o lo mantiene presionado), pero antes de que haga clic.
Funciones utilizadas:
interest-triggered-tooltips
Muestra información sobre la herramienta o información complementaria cuando un usuario coloca el cursor sobre un elemento interactivo, lo enfoca o lo mantiene presionado, sin necesidad de hacer clic.
Funciones utilizadas:
light-dismiss-a-dialog
Crea un diálogo modal que se pueda cerrar con un descarte ligero (es decir, haciendo clic o presionando fuera del diálogo).
Funciones utilizadas:
manage-recurring-intervals
Calcula intervalos recurrentes para la facturación de suscripciones o los ciclos de nómina, y se ajusta automáticamente para los casos extremos, como las transiciones de fin de mes (p.ej., agregar un mes al 31 de enero) para garantizar cálculos precisos del período.
Funciones utilizadas:
model-partial-time-concepts
Modelar conceptos de fecha y hora que, de forma inherente, carecen de un componente estándar (como un año, un día o una fecha específicos) sin usar valores de marcador de posición arbitrarios que introduzcan errores de cálculo
Funciones utilizadas:
move-dom-element-without-losing-state
Mover o cambiar el elemento principal de un elemento DOM sin perder el estado importante del elemento, como los estados de interactividad (:focus/:active), el estado de carga de <iframe>, el estado de animación o transición, etcétera
Funciones utilizadas:
navigation-drawer
Crea un componente de panel lateral de navegación que, cuando se activa desde un botón de menú, se desliza desde el lateral superpuesto sobre el contenido de la página existente y se desliza hacia afuera cuando se descarta (deslizándolo, tocando fuera o presionando Escape).
Funciones utilizadas:
inertintersection-observerpopoverregistered-custom-propertiesscroll-driven-animationsscroll-initial-targetscroll-snap
overflow-clipping-control
Ajusta el límite de recorte visible de un elemento para que se alinee con el borde del contenido, el borde del padding o el borde del borde (o un desplazamiento especificado desde cualquiera de estos), lo que ofrece un control más detallado sobre cómo se recorta el contenido.
Funciones utilizadas:
parallax-scroll-effects
Crea efectos basados en el desplazamiento (como el paralaje) en los que las capas de fondo y primer plano se mueven a diferentes velocidades, lo que crea una sensación de profundidad a medida que el usuario se desplaza.
Funciones utilizadas:
persistent-app-tours
Crea tutoriales de incorporación persistentes con superposiciones nativas vinculadas que permanecen abiertas durante la interacción del usuario.
Funciones utilizadas:
persistent-toast-notifications
Crea notificaciones superpuestas y emergentes no intrusivas para la comunicación persistente y apilable de mensajes y estados.
Funciones utilizadas:
persistent-top-layer-ui
Mantener un diálogo modal, un elemento de pantalla completa o una ventana emergente nativa visiblemente abiertos y funcionalmente activos cuando su nodo DOM subyacente se mueve o se reasigna en el DOM
Funciones utilizadas:
physics-based-easing
Crea efectos de animación y transición personalizados basados en la física, como rebote y resorte, que se sientan más naturales y atractivos que las curvas de aceleración tradicionales.
Funciones utilizadas:
platform-controls-dismiss-dialog
Crea un diálogo modal que se pueda cerrar con acciones estándar del usuario específicas de la plataforma, como presionar la tecla Esc en plataformas de escritorio o un gesto de "atrás" o "descartar" en plataformas para dispositivos móviles.
Funciones utilizadas:
position-aware-tooltips
Crea tooltips y ventanas emergentes con flechas direccionales (o algún otro diseño visual) que apunten automáticamente en la dirección correcta cuando el elemento se invierte a una posición alternativa.
Funciones utilizadas:
precise-text-alignment
Logra una alineación vertical precisa con texto de cualquier fuente. Por ejemplo, el padding visual exactamente igual arriba y abajo del texto, o la alineación del texto perfectamente al ras de los íconos o las imágenes adyacentes.
Funciones utilizadas:
prevent-text-wrapping
Asegúrate de que el navegador no inserte saltos de línea en el texto y permita que el texto se desborde de su contenedor.
Funciones utilizadas:
pull-to-reveal
Crea una función de tirar para revelar que le permita al usuario tirar hacia abajo en la pantalla para revelar más contenido, como una barra de búsqueda.
Funciones utilizadas:
reduce-style-repetition
Reduce la repetición excesiva de estilos encapsulando la lógica de diseño compleja o dinámica en funciones reutilizables (como una función que calcula un gradiente en función de un conjunto de parámetros de entrada).
Funciones utilizadas:
resilient-context-menus-and-nested-dropdowns
Crea menús, información sobre herramientas, menús desplegables o superposiciones contextuales accesibles y responsivos que deben estar vinculados a elementos específicos de la IU, lo que garantiza que la superposición se reposicione automáticamente (p.ej., invirtiendo los ejes) cuando se encuentre con los bordes de la ventana gráfica, lo que garantiza que nunca se corte.
Funciones utilizadas:
same-document-transitions
Conecta visualmente los elementos persistentes en diferentes estados de la página o navegaciones en una aplicación de una sola página (SPA) (p.ej., expandir la miniatura de un producto en una imagen de héroe de borde a borde) transformando sin problemas su tamaño, posición o cualquier otra propiedad de diseño.
Funciones utilizadas:
scroll-entry-exit-effects
Crea efectos de aparición gradual, ampliación o de otro tipo complejos en los elementos a medida que entran y salen del puerto de desplazamiento (o viewport) mientras el usuario se desplaza.
Funciones utilizadas:
scroll-position-aware-elements
Crea botones o widgets flotantes (volver al principio, desplazarse hasta el final, iniciadores de chat, etc.) que aparecen y desaparecen según si el usuario se desplazó o no.
Funciones utilizadas:
scroll-progress-indicator
Crea una barra de progreso de desplazamiento, un indicador de progreso por pasos o cualquier otra indicación visual que comunique qué tan lejos se desplazó el usuario en una página o sección.
Funciones utilizadas:
scroll-snap-realtime-feedback
Proporciona comentarios visuales en tiempo real en los elementos de la IU vinculados mientras un usuario se desplaza por el contenido alineado con el ajuste, antes de que se complete el gesto de desplazamiento.
Funciones utilizadas:
scroll-snap-state-sync
Sincroniza los indicadores de navegación, los paneles de contenido vinculados y el seguimiento de análisis con el elemento que se ajustó de forma activa en un contenedor desplazable.
Funciones utilizadas:
scroll-target-on-load
Crea una lista desplazable de elementos (p.ej., un carrusel de imágenes o un hilo de conversación de chat) que se pueda mostrar con un elemento en particular desplazado a la vista en la renderización inicial.
Funciones utilizadas:
scrollability-affordance-hints
Crea superposiciones de sombras de desplazamiento, degradados o indicadores de flechas direccionales que aparezcan solo cuando realmente haya más contenido para desplazarse en esa dirección.
Funciones utilizadas:
scrollytelling
Anima las propiedades visuales en un elemento objetivo, como atenuar un fondo, cambiar el color de fondo o crear experiencias de scrollytelling, todo ello impulsado por la posición del viewport de un elemento completamente diferente.
Funciones utilizadas:
search-hidden-content
Oculta el contenido de la vista con patrones como acordeones, pestañas y secciones "Leer más", y asegúrate de que el texto oculto se revele durante las búsquedas nativas de "Buscar en la página", permite la indexación de los motores de búsqueda, admite vínculos directos de fragmentos de URL y mantiene la accesibilidad de ARIA.
Funciones utilizadas:
shaped-cutouts
Combina varias formas para crear recortes complejos o efectos de "knockout" en elementos, como agregar una muesca a un elemento.
Funciones utilizadas:
shrinking-header-on-scroll
Anima de forma fluida un encabezado fijo o una portada de página completa al desplazarse para que se contraiga de forma dinámica, gane sombras y transforme su diseño en una distancia de desplazamiento predefinida.
Funciones utilizadas:
size-aware-styling
Compila un componente cuyos estilos puedan depender de forma condicional de su propio ancho o alto, en lugar del ancho o alto del viewport. Por ejemplo, un componente de tarjeta que puede cambiar sus diseños según su tamaño o un botón de llamado a la acción que puede mostrar texto de ayuda de forma condicional según su ancho.
Funciones utilizadas:
soft-edge-content-fade
Aplica un gradiente de transparencia a los bordes del contenido para indicar más áreas desplazables o para ocultar el texto detrás de un muro de pago.
Funciones utilizadas:
stabilize-reactive-state
Administrar los plazos o los programas de tareas en vistas basadas en datos sin efectos secundarios inesperados del estado mutable compartido
Funciones utilizadas:
stack-drill-down
Crea una navegación jerárquica de pantalla completa que permita a los usuarios desglosar vistas anidadas y deslizar el dedo o navegar hacia atrás para volver, con el historial del navegador sincronizado.
Funciones utilizadas:
style-parent-with-has
Aplicar estilo a los elementos principales de un campo de formulario (p. ej., etiquetas o fieldsets) cuando el campo no sea válido
Funciones utilizadas:
support-global-calendar-systems
Mostrar y calcular fechas en sistemas de calendario no gregorianos (p. ej., islámico, hebreo o chino) con precisión para los usuarios internacionales
Funciones utilizadas:
swipe-to-remove
Permite que los usuarios realicen acciones en los elementos de una lista (quitar, archivar, marcar como leído, etc.) con un gesto de deslizamiento horizontal para que puedan procesar las entradas rápidamente sin presionar un control independiente.
Funciones utilizadas:
scroll-snapscroll-initial-targetoverscroll-behaviorscrollbar-widthintersection-observermutationobserverresize-observerweb-animations
visually-stable-font-fallbacks
Define los estilos de fuente de modo que el texto siga siendo legible y visualmente coherente en caso de que se intercambie la fuente preferida por una de las fuentes de resguardo (o viceversa).
Funciones utilizadas:
visually-stable-mixed-fonts
Define estilos de fuente de modo que el texto siga siendo legible y visualmente coherente en situaciones en las que se usan varias fuentes para renderizar un solo bloque de texto.
Funciones utilizadas:
visually-texture-content
Aplica patrones de textura y desgaste realistas a los elementos para darles una apariencia orgánica, envejecida o de material físico.
Funciones utilizadas:
webmcp
agentic-forms
Expón la funcionalidad del cliente como herramientas para los agentes de IA anotando formularios HTML estándar con atributos de WebMCP.
Funciones utilizadas:
agentic-javascript-tools
Registra de forma programática funciones de JavaScript del cliente como herramientas para agentes de IA con la API imperativa de WebMCP.
Funciones utilizadas: