Guias do Modern Web Guidance

Melhorar a visibilidade da barra de rolagem para usuários que preferem interfaces de alto contraste

Aplique efeitos visuais personalizados com sombreadores WebGL ao conteúdo HTML.

Orientações de cores para a Web, incluindo requisitos de contraste, esquemas de cores claras e escuras, modo de cores forçadas e geração de tons e sombras com base em uma cor de base.

Corte elementos e o conteúdo deles em qualquer formato livre, como um símbolo, uma pincelada ou uma textura orgânica, para criar designs mais expressivos.

Adicione decorações de texto, como sublinhados, linhas superiores, tachados ou formas totalmente personalizadas, com animações de revelação, deslocamentos personalizados e inserções finais, além de pulo de tinta flexível.

Personalizar a cor ou a espessura de uma barra de rolagem

Implementar o suporte ao modo escuro de forma que respeite a preferência do usuário por tema claro/escuro e adapte a interface do navegador (por exemplo, barras de rolagem, controles de formulário etc.)

Integre elementos HTML interativos a uma cena 3D.

Selecione uma cor de texto legível com contraste suficiente em uma cor de fundo dinâmica.

Faça com que cada linha de um título ou lockup de várias linhas tenha a mesma largura, como na tipografia de estilo pôster ou de títulos empilhados. Ao contrário do texto justificado, o texto em si é dimensionado de acordo com a largura, em vez de o espaçamento ser esticado.

Capture e exporte conteúdo HTML dinâmico como imagens ou frames de vídeo no Canvas.

Expor o conteúdo renderizado em uma tela aos recursos do navegador, como tecnologias adaptativas, tradução ou modo de leitura.

Melhore o layout e a legibilidade de textos curtos e independentes, como títulos de até algumas linhas, permitindo que o navegador aplique quebras de linha equilibradas ao ajustar o texto.

Alinhe verticalmente com precisão textos de qualquer fonte. Por exemplo, preenchimento visual exatamente igual acima e abaixo do texto ou alinhamento do texto perfeitamente nivelado com ícones ou imagens adjacentes.

Combine várias formas para criar recortes complexos ou efeitos de "knockout" em elementos, como adicionar um entalhe a um elemento.

Aplique um gradiente de transparência às bordas do conteúdo para indicar outras áreas roláveis ou ocultar texto com paywall.

Use CSS para personalizar a interface gerada pelo navegador, como seleção de texto, barras de rolagem, controles de formulário e seletores, em vez de recriá-la com elementos personalizados.

Práticas recomendadas de tipografia para a Web, incluindo unidades de tamanho de fonte, altura da linha, ajuste e equilíbrio de texto e tipo fluido que se adapta à janela de visualização.

Efeitos visuais com CSS, como sombras em camadas, modos de mesclagem, gradientes com interpolação de cores previsível e padrões como listras, tabuleiros de xadrez, pontos e gráficos de pizza criados apenas com gradientes.

Defina estilos de fonte para que o texto permaneça legível e visualmente consistente no caso de uma troca entre a fonte preferida e uma das substitutas (ou vice-versa).

Defina estilos de fonte para que o texto permaneça legível e visualmente consistente em situações em que várias fontes são usadas para renderizar um único bloco de texto.

Aplique padrões realistas de desgaste e textura aos elementos para dar a eles uma aparência orgânica, envelhecida ou de material físico.

Crie uma barra de progresso de rolagem, um rastreador de progresso em etapas ou qualquer recurso visual que mostre o quanto o usuário rolou em uma página ou seção.

Crie um carrossel de slides com imagens ou outros elementos visuais, em que cada slide é animado ao entrar, centralizar ou sair do scroller. Por exemplo, os slides podem aparecer/desaparecer gradualmente, girar, aumentar ou diminuir de tamanho etc.

Forçar certos elementos a ficarem no modo claro ou escuro (por exemplo, blocos de código, players de mídia etc.), independentemente do esquema de cores da página.

Crie dicas de ferramentas e popovers com setas direcionais (ou outro estilo visual) que apontam automaticamente para o caminho correto quando o elemento muda para uma posição de fallback.

