Guías de Modern Web Guidance

Mejora la visibilidad de la barra de desplazamiento para los usuarios que prefieren interfaces de alto contraste

Aplica efectos visuales personalizados con sombreadores de WebGL al contenido HTML.

Orientación sobre el color para la Web, incluidos los requisitos de contraste, los esquemas de colores claros y oscuros, el modo de colores forzados y la generación de matices y sombras a partir de un color base.

Recorta elementos y su contenido en cualquier forma libre, como un símbolo, un trazo de pincel o una textura orgánica, para obtener diseños más expresivos.

Agrega decoraciones de texto, como subrayados, líneas superiores, tachados o formas completamente personalizadas, con animaciones de revelación, desplazamientos personalizados, inserciones finales y saltos de tinta flexibles.

Personaliza el color o el grosor de una barra de desplazamiento

Implementar la compatibilidad con el modo oscuro de manera que se respete la preferencia de tema claro u oscuro del usuario y se adapte la IU del navegador (p. ej., barras de desplazamiento, controles de formulario, etc.)

Integra elementos HTML interactivos en una escena 3D.

Selecciona un color de texto legible con suficiente contraste sobre un color de fondo dinámico.

Haz que cada línea de un encabezado o un logotipo de varias líneas tenga el mismo ancho, como en la tipografía de estilo póster o de encabezado apilado. A diferencia del texto justificado, el texto en sí se ajusta al ancho en lugar de estirar el espaciado.

Captura y exporta contenido HTML dinámico como imágenes o fotogramas de video desde el lienzo.

Exponer el contenido renderizado en un lienzo a las funciones del navegador, como las tecnologías de accesibilidad, la traducción o el modo de lectura

Mejora el diseño y la legibilidad del contenido de texto breve independiente, como los encabezados de no más de unas pocas líneas, habilitando el navegador para que aplique saltos de línea equilibrados de manera uniforme cuando se ajusta el texto.

Logra una alineación vertical precisa con texto de cualquier fuente. Por ejemplo, un padding visual exactamente igual por encima y por debajo del texto, o la alineación del texto perfectamente al ras de los íconos o las imágenes adyacentes.

Combina varias formas para crear recortes complejos o efectos de "knockout" en los elementos, como agregar una muesca a un elemento.

Aplica un gradiente de transparencia a los bordes del contenido para indicar más áreas desplazables o para ocultar el texto con muro de pago.

Aplica temas a la IU generada por el navegador, como la selección de texto, las barras de desplazamiento, los controles de formulario y los selectores con CSS, en lugar de volver a crearla con elementos personalizados.

Prácticas recomendadas de tipografía para la Web, incluidas las unidades de tamaño de fuente, la altura de línea, el ajuste de texto y el equilibrio, y el tipo fluido que se escala con el viewport.

Efectos visuales con CSS, como sombras en capas, modos de fusión, gradientes con interpolación de color predecible y patrones como rayas, tableros de ajedrez, puntos y gráficos circulares creados solo a partir de gradientes.

Define 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 alternativas (o viceversa).

Define estilos de fuentes 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.

Aplica patrones de textura y desgaste realistas a los elementos para darles una apariencia de material orgánico, envejecido o físico.

Crea una barra de progreso de desplazamiento, un indicador de progreso por pasos o cualquier indicador visual que comunique cuánto se desplazó el usuario por una página o sección.

Crea un carrusel de diapositivas con imágenes o con otros elementos visuales, en el que cada diapositiva se anime a medida que entra, se centra o sale de su barra de desplazamiento. Por ejemplo, las diapositivas pueden aparecer o desaparecer gradualmente, rotar, agrandarse o achicarse, etcétera.

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 colores de la página

Crea cuadros de información y ventanas emergentes con flechas direccionales (u otro estilo visual) que apunten automáticamente en la dirección correcta cuando el elemento se mueva a una posición de resguardo.

Crea una función de arrastrar para mostrar que permita al usuario arrastrar hacia abajo en la pantalla para mostrar más contenido, como una barra de búsqueda.

Crea una tabla de datos que presente datos tabulares con una semántica de encabezado adecuada y que siga siendo legible y navegable en pantallas pequeñas y con tecnologías de accesibilidad.