Crie um recurso de puxar para revelar que permita ao usuário puxar a tela para baixo para revelar mais conteúdo, como uma barra de pesquisa.

Crie uma tabela de dados que apresente dados tabulares com a semântica de cabeçalho adequada e que permaneça legível e navegável em telas pequenas e com tecnologias adaptativas.

Crie botões ou widgets flutuantes (voltar ao topo, rolar até o final, iniciadores de chat etc.) que aparecem e desaparecem com base na rolagem do usuário.

Crie sobreposições de sombra de rolagem, gradientes ou indicadores de seta direcional que aparecem apenas quando há mais conteúdo para rolar nessa direção.

Anime suavemente um cabeçalho fixo ou uma capa de página inteira ao rolar para encolher dinamicamente, ganhar sombras e transformar o layout em uma distância de rolagem predefinida.

Crie cabeçalhos de seção ou barras de navegação fixos que se transformam visualmente quando estão "fixados" na parte de cima, mudando o esquema de cores ou ganhando uma sombra.

Exiba e gerencie ícones que podem ser definidos e parametrizados no CSS, são rápidos de carregar, nítidos em qualquer resolução e são expostos (ou ocultados) corretamente para tecnologias adaptativas.

Posicione menus suspensos, menus flutuantes ou painéis de ação contextual vinculados a um botão de acionamento para que eles invertam automaticamente os eixos nas bordas da janela de visualização em vez de serem cortados.

Crie um componente de card que adapte a apresentação ao espaço e ao conteúdo disponíveis.

Crie um componente de menu que mostre uma lista de opções ou ações, com suporte para submenus aninhados.

Destacar a seção visível de uma página em um menu de navegação

Crie uma barra de progresso estilizada que mostre a conclusão de uma tarefa ou processo, em estados determinados e indeterminados.

Crie um componente de card de informações que mostre uma prévia estruturada e interativa da página para onde um determinado tipo de link (por exemplo, um perfil de usuário) vai direcionar quando o cursor passar por cima dele.

Crie tutoriais de integração persistentes usando sobreposições nativas vinculadas que permanecem abertas durante a interação do usuário.

Crie notificações de aviso e sobreposição não intrusivas para mensagens persistentes e empilháveis e comunicação de estado.

Crie um componente de alternância do modo escuro que permita aos usuários substituir a preferência de esquema de cores do sistema para o site atual.

Crie um componente de caixa de diálogo modal ou não modal que seja acessível, gerencie o foco de maneira adequada e possa ser dispensado da maneira que os usuários esperam em cada plataforma.

Crie um ícone de carregamento que comunique o estado de ocupado a todos os usuários, respeite as preferências de movimento reduzido e tenha uma animação eficiente.

Crie um componente de gaveta de navegação que, quando acionado por um botão de menu, deslize para dentro a partir do lado sobreposto ao conteúdo da página atual e deslize para fora quando dispensado (ao deslizar para fora, tocar fora ou pressionar Esc).

Crie um componente de anel de progresso que represente visualmente o status de conclusão de uma tarefa ou processo, com suporte para conteúdo no centro e estilo consistente com a marca.

Crie uma navegação hierárquica em tela cheia que permita aos usuários detalhar visualizações aninhadas e deslizar ou voltar para retornar, com o histórico de navegação sincronizado.

Estilize caixas de seleção, incluindo ícones personalizados, layout, cores, animações de marcar/desmarcar, preservando a funcionalidade e a acessibilidade nativas.

Crie efeitos de aparecimento gradual, aumento de escala ou outros efeitos complexos de revelação em elementos conforme eles entram e saem da porta de rolagem (ou janela de visualização) enquanto o usuário está rolando.

Fazer a transição de um elemento de forma integrada entre duas posições de elementos de destino. Por exemplo, mover um sublinhado de guia selecionada entre a guia selecionada anteriormente e a atual.

Ocultar/mostrar elementos de forma suave à medida que são adicionados/removidos do DOM ou que os valores de exibição são alternados.

Anima elementos como caixas de diálogo, pop-overs e dicas ao entrar/sair da camada superior.

Suporte para arrastar e mover um elemento flutuante pela página.