Crea botones o widgets flotantes (volver al principio, desplazarse hasta el final, iniciadores de chat, etc.) que aparezcan y desaparezcan según si el usuario se desplazó o no.

Crea superposiciones de sombras de desplazamiento, desvanecimientos de gradientes o indicadores de flechas direccionales que aparezcan solo cuando haya más contenido para desplazarse en esa dirección.

Anima de forma fluida un encabezado fijo o una portada de página completa al desplazarte para que se reduzca de forma dinámica, obtenga sombras y transforme su diseño en una distancia de desplazamiento predefinida.

Crea encabezados de sección o barras de navegación fijos que se transformen visualmente cuando estén "fijos" en la parte superior, cambiando su esquema de colores o agregando una sombra.

Muestra y administra íconos que se pueden configurar y parametrizar desde CSS, se cargan rápido, son nítidos en cualquier resolución y se exponen correctamente a las tecnologías de accesibilidad (o se ocultan de ellas).

Posiciona menús desplegables, menús flotantes o paneles de acciones contextuales vinculados a un botón de activación para que cambien de eje automáticamente en los bordes de la ventana de visualización en lugar de recortarse.

Crea un componente de tarjeta que adapte su presentación al espacio y al contenido disponibles.

Compila un componente de menú que muestre una lista de opciones o acciones, con compatibilidad para submenús anidados.

Destacar la sección visible de una página en un menú de navegación

Crea una barra de progreso con diseño que comunique la finalización de una tarea o un proceso, tanto en estados determinados como indeterminados.

Crea un componente de tarjeta flotante que muestre una vista previa estructurada interactiva de la página a la que se navegará cuando se coloque el cursor sobre un tipo de vínculo determinado (p.ej., un perfil de usuario).

Crea guías de integración persistentes con superposiciones nativas vinculadas que permanezcan abiertas durante la interacción del usuario.

Crea notificaciones de aviso y superpuestas no intrusivas para mensajes persistentes y apilables, y comunicación de estado.

Crea un componente de activación del modo oscuro que permita a los usuarios anular su preferencia de esquema de colores del sistema para el sitio actual.

Crea un componente de diálogo modal o no modal que sea accesible, administre el enfoque de forma adecuada y se pueda descartar de la manera que los usuarios esperan en cada plataforma.

Crea un ícono giratorio de carga que comunique el estado de ocupado a todos los usuarios, respete las preferencias de movimiento reducido y se anime de manera eficiente.

Crea un componente de panel lateral de navegación que, cuando se active desde un botón de menú, se deslice desde el costado y se superponga sobre el contenido de la página existente, y se deslice hacia afuera cuando se descarte (deslizando el dedo, presionando fuera o presionando Escape).

Crea un componente de círculo de progreso que represente visualmente el estado de finalización de una tarea o un proceso, con compatibilidad para contenido en el centro y un diseño coherente con la marca.

Crea una navegación jerárquica de pantalla completa que permita a los usuarios profundizar en vistas anidadas y deslizar el dedo o navegar hacia atrás para regresar, con el historial del navegador sincronizado.

Aplica diseño a las casillas de verificación, incluidos los íconos personalizados, el diseño, los colores y las animaciones de marcar y desmarcar, sin perder la funcionalidad ni la accesibilidad nativas.

Crea efectos de aparición gradual, aumento de escala o de otro tipo de revelación compleja en los elementos a medida que entran y salen del puerto de desplazamiento (o viewport) mientras el usuario se desplaza.

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 seleccionada actualmente.

Oculta o muestra elementos de forma fluida a medida que se agregan o quitan del DOM, o cuando se activan o desactivan sus valores de visualización.

Anima elementos como diálogos, ventanas emergentes y cuadros de información sobre la herramienta cuando entran o salen de la capa superior.

Admite el arrastre para mover un elemento flotante por la página.

Crea efectos basados en el desplazamiento (como el paralaje) en los que las capas de primer plano y de fondo se muevan a diferentes velocidades, lo que genera una sensación de profundidad a medida que el usuario se desplaza.

Destaca visualmente el elemento no interactivo ajustado actualmente en carruseles, galerías o experiencias de deslizamiento de página completa con ajuste de desplazamiento. Por ejemplo, expandir una tarjeta cuando se ajusta o revelar contenido oculto.

Asegúrate de que el estado crítico de la página esté cargado y estable antes de iniciar una transición de vistas entre documentos. Esto significa que se cargan y aplican los estilos CSS críticos, se carga y ejecuta el JavaScript crítico, y se analiza el HTML visible para la vista inicial de la página del usuario antes de que se ejecute la transición.

Escalona el tiempo de animación o transición entre los elementos hermanos para que cada uno comience después de un retraso calculado en función de su posición en la lista de hermanos.

Crea transiciones fluidas y sin interrupciones entre las navegaciones de página completa, como fundidos cruzados, efectos de revelación personalizados o transformación de contenido de una página a la siguiente.

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.

Activa o desactiva la visibilidad de un diálogo o una ventana emergente desde un botón sin escribir código de JavaScript.

Anima los cambios de estado visual para reflejar la dirección del flujo de navegación de un usuario, como deslizar contenido nuevo desde la derecha cuando avanza o desde la izquierda cuando regresa a una pantalla anterior.

Transiciona 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 en sus nuevas posiciones.

Destaca rangos de texto arbitrarios en una página, como resultados de la búsqueda, errores ortográficos o cursores de edición colaborativa.

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.

Muestra una vista previa en vivo del efecto de un botón cuando un usuario indica interés (p.ej., colocando el cursor sobre él, enfocándolo o manteniéndolo presionado), pero antes de que haga clic.

Crear un diálogo modal que se pueda cerrar con un descarte ligero (es decir, haciendo clic o presionando fuera del diálogo)

Anima la IU con transiciones de CSS, animaciones, animaciones basadas en el desplazamiento y transiciones de vistas, mientras mantienes el movimiento en el compositor y respetas las preferencias de movimiento reducido.

Mover o cambiar el elemento superior de un elemento del 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

Mantener un diálogo modal, un elemento de pantalla completa o un cuadro emergente nativo visiblemente abierto y funcionalmente activo cuando su nodo del DOM subyacente se mueve o se cambia de elemento superior en el DOM

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.

Crea un diálogo modal que se pueda cerrar a través de acciones del usuario estándar 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.

Evita que la página subyacente se desplace mientras un diálogo modal está abierto.

Conecta visualmente los elementos persistentes en diferentes estados de página o navegaciones en una aplicación de una sola página (SPA) (p.ej., expandir una miniatura de producto en una imagen hero de sangrado completo) transformando de forma fluida su tamaño, posición o cualquier otra propiedad de diseño.

Anima los cambios de estado dentro de un solo componente (una tarjeta, una lista, un panel o cualquier otro subárbol) mientras el resto de la página sigue siendo interactiva y se ejecutan otras transiciones de forma simultánea.

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.

Sincroniza los indicadores de navegación, los paneles de contenido vinculados y el seguimiento de estadísticas con el elemento ajustado de forma activa en un contenedor desplazable.

Anima las propiedades visuales de un elemento de destino, como atenuar un fondo, cambiar un color de fondo o crear experiencias de scrollytelling, impulsadas por completo por la posición del puerto de desplazamiento de un elemento completamente diferente.

Oculta contenido de la vista con patrones como acordeones, pestañas y secciones "Leer más", y asegúrate de que el texto oculto se muestre durante las búsquedas nativas de "Buscar en la página", permita la indexación de motores de búsqueda, admita vínculos directos de fragmentos de URL y mantenga la accesibilidad de ARIA.