Crie efeitos baseados em rolagem (como paralaxe) em que as camadas de primeiro plano e de fundo se movem em velocidades diferentes, criando uma sensação de profundidade conforme o usuário rola a página.

Destaque visualmente o item não interativo ajustado por ajuste de rolagem em carrosséis, galerias ou experiências de deslizar em tela cheia. Por exemplo, expandir um card quando ele é fixado ou revelar conteúdo oculto.

Verifique se o estado crítico da página está carregado e estável antes de iniciar uma transição de visualização entre documentos. Isso significa que os estilos CSS essenciais são carregados e aplicados, o JavaScript essencial é carregado e executado, e o HTML visível para a visualização inicial da página pelo usuário é analisado antes da execução da transição.

Alterne o tempo de animação ou transição entre elementos irmãos para que cada um comece após um atraso calculado com base na posição dele na lista de irmãos.

Crie transições suaves e perfeitas entre navegações nas páginas inteiras, como cross-fades, efeitos de revelação personalizados ou transformação de conteúdo de uma página para a próxima.

Conecte um botão de forma declarativa a qualquer elemento para acionar ações personalizadas e específicas do aplicativo usando comandos de botão declarativos, comandos de invocador, comandos de botão, comandos personalizados ou ações de alternância declarativas.

Alternar a visibilidade de uma caixa de diálogo ou pop-over de um botão sem escrever JavaScript.

Anima as mudanças de estado visual para refletir a direção do fluxo de navegação do usuário, como deslizar o novo conteúdo da direita ao avançar ou da esquerda ao retornar para uma tela anterior.

Faça a transição de um grupo de elementos semelhantes simultaneamente usando a mesma lógica de transição, como remover um produto de um carrinho de compras e fazer com que todos os outros produtos sejam animados para as novas posições.

Destaque intervalos de texto arbitrários em uma página, como resultados da pesquisa, erros de ortografia ou cursores de edição colaborativa.

Crie efeitos de revelação interativos, como um destaque que segue o ponteiro do usuário para revelar detalhes em uma imagem ou seção da interface.

Mostre uma prévia do efeito de um botão quando um usuário demonstrar interesse (por exemplo, passar o cursor, focar ou tocar e manter pressionado), mas antes de clicar.

Criar uma caixa de diálogo modal que pode ser fechada com um clique ou toque fora dela

Anime a interface com transições CSS, animações, animações de rolagem e transições de visualização, mantendo o movimento no compositor e respeitando as preferências de movimento reduzido.

Mover ou redefinir o elemento pai de um elemento DOM sem perder o estado importante do elemento, como estados de interatividade (:focus/:active), estado de carregamento de <iframe>, estado de animação/transição etc.

Manter uma caixa de diálogo modal, um elemento em tela cheia ou um popover nativo visivelmente aberto e funcionalmente ativo quando o nó DOM subjacente é movido ou reatribuído no DOM.

Crie efeitos de animação e transição personalizados com base na física, como pulo e mola, que parecem mais naturais e envolventes do que as curvas de easing tradicionais.

Crie uma caixa de diálogo modal que possa ser fechada por ações padrão do usuário específicas da plataforma, como pressionar a tecla Esc em plataformas de computador ou um gesto de "voltar" ou "dispensar" em plataformas móveis.

Impedir que a página subjacente role enquanto uma caixa de diálogo modal está aberta.

Conecte visualmente elementos persistentes em diferentes estados de página ou navegações em um aplicativo de página única (SPA, na sigla em inglês) (por exemplo, expandindo uma miniatura de produto em uma imagem principal sem margens) transformando suavemente o tamanho, a posição ou outras propriedades de estilo.

Anima as mudanças de estado em um único componente (um card, uma lista, um painel ou outra subárvore) enquanto o restante da página permanece interativo e outras transições são executadas simultaneamente.

Ofereça feedback visual em tempo real em elementos da interface vinculados enquanto o usuário rola o conteúdo alinhado, antes que o gesto de rolagem seja concluído.

Sincronize indicadores de navegação, painéis de conteúdo vinculado e rastreamento de análise com o item fixado ativamente em um contêiner rolável.