Crea una lista de elementos desplazable (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.

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.

Implementar una navegación espacial accesible con las teclas de flecha que funcione correctamente en diferentes modos de diseño (cuadrícula, etc.)

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.

Permite que los usuarios deslicen el dedo de forma horizontal en un elemento de lista o panel de contenido para revelar botones de acción contextuales o un menú lateral sin activar automáticamente una acción.

Activar efectos visuales, animaciones o cambios de enfoque en un elemento de destino solo después de que se haya completado un desplazamiento programático fluido hacia ese elemento

Permite que los usuarios se desplacen libremente por superficies bidimensionales, como mapas, imágenes ampliadas, lienzos infinitos o cuadrículas de datos grandes, en ambas direcciones (ya sea en diagonal o cambiando de dirección a mitad del gesto) sin que el gesto se bloquee en un solo eje horizontal o vertical.

Crea un componente de selección personalizado cuyo menú desplegable esté animado. Por ejemplo, el menú se atenúa o se desliza para mostrarse, o las opciones se animan cuando se seleccionan.

Haz coincidir las casillas de verificación, los botones de selección, los controles deslizantes de rango y las barras de progreso con la paleta de colores de tu sitio sin reemplazarlos por componentes personalizados.

Aplica diseño a un control deslizante de rango nativo con estados personalizados de pista, control, relleno y enfoque, a la vez que conservas la funcionalidad y la accesibilidad nativas.

Crea elementos de selección 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 bordes de tu marca o sistema de diseño.

Crear un formulario de pago que recopile los detalles de la tarjeta con los valores de autocompletado correctos y compatibilidad con la función Autocompletar

Crea un formulario de acceso con valores de autocompletado correctos y compatibilidad con la función Autocompletar.

Crea un formulario de registro con valores de autocompletado correctos y compatibilidad con la función Autocompletar.

Crea un interruptor accesible con el atributo nativo de HTML switch y recurre a una casilla de verificación con diseño cuando no sea compatible.

Crea un formulario de dirección con los atributos de autocompletado correctos y compatibilidad con la función Autocompletar.

Crea selectores personalizados cuyas opciones se posicionen de formas únicas o interesantes, en lugar de la lista tradicional de opciones apiladas.

Permite que los campos del formulario se expandan y se contraigan para adaptarse a la entrada del usuario, p.ej., 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.

Prácticas recomendadas para crear formularios web accesibles, seguros y fáciles de usar. Usa esta guía cuando crees o modifiques formularios, entradas y flujos de envío.

Usa CSS para destacar los campos de formulario que el navegador completó automáticamente y que el usuario no editó.

Implementa la función de presionar Intro para enviar en áreas de texto y entradas de una sola línea (chat, búsqueda, cambio de nombre intercalado) de forma segura para los usuarios de IME (editor de método de entrada) para evitar que se envíe texto incompleto.

Proporciona un mensaje 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 relevantes para el contexto del flujo del usuario.

Crea un componente de selección personalizado cuyas opciones puedan contener un formato HTML complejo (p.ej., imágenes, íconos y otros formatos enriquecidos) en lugar de solo texto sin formato.

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.

Verifica los números de teléfono de los usuarios y las contraseñas de un solo uso que se envían por SMS con la extracción automática de códigos y la entrada de formularios accesible.

Muestra comentarios de 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 finalizado su interacción inicial, lo que evita errores prematuros durante la carga de la página o mientras el usuario escribe.

Haz que los elementos personalizados sean accesibles de forma predeterminada, establece roles y el estado de ARIA a través del mixin de ARIA de ElementInternals, administra el enfoque con delegatesFocus y mantén las relaciones de ARIA dentro de una sola raíz de sombra.

Define, registra y administra el ciclo de vida de los elementos personalizados autónomos, lo que incluye las reglas de constructores, las devoluciones de llamada de ciclo de vida, los tiempos de actualización, el reflejo de atributos y propiedades, y las convenciones de nombres.

Haz que un control personalizado participe de forma nativa en los formularios con formAssociated y ElementInternals, enviando su propio valor, integrándose con la validación de restricciones y reaccionando al restablecimiento, la inhabilitación y el restablecimiento del estado.

Lineamientos orientados a la acción para la arquitectura moderna de HTML, la semántica, las APIs interactivas nativas (Dialog, Popover, Details), la administración del enfoque y la priorización de recursos. Usa esta guía cuando estructures documentos web, implementes superposiciones nativas o quieras optimizar el orden de carga de los recursos.

Renderiza un elemento personalizado en el servidor y, luego, hidrátalo en su lugar sin volver a renderizarlo ni mostrar un destello de contenido sin diseño.

Encapsula el DOM y los estilos de un componente con Shadow DOM, construye el árbol de manera eficiente con plantillas HTML y proyecta el contenido del consumidor con ranuras.

Aplica diseño más allá del límite de sombra con selectores :host, propiedades heredadas y personalizadas para temas, ::slotted y ::part, y capas en cascada y consultas de contenedor dentro de los componentes.

Orientación y principios transversales para crear y usar componentes web, que abarcan elementos personalizados, Shadow DOM, plantillas y ranuras, Shadow DOM declarativo, diseño en el límite de sombra, elementos personalizados asociados a formularios y requisitos de accesibilidad. Usa esta guía cuando compiles componentes de IU reutilizables, sistemas de diseño o elementos personalizados renderizados por el servidor.

Anima de forma fluida los componentes interactivos (como acordeones, menús y tarjetas expandibles) hacia y desde sus dimensiones naturales.

Calcula el tamaño de un elemento en función de su tamaño intrínseco y, al mismo tiempo, asegúrate de que se ajuste a las restricciones de diseño dadas.

Compila un componente que cambie su diseño 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 de tema.

Aplica de forma condicional ciertas reglas o declaraciones de CSS solo si el navegador admite una regla arroba determinada.

Compilar 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.

Diseños de CSS modernos, como flexbox, cuadrícula, subcuadrícula, consultas de contenedores, posicionamiento de anclas y tamaño intrínseco. Usa esta habilidad cuando diseñes componentes de IU o diseños de página responsivos.

Lineamientos orientados a la acción para la arquitectura moderna de CSS, incluidos la cascada, los selectores, el alcance, el anidamiento y los tokens de diseño. Usa esta guía cuando crees estilos o administres sistemas de diseño.

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 de forma directa y de manera adecuada para el componente.

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 superior, en lugar de usar puntos de interrupción fijos

Anima o anula propiedades de transformación de CSS individuales (p.ej., translate, rotate, scale) de forma independiente de otras propiedades de transformación en un solo elemento.

Ajusta el límite de recorte visible de un elemento para alinearlo con el borde del contenido, el borde del padding o el borde del margen, o bien un desplazamiento especificado desde cualquiera de estos, lo que ofrece un control más detallado sobre cómo se recorta el contenido.

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).