Anima propriedades visuais em um elemento de destino, como esmaecer um plano de fundo, mudar uma cor de fundo ou criar experiências de scrollytelling, impulsionadas inteiramente pela posição da porta de rolagem de um elemento completamente diferente.

Oculte o conteúdo da visualização usando padrões como acordeões, guias e seções "Leia mais", garantindo que o texto oculto seja revelado durante as pesquisas nativas "Localizar na página", permitindo a indexação do mecanismo de pesquisa, oferecendo suporte a fragmentos do URL de links diretos e mantendo a acessibilidade ARIA.

Crie uma lista rolável de elementos (por exemplo, um carrossel de imagens ou uma conversa de chat) que possa ser mostrada com um elemento específico visível na renderização inicial.

Mostre uma dica ou informações complementares quando um usuário passar o cursor, focar ou tocar e manter pressionado um elemento interativo, sem precisar de um clique.

Implementar uma navegação espacial acessível usando teclas de seta que funcionem corretamente em diferentes modos de layout (grade etc.)

Permita que os usuários realizem ações em itens de uma lista (remover, arquivar, marcar como lido etc.) com um gesto de deslizar horizontal, para que possam processar entradas rapidamente sem tocar em um controle separado.

Permita que os usuários deslizem horizontalmente em um item de lista ou painel de conteúdo para revelar botões de ação contextual ou um menu lateral sem acionar uma ação automaticamente.

Acione efeitos visuais, animações ou mudanças de foco em um elemento de destino somente após a conclusão de uma rolagem programática suave para esse elemento.

Permita que os usuários movam ou rolem livremente superfícies bidimensionais, como mapas, imagens ampliadas, telas infinitas ou grandes grades de dados, em ambas as direções (seja na diagonal ou mudando de direção no meio do gesto) sem que o gesto seja bloqueado em um único eixo horizontal ou vertical.

Crie um componente de seleção personalizado com um menu suspenso animado. Por exemplo, o menu aparece gradualmente ou desliza para a visualização, ou as opções são animadas ao serem selecionadas.

Combine caixas de seleção, botões de opção, controles deslizantes de intervalo e barras de progresso com a paleta de cores do seu site sem precisar substituí-los por componentes personalizados.

Estilize um controle deslizante nativo com estados personalizados de faixa, botão, preenchimento e foco, preservando a funcionalidade e a acessibilidade nativas.

Crie elementos de seleção personalizados em que o botão, o seletor, o ícone de seta e a marca de seleção combinam perfeitamente com a tipografia, as cores, o espaçamento e os tratamentos de borda da sua marca ou do seu sistema de design.

Crie um formulário de pagamento que colete detalhes do cartão com valores de preenchimento automático corretos e suporte para preenchimento automático.

Crie um formulário de login com valores de preenchimento automático corretos e suporte para preenchimento automático.

Crie um formulário de inscrição com valores de preenchimento automático corretos e suporte para preenchimento automático.

Crie um interruptor acessível com o atributo de interruptor HTML nativo, usando uma caixa de seleção estilizada quando não houver suporte.

Crie um formulário de endereço com os atributos de preenchimento automático corretos e suporte ao preenchimento automático.

Crie seletores personalizados com opções posicionadas de maneiras únicas ou interessantes, em vez da tradicional lista empilhada de opções.

Permita que os campos do formulário aumentem e diminuam para se ajustar à entrada do usuário, por exemplo, conforme o usuário digita ou seleciona uma opção diferente. Aplique limites de tamanho máximo e mínimo para criar campos de formulário dinâmicos e responsivos que se adaptem ao design da página.

Práticas recomendadas para criar formulários da Web acessíveis, seguros e fáceis de usar. Use este guia ao criar ou modificar formulários, entradas e fluxos de envio.

Use CSS para destacar os campos de formulário que foram preenchidos automaticamente pelo navegador e não editados pelo usuário.

Implemente o envio com Enter em áreas de texto e entradas de linha única (chat, pesquisa, renomeação inline) de forma segura para usuários de IME (editor de método de entrada) para evitar o envio de texto incompleto.