Compila una IU que se adapte al tamaño del contenedor y del viewport, incluidas las consultas de contenedores, las unidades de viewport dinámicas, las relaciones de aspecto y la tipografía responsiva.

Segmenta elementos en función de la intersección o unión de selectores y reglas @ condicionales, a la vez que minimizas la repetición.

Crea componentes que adapten la lógica visual según el contexto semántico con consultas de estilo de contenedor de CSS.

Compilar un componente cuyos estilos puedan depender de forma condicional de su propio ancho o altura, en lugar del ancho o la altura 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.

Establece el estilo de los elementos superiores de un campo de formulario (p.ej., etiquetas o conjuntos de campos) cuando el campo no sea válido.

Crea espectros visuales dinámicos o disposiciones de diseño que se adapten automáticamente a la cantidad de elementos de un grupo.

Calcula el tiempo transcurrido o restante entre fechas y horas, equilibra las unidades de duración y aplica formato a las duraciones localizadas legibles por humanos con Temporal.Duration y Intl.DurationFormat.

Modela fechas de calendario independientes de la ubicación, horas de reloj, fechas parciales (cumpleaños recurrentes, vencimientos de tarjetas de crédito) y períodos mensuales recurrentes sin desviación de zona horaria con los tipos Plain de Temporal.

Programa reuniones o eventos futuros vinculándolos explícitamente a una zona horaria geográfica de la 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 hora.

Analiza, ordena y mide intervalos entre marcas de tiempo ISO 8601 de menos de un milisegundo o de un nanosegundo sin colisiones de truncamiento de fecha con Temporal.Instant.

Muestra y calcula fechas en sistemas de calendario no gregorianos (p.ej., islámico, hebreo o chino) con precisión para los usuarios internacionales.

Cómo compilar C/C++ en WebAssembly con Emscripten

Divide el procesamiento síncrono pesado (cálculos complejos o bucles largos) o las actualizaciones del DOM para que el navegador pueda controlar la entrada del usuario y volver a pintar la pantalla.

Calcula el tiempo total que un usuario realmente pasó viendo una página, excluyendo los períodos en los que la pestaña estuvo en segundo plano.

Carga o inicializa dependencias asíncronas de forma condicional (como importar polyfills para funciones web faltantes) sin necesidad de una organización compleja en todas las dependencias de secuencias de comandos de una página.

Agrupa y limita la frecuencia de varios eventos de estadísticas, telemetría y Core Web Vitals en una sola baliza para minimizar la contención de red y reducir la carga del servidor, sin dejar de entregar actualizaciones en tiempo real.