Forneça uma mensagem de erro para campos de formulário obrigatórios que foram ignorados ou deixados em branco somente após a interação do usuário, para evitar erros preventivos e garantir que o feedback seja oportuno e contextualmente relevante para o fluxo do usuário.

Crie um componente de seleção personalizado com opções que podem conter formatação HTML complexa (por exemplo, imagens, ícones e outras formatações ricas) em vez de apenas texto simples.

Valide se uma opção não padrão foi escolhida em um menu de seleção somente depois que o usuário interagir com o controle.

Verifique os números de telefone dos usuários e as senhas de uso único enviadas por SMS com extração automática de código e entrada de formulário acessível.

Mostre o feedback de validação do campo do formulário (por exemplo, complexidade da senha ou requisitos de formato de e-mail) somente depois que o usuário terminar a interação inicial, evitando erros prematuros no carregamento de página ou enquanto o usuário estiver digitando.

Torne os elementos personalizados acessíveis por padrão, definindo papéis e o estado ARIA usando o mixin ARIA ElementInternals, gerenciando o foco com delegatesFocus e mantendo as relações ARIA em uma única raiz de sombra.

Defina, registre e gerencie o ciclo de vida de elementos personalizados autônomos, incluindo regras de construtor, callbacks do ciclo de vida, tempo de upgrade, reflexão de atributos/propriedades e convenções de nomenclatura.

Faça com que um controle personalizado participe nativamente de formulários com formAssociated e ElementInternals, enviando o próprio valor, integrando-se à validação de restrições e reagindo à redefinição, desativação e restauração de estado.

Diretrizes práticas para arquitetura HTML moderna, semântica, APIs interativas nativas (Dialog, Popover, Details), gerenciamento de foco e priorização de recursos. Use este guia ao estruturar documentos da Web, implementar sobreposições nativas ou otimizar a ordem de carregamento de recursos.

Renderize um elemento personalizado no servidor e, em seguida, hidrate-o no local sem renderizar novamente ou exibir conteúdo sem estilo.

Encapsule o DOM e os estilos de um componente com o Shadow DOM, construa a árvore de forma eficiente com modelos HTML e projete o conteúdo do consumidor com slots.

Estilize além do limite de sombra com seletores :host, propriedades herdadas e personalizadas para temas, ::slotted e ::part, além de camadas em cascata e consultas de contêiner dentro de componentes.

Orientação e princípios transversais para criar e usar componentes da Web, incluindo elementos personalizados, Shadow DOM, modelos e slots, Shadow DOM declarativo, estilo além do limite de sombra, elementos personalizados associados a formulários e requisitos de acessibilidade. Use este guia ao criar componentes de interface reutilizáveis, sistemas de design ou elementos personalizados renderizados pelo servidor.

Anime componentes interativos (como acordeões, menus e cards expansíveis) de maneira suave para as dimensões naturais deles.

Calcule o tamanho de um elemento com base no tamanho intrínseco dele, garantindo que ele se ajuste às restrições de design fornecidas.

Crie um componente que mude o estilo com base no estado de um dos elementos filhos. Por exemplo, um componente que é renderizado no modo claro ou escuro com base em uma alternância de tema marcada (ou não).

Aplicar condicionalmente determinadas regras ou declarações CSS somente se uma determinada regra at for compatível com o navegador.

Crie um componente que mude o layout com base na presença (ou ausência) de elementos filhos específicos. Por exemplo, se o componente tiver uma imagem, use um layout de colunas. Caso contrário, use um layout de coluna única.

Layouts CSS modernos, como flexbox, grade, subgrade, consultas de contêiner, posicionamento de âncora e dimensionamento intrínseco. Use essa habilidade ao projetar componentes de interface ou layouts de página responsivos.

Diretrizes práticas para arquitetura CSS moderna, incluindo cascata, seletores, escopo, aninhamento e tokens de design. Use este guia ao criar estilos ou gerenciar sistemas de design.

Defina tokens de design de ordem superior, como modos de densidade (compacto, confortável, espaçoso) ou temas, e faça com que os componentes descendentes reajam às mudanças diretamente e de maneira adequada.

Escalone itens como tamanho da fonte, espaçamento e tamanhos de mídia de forma suave com base no tamanho do contêiner pai, em vez de usar pontos de interrupção fixos

Anima ou substitui propriedades de transformação CSS individuais (por exemplo, translate, rotate, scale) de forma independente de outras propriedades de transformação em um único elemento.

Ajuste o limite de corte visível de um elemento para se alinhar à borda do conteúdo, do padding ou da borda, ou a um deslocamento especificado de qualquer um deles, oferecendo um controle mais refinado sobre como o conteúdo é cortado.

Reduza a repetição excessiva de estilos encapsulando a lógica de estilo complexa ou dinâmica em funções reutilizáveis (como uma função que calcula um gradiente com base em um conjunto de parâmetros de entrada).

Crie uma interface que se adapte ao tamanho do contêiner e da janela de visualização, incluindo consultas de contêiner, unidades de janela de visualização dinâmicas, proporções e tipografia responsiva.

Segmente elementos com base na interseção ou união de seletores e regras @ condicionais, minimizando a repetição.

Crie componentes que adaptam a lógica visual com base no contexto semântico usando consultas de estilo de contêiner CSS.

Crie um componente com estilos que podem depender condicionalmente da própria largura ou altura, em vez da largura ou altura da janela de visualização. Por exemplo, um componente de card que pode mudar de layout dependendo do tamanho ou um botão de call-to-action que pode mostrar um texto de ajuda condicional com base na largura.

Estilize os elementos pai de um campo de formulário (por exemplo, rótulos ou conjuntos de campos) quando o campo for inválido.

Crie espectros visuais dinâmicos ou layouts que se adaptam automaticamente ao número de elementos em um grupo.

Calcule o tempo decorrido ou restante entre datas e horas, equilibre as unidades de duração e formate durações localizadas legíveis por humanos usando Temporal.Duration e Intl.DurationFormat.

Modele datas de calendário, horários, datas parciais (aniversários recorrentes, vencimentos de cartão de crédito) e intervalos mensais recorrentes sem desvio de fuso horário usando tipos simples temporais.

Agende reuniões ou eventos futuros vinculando-os explicitamente a um fuso horário geográfico da IANA para que os horários dos eventos permaneçam precisos, independentemente das transições do horário de verão, horas "puladas" ou "repetidas" durante as mudanças de horário.

Analise, classifique e meça intervalos entre carimbos de data/hora ISO 8601 de submilissegundos ou nanossegundos sem colisões de truncamento de data usando Temporal.Instant.

Exibir e calcular datas em sistemas de calendário não gregorianos (por exemplo, islâmico, hebraico ou chinês) com precisão para usuários internacionais.

Compilar C/C++ para WebAssembly usando o Emscripten

Divida o processamento síncrono pesado (cálculos complexos e/ou loops longos) ou as atualizações do DOM para permitir que o navegador processe a entrada do usuário e repinte a tela.

Calcule o tempo total que um usuário realmente passou visualizando uma página, excluindo os períodos em que a guia estava em segundo plano.

Carregar ou inicializar condicionalmente dependências assíncronas (como importar polyfills para recursos da Web ausentes) sem exigir uma orquestração complexa em todas as dependências de script de uma página.

Debounce e lote de vários eventos de análise, telemetria e Core Web Vitals em um único beacon para minimizar a contenção de rede e reduzir a carga do servidor, sem deixar de fornecer atualizações em tempo real.

Reduza os tempos de renderização em páginas da Web com muito conteúdo (por exemplo, páginas com feeds longos, muitos artigos ou painéis complexos) adiando a renderização de qualquer conteúdo que não esteja imediatamente visível para o usuário.

Adie operações caras, como atualizações de DOM, busca de dados, rastreamento de análises ou recálculo de layout, até que a rolagem seja concluída para manter o desempenho de rolagem suave.

Ofereça imagens decorativas otimizadas (como planos de fundo, ícones de interface ou máscaras complexas) fornecendo simultaneamente formatos de imagem de última geração (como AVIF ou WebP) com várias densidades de pixels (como 1x e 2x) para que o navegador possa negociar dinamicamente a melhor combinação de tamanho de arquivo e qualidade visual para os recursos do dispositivo do usuário.