Reduce los tiempos de renderización en las páginas web con mucho contenido (p.ej., páginas con feeds largos, muchos artículos o paneles complejos) aplazando la renderización de cualquier contenido que no sea visible de inmediato para el usuario.

Difiere las operaciones costosas, como las actualizaciones del DOM, la recuperación de datos, el seguimiento de estadísticas o el nuevo cálculo del diseño, hasta que se complete el desplazamiento para mantener un rendimiento de desplazamiento fluido.

Proporciona imágenes decorativas optimizadas (como fondos, íconos de IU o máscaras complejas) con formatos de imagen de nueva generación (como AVIF o WebP) y 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 según las capacidades del dispositivo del usuario.

Quita prioridad a las recuperaciones de datos en segundo plano que se realizan con la API de Fetch para evitar la contención de red con las solicitudes iniciadas por el usuario.

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.

Conserva los recursos del sistema y la duración de la batería pausando 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údalos justo a tiempo cuando vuelvan a aparecer.

Habilita transiciones más rápidas de regreso a las vistas visitadas anteriormente en una aplicación de una sola página (SPA) conservando su estado estructural del DOM en lugar de destruirlas y volver a crearlas en cada navegación.

Publicar y renderizar pruebas A/B, pruebas multivariables o cualquier otro experimento con JavaScript del cliente para alterar o insertar HTML, CSS y JavaScript sin que el contenido original se muestre primero antes de parpadear o destellar para mostrar el contenido del experimento

Identifica el código JavaScript de ejecución lenta y otras causas de la baja capacidad de respuesta de Interaction to Next Paint (INP).

Identifica las secuencias de comandos más responsables de los fotogramas de animación largos

Mejora el rendimiento de la carga de páginas recuperando o renderizando previamente las páginas que es probable que el usuario visite a continuación.

Difiere la descarga de recursos de video y audio fuera de pantalla, incluidas las imágenes de póster de video y los datos multimedia precargados, hasta que el reproductor multimedia se acerque al viewport para conservar el ancho de banda y reducir la contención de red durante la carga inicial de la página.

Mide el tiempo que tardan las interacciones de los usuarios y las navegaciones del cliente en renderizar nuevas actualizaciones de contenido en la pantalla.

Optimiza la prioridad de carga de las imágenes candidatas para Largest Contentful Paint (LCP) y quita prioridad a las imágenes no esenciales para reducir los retrasos en la carga de recursos esenciales.

Optimiza la prioridad relativa del contenido precargado para reducir los retrasos en la carga de recursos críticos.

Optimiza la prioridad de carga de las secuencias de comandos potenciando las asíncronas críticas y quitando prioridad a las no esenciales o las que se encuentran al final del cuerpo para mejorar la secuenciación y reducir los retrasos.

Haz que las interacciones sean más rápidas y responsivas (reduciendo las puntuaciones de Interaction to Next Paint [INP]) evitando que se vuelva a calcular el diseño en diseños complejos, como paneles con muchos datos o cuadrículas de estilo de hoja de cálculo.

Actualiza de forma declarativa una página con contenido que se transmite más adelante en el mismo documento HTML o a través de APIs de JavaScript imperativas.

Lineamientos prácticos para optimizar las aplicaciones web modernas. Usa esta guía cuando audites el rendimiento, optimices las métricas de carga, corrijas las interacciones lentas y optimices Core Web Vitals (LCP, INP y CLS).

Realiza un seguimiento confiable de las estadísticas, las Core Web Vitals, los errores y los datos de telemetría durante toda la visita del usuario a la página, y aplaza el envío de los datos hasta que el usuario abandone la página.

Usa imágenes optimizadas para la resolución en pseudoelementos de CSS (como ::before y ::after) para reducir la cantidad de nodos del DOM.

Programa tareas con diferentes prioridades para garantizar que el trabajo crítico se ejecute primero mientras se pospone el trabajo en segundo plano.

Lineamientos de programación prácticos para crear aplicaciones web accesibles, que abarcan HTML semántico, administración de enfoque, formularios, contenido multimedia y pruebas. Usa esta habilidad cuando audites o implementes funciones de accesibilidad, navegación con teclado o ARIA.

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 de error solo después de la interacción, lo que refleja la experiencia visual.

Usa el contenido generado por CSS (::before/::after) de manera que siga siendo accesible, incluido el texto alternativo para el contenido decorativo.

Respeta la preferencia de escala de texto del sistema operativo para una página, de modo que los tamaños de fuente, el diseño y las mediciones basadas en rem sigan la configuración de accesibilidad del usuario.

Compara y valida de forma segura los orígenes web y los sitios en mensajes y URLs entre documentos sin un análisis de cadenas propenso a errores.

Establece secretos compartidos con el encapsulamiento de clave pública o el acuerdo de claves, incluida la protección híbrida y poscuántica, y encripta los datos sensibles en el navegador con la encriptación autenticada.

Accede a los recursos de la red local o la interfaz de bucle invertido de un usuario desde una aplicación web pública.

Autentica a un usuario recurrente con una llave de acceso para el acceso principal.

Registra de forma silenciosa una llave de acceso para un usuario existente después de que acceda correctamente con una contraseña.

Permite que los usuarios vean y administren las llaves de acceso registradas en su cuenta.

Verifica la identidad de un usuario que accedió con sus llaves de acceso existentes antes de realizar una acción sensible.

Registra una llave de acceso para una cuenta de usuario existente.

Orientación integral y principios transversales para implementar WebAuthn y llaves de acceso en aplicaciones web. Usa esta guía cuando gestiones el registro, la autenticación, la administración o la nueva autenticación de llaves de acceso.

Evita los ataques de XSS basados en el DOM definiendo una política de Trusted Types para limpiar el HTML no confiable, usando la política cuando se escribe en receptores del DOM como innerHTML y aplicando Trusted Types a través de la Política de seguridad del contenido.

Autentica a los usuarios recurrentes en el lugar con sus llaves de acceso o contraseñas guardadas antes de navegar a una página de acceso o interrumpir su flujo de trabajo.

Restringe una página o un trabajador para que se comunique solo con una lista de entidades permitidas explícita de extremos de red para evitar solicitudes de terceros no autorizadas y el robo de datos del cliente.

Analiza y muestra de forma segura el contenido HTML no confiable de la entrada del usuario quitando los elementos y atributos no seguros.

Verifica la integridad criptográfica de las secuencias de comandos, las hojas de estilo, las fuentes y las imágenes externas cargadas desde orígenes de terceros, y controla si esas solicitudes envían credenciales o URLs de referencia.

Firma y verifica mensajes, tokens o artefactos en el navegador con claves asimétricas clásicas o resistentes a la computación cuántica (poscuánticas) para garantizar la integridad y autenticidad de los datos.

Verifica que un usuario sea propietario de una dirección de correo electrónico durante la creación, el acceso o la recuperación de la cuenta sin enviar una contraseña de un solo uso ni un correo electrónico con un vínculo mágico.

Lineamientos de seguridad preventiva para desarrolladores web (XSS, CSP, cookies y aislamiento de origen cruzado) Usa esta habilidad para guiar el proceso de auditoría, prueba e implementación de políticas de seguridad de forma segura.

Lineamientos orientados a la acción para que los desarrolladores web implementen la privacidad como prioridad en el diseño, la minimización de datos, las auditorías de terceros y el manejo seguro de los datos. Usa esta habilidad cuando diseñes aplicaciones, integres servicios de terceros, manejes datos de usuarios o configures encabezados de seguridad.

Transfiere una app web instalada a un origen nuevo y, al mismo tiempo, conserva la configuración del usuario y los accesos directos a nivel del SO.

Detecta el idioma del contenido generado por usuarios o del contenido del sitio que ya está presente.

Ejecuta inferencias de lenguaje natural integradas en el dispositivo en el navegador con la API de Prompt, con resultados de transmisión, respuestas JSON estructuradas y administración de sesiones de varios turnos.

Resume contenido de texto con la API de Summarizer integrada en el dispositivo.

Traduce texto entre idiomas con la API de Translator integrada en el dispositivo.

Exponer la funcionalidad del cliente como herramientas para los agentes de IA anotando formularios HTML estándar con atributos de WebMCP

Registra de forma programática funciones de JavaScript del cliente como herramientas para agentes de IA con la API imperativa de WebMCP.

Usa esta guía para implementar WebMCP (Protocolo de contexto del modelo web) en aplicaciones de navegador, lo que expone la funcionalidad del cliente como herramientas para los agentes de IA a través de APIs declarativas o imperativas.