Remova a prioridade das buscas de dados em segundo plano feitas com a API Fetch para evitar conflitos de rede com solicitações iniciadas pelo usuário.

Determinar de forma confiável se uma página foi carregada inicialmente em segundo plano, mesmo nos casos em que o script é carregado de forma assíncrona depois que o usuário coloca a página em primeiro plano.

Economize recursos do sistema e bateria pausando a execução do JavaScript em segundo plano (como animações <canvas>, renderização WebGL ou sondagem de dados WebSocket de alta frequência) quando o componente estiver fora da tela e retome-as no momento certo quando ele voltar a aparecer.

Permita transições mais rápidas de volta para visualizações visitadas anteriormente em um aplicativo de página única (SPA, na sigla em inglês), preservando o estado estrutural do DOM em vez de destruir e recriar as visualizações em cada navegação.

Exiba e renderize testes A/B, testes multivariáveis ou outros experimentos usando JavaScript do lado do cliente para alterar ou injetar HTML, CSS e JavaScript sem que o conteúdo original apareça primeiro antes de piscar ou piscar para mostrar o conteúdo do experimento.

Identifique JavaScripts lentos e outras causas de baixa capacidade de resposta da Interaction to Next Paint (INP).

Identificar os scripts mais responsáveis por frames longos de animação

Melhore o desempenho de carregamento de páginas pré-buscando ou pré-renderizando as páginas que o usuário provavelmente vai acessar em seguida.

Adie o download de recursos de vídeo e áudio fora da tela, incluindo imagens de pôster de vídeo e dados de mídia pré-carregados, até que o player de mídia se aproxime da janela de visualização para economizar largura de banda e reduzir a contenção de rede durante o carregamento inicial da página.

Meça o tempo que as interações do usuário e as navegações do lado do cliente levam para renderizar novas atualizações de conteúdo na tela.

Otimize a prioridade de carregamento das imagens candidatas à Largest Contentful Paint (LCP) e reduza a prioridade das imagens não críticas para reduzir os atrasos no carregamento de recursos críticos.

Otimize a prioridade relativa do conteúdo pré-carregado para reduzir os atrasos no carregamento de recursos críticos.

Otimize a prioridade de carregamento de scripts impulsionando scripts assíncronos críticos e reduzindo a prioridade de scripts não essenciais ou de corpo tardio para melhorar o sequenciamento e reduzir atrasos.

Torne as interações mais rápidas e responsivas (reduzindo as pontuações de Interaction to Next Paint (INP)) evitando novos cálculos de layout em layouts complexos, como painéis com muitos dados ou grades no estilo de planilha.

Atualize uma página de forma declarativa com conteúdo transmitido posteriormente para o mesmo documento HTML ou usando APIs JavaScript imperativas.

Diretrizes práticas para otimizar aplicativos da Web modernos. Use este guia ao auditar o desempenho, otimizar as métricas de carregamento, corrigir interações lentas e otimizar as Core Web Vitals (LCP, INP, CLS).

Rastreie de forma confiável as análises, as Core Web Vitals, os erros e os dados de telemetria durante toda a visita do usuário à página e adie o envio dos dados até que o usuário saia da página.

Use imagens com resolução otimizada em pseudoelementos CSS (como ::before e ::after) para reduzir o número de nós do DOM.

Programe tarefas com prioridades diferentes para garantir que o trabalho crítico seja executado primeiro, enquanto o trabalho em segundo plano é adiado.

Diretrizes de programação práticas para criar aplicativos da Web acessíveis, abrangendo HTML semântico, gerenciamento de foco, formulários, mídia e testes. Use essa habilidade ao auditar ou implementar recursos de acessibilidade, navegação pelo teclado ou ARIA.

Sincronize os estados de acessibilidade programática (como aria-invalid) com o estado visual :user-invalid para garantir que os usuários de leitores de tela recebam feedback de erro somente após a interação, espelhando a experiência visual.

Use o conteúdo gerado por CSS (::before/::after) de maneiras que permaneçam acessíveis, incluindo texto alternativo para conteúdo decorativo.

Respeite a preferência de escala de texto do sistema operacional para uma página, de modo que os tamanhos de fonte, o layout e as medidas baseadas em rem sigam as configurações de acessibilidade do usuário.

Compare e valide origens da Web e sites com segurança em mensagens e URLs entre documentos sem análise de strings propensa a erros.

Estabeleça secrets compartilhados usando encapsulamento de chave pública ou acordo de chave, incluindo proteção híbrida e pós-quântica, e criptografe dados sensíveis no navegador com criptografia autenticada.

Acessar recursos na rede local ou na interface de loopback de um usuário em um aplicativo da Web público.

Autenticar um usuário recorrente com uma chave de acesso para o login principal.

Registrar silenciosamente uma chave de acesso para um usuário atual após um login com senha.

Permitir que os usuários vejam e gerenciem as chaves de acesso registradas na conta.

Verifique a identidade de um usuário conectado usando as chaves de acesso dele antes de uma ação sensível.

Registrar uma chave de acesso para uma conta de usuário atual.

Orientação abrangente e princípios transversais para implementar o WebAuthn e as chaves de acesso em aplicativos da Web. Use este guia ao lidar com o registro, a autenticação, o gerenciamento ou a reautenticação de chaves de acesso.

Evite ataques de XSS baseados em DOM definindo uma política de Tipos Confiáveis para limpar HTML não confiável, usando a política ao gravar em coletores de DOM, como innerHTML, e aplicando Tipos Confiáveis pela Política de Segurança de Conteúdo.

Autentique usuários recorrentes com as chaves de acesso ou senhas salvas antes de navegar para uma página de login ou interromper o fluxo de trabalho.

Restringir uma página ou um worker para se comunicar apenas com uma lista de permissões explícita de endpoints de rede para evitar solicitações não autorizadas de terceiros e exfiltração de dados do lado do cliente.

Analise e mostre com segurança conteúdo HTML não confiável de entradas do usuário removendo elementos e atributos não seguros.

Verifique a integridade criptográfica de scripts, folhas de estilo, fontes e imagens externas carregadas de origens de terceiros e controle se essas solicitações enviam credenciais ou URLs de referência.

Assine e verifique mensagens, tokens ou artefatos no navegador usando chaves assimétricas clássicas ou resistentes à computação quântica (pós-quânticas) para garantir a integridade de dados e a autenticidade dos dados.

Verifique se um usuário é o proprietário de um endereço de e-mail durante a criação, o login ou a recuperação da conta sem enviar uma senha de uso único ou um e-mail com link mágico.

Diretrizes de segurança preventiva para desenvolvedores web (XSS, CSP, cookies, isolamento de origem cruzada). Use essa habilidade para orientar o processo de auditoria, teste e implantação de políticas de segurança com segurança.

Diretrizes práticas para desenvolvedores web implementarem privacidade desde a concepção, minimização de dados, auditorias de terceiros e tratamento seguro de dados. Use essa habilidade ao projetar aplicativos, integrar serviços de terceiros, processar dados de usuários ou configurar cabeçalhos de segurança.

Transfira um app da Web instalado para uma nova origem, preservando a configuração do usuário e os atalhos no nível do SO.

Detectar o idioma do conteúdo gerado pelo usuário ou do conteúdo do site já presente.

Execute inferência de linguagem natural no dispositivo no navegador usando a API Prompt, com saída de streaming, respostas JSON estruturadas e gerenciamento de sessões de várias interações.

Resumir o conteúdo de texto usando a API Summarizer no dispositivo.

Traduza textos entre idiomas usando a API Translator no dispositivo.

Exponha funcionalidades do lado do cliente como ferramentas para agentes de IA anotando formulários HTML padrão com atributos do WebMCP.

Registre de forma programática funções JavaScript do lado do cliente como ferramentas para agentes de IA usando a API imperativa do WebMCP.

Use este guia para implementar o WebMCP (Protocolo de Contexto de Modelo da Web) em aplicativos de navegador, expondo a funcionalidade do lado do cliente como ferramentas para agentes de IA usando APIs declarativas ou imperativas.