Casos de uso da orientação para a Web moderna

Publicado em: 19 de maio de 2026

Esta é uma lista gerada de todos os casos de uso disponíveis no Modern Web Guidance.

accessibility

accessible-error-announcement

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

Recursos usados:

Ver caso de uso no GitHub

built-in-ai

language-detection

Recursos usados:

Ver caso de uso no GitHub

language-model

Executar 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 rodadas.

Recursos usados:

Ver caso de uso no GitHub

summarizer

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

Recursos usados:

Ver caso de uso no GitHub

translator

Recursos usados:

Ver caso de uso no GitHub

css

highlight-text-ranges

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

Recursos usados:

Ver caso de uso no GitHub

forms

animated-select-picker

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

Recursos usados:

Ver caso de uso no GitHub

autofill-address-form

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

Recursos usados:

Ver caso de uso no GitHub

autofill-highlight-inputs

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

Recursos usados:

Ver caso de uso no GitHub

autofill-payment-form

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.

Recursos usados:

Ver caso de uso no GitHub

autofill-sign-in-form

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

Recursos usados:

Ver caso de uso no GitHub

autofill-sign-up-form

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

Recursos usados:

Ver caso de uso no GitHub

brand-consistent-forms

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 substituí-los por componentes personalizados.

Recursos usados:

Ver caso de uso no GitHub

branded-select-styling

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

Recursos usados:

Ver caso de uso no GitHub

custom-select-picker-layouts

Crie seletores de seleção personalizados com opções posicionadas de maneiras exclusivas ou interessantes, em vez da lista tradicional de opções empilhadas.

Recursos usados:

Ver caso de uso no GitHub

form-fields-automatically-fit-contents

Permita que os campos de formulário aumentem e diminuam para se ajustar à entrada do usuário, por exemplo, conforme ele 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 estejam de acordo com o design da página.

Recursos usados:

Ver caso de uso no GitHub

required-field-feedback

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

Recursos usados:

Ver caso de uso no GitHub

rich-media-picker

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

Recursos usados:

Ver caso de uso no GitHub

select-menu-interaction

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

Recursos usados:

Ver caso de uso no GitHub

validate-input-after-interaction

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

Recursos usados:

Ver caso de uso no GitHub

passkeys

passkey-authentication

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

Recursos usados:

Ver caso de uso no GitHub

passkey-conditional-create

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

Recursos usados:

Ver caso de uso no GitHub

passkey-management

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

Recursos usados:

Ver caso de uso no GitHub

passkey-reauthentication

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

Recursos usados:

Ver caso de uso no GitHub

passkey-registration

Registre uma chave de acesso para uma conta de usuário existente.

Recursos usados:

Ver caso de uso no GitHub

performance

batch-analytics-events

Agrupe e coloque em lote vários eventos de análise em um único beacon para minimizar a disputa de rede e reduzir a carga do servidor, sem deixar de oferecer atualizações em tempo real.

Recursos usados:

Ver caso de uso no GitHub

break-up-long-tasks

Divida o processamento síncrono pesado (computações complexas e/ou repetições longas) ou atualizações do DOM para permitir que o navegador processe a entrada do usuário e pinte a tela novamente.

Recursos usados:

Ver caso de uso no GitHub

calculate-total-foreground-time

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

Recursos usados:

Ver caso de uso no GitHub

conditional-async-dependencies

Carregue ou inicialize dependências assíncronas (como a importação de polyfills para recursos da Web ausentes) de maneira condicional sem exigir uma organização complexa em todas as dependências de script de uma página.

Recursos usados:

Ver caso de uso no GitHub

defer-rendering-heavy-content

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.

Recursos usados:

Ver caso de uso no GitHub

defer-work-until-scroll-ends

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

Recursos usados:

Ver caso de uso no GitHub

deprioritize-background-fetches

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

Recursos usados:

Ver caso de uso no GitHub

detect-initial-visibility-state

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 trouxe a página para a frente.

Recursos usados:

Ver caso de uso no GitHub

efficient-background-processing

Economize recursos do sistema e duração da bateria pausando a execução de 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 retomando-os assim que voltarem à tela.

Recursos usados:

Ver caso de uso no GitHub

faster-spa-view-transitions

Permite transições mais rápidas de volta às visualizações visitadas anteriormente em um aplicativo de página única (SPA) preservando o estado estrutural do DOM em vez de destruir e reconstruir a cada navegação.

Recursos usados:

Ver caso de uso no GitHub

full-session-analytics

Rastreia de forma confiável dados de análise, erros e telemetria durante toda a visita à página do usuário e adia o envio dos dados até que o usuário saia da página.

Recursos usados:

Ver caso de uso no GitHub

identify-heavy-scripts

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

Recursos usados:

Ver caso de uso no GitHub

identify-inp-causes

Identificar JavaScript de execução lenta que está afetando a métrica INP

Recursos usados:

Ver caso de uso no GitHub

improve-next-page-load-performance

Melhore o desempenho de carregamento de página fazendo a pré-busca ou a pré-renderização de páginas que o usuário provavelmente vai visitar em seguida.

Recursos usados:

Ver caso de uso no GitHub

interactions-in-complex-layouts

Melhore a rapidez e a capacidade de resposta das interações (reduzindo as pontuações de Interaction to Next Paint, INP) evitando recálculos de layout em layouts complexos, como painéis com muitos dados ou grades no estilo de planilhas.

Recursos usados:

Ver caso de uso no GitHub

optimize-image-priority

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

Recursos usados:

Ver caso de uso no GitHub

optimize-preload-priority

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

Recursos usados:

Ver caso de uso no GitHub

optimize-script-priority

Otimize a prioridade de carregamento dos scripts aumentando os scripts assíncronos críticos e diminuindo a prioridade dos scripts não essenciais ou de final de corpo para melhorar o sequenciamento e reduzir os atrasos.

Recursos usados:

Ver caso de uso no GitHub

resolution-optimized-pseudo-elements

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

Recursos usados:

Ver caso de uso no GitHub

schedule-tasks-by-priority

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

Recursos usados:

Ver caso de uso no GitHub

sequence-distributed-events

Registre operações de registro e sequência em microsserviços distribuídos ou ambientes de rastreamento de alta capacidade de processamento gravando carimbos de data/hora com resolução de nanossegundos.

Recursos usados:

Ver caso de uso no GitHub

user-experience

adapt-scrollbar-to-contrast-preferences

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

Recursos usados:

Ver caso de uso no GitHub

anchor-positioning-tab-underline

Faça 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 guia selecionada no momento.

Recursos usados:

Ver caso de uso no GitHub

animate-element-entry-exit

Oculta/mostra elementos de maneira suave à medida que são adicionados/removidos do DOM ou que os valores de exibição são alternados.

Recursos usados:

Ver caso de uso no GitHub

animate-to-from-top-layer

Anima elementos como caixas de diálogo, popovers e dicas de ferramentas conforme eles entram/saem da camada superior.

Recursos usados:

Ver caso de uso no GitHub

animate-to-intrinsic-sizes

Animação suave de componentes interativos (como acordeões, menus e cards expansíveis) para e das dimensões naturais.

Recursos usados:

Ver caso de uso no GitHub

apply-webgl-shaders

Aplicar efeitos visuais personalizados com shaders WebGL ao conteúdo HTML.

Recursos usados:

Ver caso de uso no GitHub

calculate-event-differentials

Calcular a duração e o tempo restante entre datas e horários.

Recursos usados:

Ver caso de uso no GitHub

calculate-with-intrinsic-sizes

Calcular o tamanho de um elemento com base no tamanho intrínseco dele, garantindo que ele se encaixe nas restrições de design especificadas.

Recursos usados:

Ver caso de uso no GitHub

capture-location-agnostic-data

Registre dados cronológicos que não devem mudar com base na localização de um usuário, como datas de nascimento, alarmes recorrentes ou feriados nacionais.

Recursos usados:

Ver caso de uso no GitHub

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

Recursos usados:

Ver caso de uso no GitHub

Destaque visualmente o item não interativo fixado no momento em carrosséis, galerias ou experiências de deslizar a página inteira com ajuste de rolagem. Por exemplo, expandir um card quando ele é encaixado ou revelar conteúdo oculto.

Recursos usados:

Ver caso de uso no GitHub

child-state-based-styling

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

Recursos usados:

Ver caso de uso no GitHub

complex-shapes

Corte elementos e o conteúdo deles em qualquer forma livre, como um símbolo, um traço de pincel ou uma textura orgânica para designs mais expressivos.

Recursos usados:

Ver caso de uso no GitHub

component-specific-light-dark-theme

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

Recursos usados:

Ver caso de uso no GitHub

consistent-cross-document-transitions

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

Recursos usados:

Ver caso de uso no GitHub

content-based-styling

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 várias colunas. Caso contrário, use um layout de uma só coluna.

Recursos usados:

Ver caso de uso no GitHub

coordinate-global-events

Programe 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 (DST), das horas "puladas" ou "repetidas" durante as mudanças de horário.

Recursos usados:

Ver caso de uso no GitHub

cross-document-transitions

Crie transições suaves e perfeitas entre navegações em tela cheia, como crossfades, efeitos de revelação personalizados ou transformação de conteúdo de uma página para outra.

Recursos usados:

Ver caso de uso no GitHub

customize-scrollbar-color-and-thickness

Personalizar a cor ou a espessura de uma barra de rolagem

Recursos usados:

Ver caso de uso no GitHub

dark-mode

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

Recursos usados:

Ver caso de uso no GitHub

declarative-button-actions

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

Recursos usados:

Ver caso de uso no GitHub

declarative-dialog-popover-control

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

Recursos usados:

Ver caso de uso no GitHub

deliver-optimized-decorative-images

Forneça imagens decorativas otimizadas (como planos de fundo, ícones de interface ou máscaras complexas) oferecendo simultaneamente formatos de imagem de próxima geração (como AVIF ou WebP) e várias densidades de pixels (como 1x e 2x). Assim, o navegador pode negociar dinamicamente a melhor combinação de tamanho de arquivo e qualidade visual para os recursos do dispositivo do usuário.

Recursos usados:

Ver caso de uso no GitHub

design-token-reactivity

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 ao componente.

Recursos usados:

Ver caso de uso no GitHub

directional-navigation-transitions

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

Recursos usados:

Ver caso de uso no GitHub

dynamic-sibling-animations

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

Recursos usados:

Ver caso de uso no GitHub

dynamic-sibling-styling

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

Recursos usados:

Ver caso de uso no GitHub

export-html-media-from-canvas

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

Recursos usados:

Ver caso de uso no GitHub

expose-canvas-content-to-browser-features

Expor conteúdo renderizado em um canvas para recursos do navegador, como tecnologias adaptativas, tradução ou modo de leitura.

Recursos usados:

Ver caso de uso no GitHub

flicker-free-client-side-ab-testing

Forneça e renderize testes A/B, multivariados 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 mostrar o conteúdo do experimento.

Recursos usados:

Ver caso de uso no GitHub

fluid-scaling

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

Recursos usados:

Ver caso de uso no GitHub

format-human-readable-durations

Apresente o tempo decorrido ou as durações aos usuários em um formato legível e localizado, com a flexibilidade de mostrar detalhamentos de unidades (por exemplo, "1 hora e 30 minutos") ou contagens totais de unidades (por exemplo, "90 minutos"), dependendo do contexto.

Recursos usados:

Ver caso de uso no GitHub

group-element-transitions

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.

Recursos usados:

Ver caso de uso no GitHub

improve-text-layout-and-legibility

Melhore o layout e a legibilidade de conteúdo de texto independente curto, como títulos com no máximo algumas linhas, permitindo que o navegador aplique quebras de linha equilibradas ao ajustar o texto.

Recursos usados:

Ver caso de uso no GitHub

individual-transform-properties

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

Recursos usados:

Ver caso de uso no GitHub

interactive-content-in-3d-scenes

Integrar elementos HTML interativos a uma cena 3D.

Recursos usados:

Ver caso de uso no GitHub

interactive-content-reveal

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

Recursos usados:

Ver caso de uso no GitHub

interest-triggered-action-previews

Mostre uma prévia dinâmica do efeito de um botão quando um usuário sinalizar interesse (por exemplo, passando o cursor, focando ou pressionando por muito tempo), mas antes de clicar.

Recursos usados:

Ver caso de uso no GitHub

interest-triggered-tooltips

Mostrar uma dica ou informações complementares quando um usuário passa o cursor, foca ou pressiona e mantém pressionado um elemento interativo, sem exigir um clique.

Recursos usados:

Ver caso de uso no GitHub

light-dismiss-a-dialog

Crie uma caixa de diálogo modal que possa ser fechada usando a dispensa leve (ou seja, clicando ou tocando fora da caixa de diálogo).

Recursos usados:

Ver caso de uso no GitHub

manage-recurring-intervals

Calcule intervalos recorrentes para faturamentos de assinaturas ou ciclos de folha de pagamento, ajustando automaticamente para casos extremos, como transições de fim de mês (por exemplo, adicionar um mês a 31 de janeiro), para garantir cálculos precisos de período.

Recursos usados:

Ver caso de uso no GitHub

model-partial-time-concepts

Modele conceitos de data e hora que não têm um componente padrão (como um ano, dia ou data específicos) sem usar valores de marcador de posição arbitrários que introduzem erros de cálculo.

Recursos usados:

Ver caso de uso no GitHub

move-dom-element-without-losing-state

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

Recursos usados:

Ver caso de uso no GitHub

Crie um componente de gaveta de navegação que, quando acionado por um botão de menu, desliza da lateral sobre o conteúdo da página atual e desliza para fora quando dispensado (deslizando para o lado, tocando fora ou pressionando "Esc").

Recursos usados:

Ver caso de uso no GitHub

overflow-clipping-control

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

Recursos usados:

Ver caso de uso no GitHub

parallax-scroll-effects

Crie efeitos baseados em rolagem (como paralaxe) em que as camadas de primeiro e segundo plano se movem em taxas diferentes, criando uma sensação de profundidade à medida que o usuário rola a tela.

Recursos usados:

Ver caso de uso no GitHub

persistent-app-tours

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

Recursos usados:

Ver caso de uso no GitHub

persistent-toast-notifications

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

Recursos usados:

Ver caso de uso no GitHub

persistent-top-layer-ui

Mantenha uma caixa de diálogo modal, um elemento de tela cheia ou um popover nativo visivelmente aberto e funcionalmente ativo quando o nó DOM subjacente é movido ou recebe um novo elemento pai no DOM.

Recursos usados:

Ver caso de uso no GitHub

physics-based-easing

Crie efeitos de animação e transição personalizados baseados na física, como salto e mola, que parecem mais naturais e envolventes do que as curvas de aceleração tradicionais.

Recursos usados:

Ver caso de uso no GitHub

platform-controls-dismiss-dialog

Crie uma caixa de diálogo modal que possa ser fechada usando 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.

Recursos usados:

Ver caso de uso no GitHub

position-aware-tooltips

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

Recursos usados:

Ver caso de uso no GitHub

precise-text-alignment

Consiga um alinhamento vertical preciso com texto de qualquer fonte. Por exemplo, um padding visual exatamente igual acima e abaixo do texto ou o alinhamento perfeito do texto com ícones ou imagens adjacentes.

Recursos usados:

Ver caso de uso no GitHub

prevent-text-wrapping

Verifique se o navegador não insere quebras de linha no texto e permite que ele transborde do contêiner.

Recursos usados:

Ver caso de uso no GitHub

pull-to-reveal

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

Recursos usados:

Ver caso de uso no GitHub

reduce-style-repetition

Reduza a repetição excessiva de estilos encapsulando a lógica de estilização 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.

Recursos usados:

Ver caso de uso no GitHub

resilient-context-menus-and-nested-dropdowns

Crie menus, dicas, menus suspensos ou sobreposições contextuais acessíveis e responsivos que precisam ser vinculados a elementos específicos da interface, garantindo que a sobreposição se reposicione automaticamente (por exemplo, invertendo eixos) quando encontrar bordas da janela de visualização, para que ela nunca seja cortada.

Recursos usados:

Ver caso de uso no GitHub

same-document-transitions

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 sangrada, transformando suavemente o tamanho, a posição ou outras propriedades de estilo.

Recursos usados:

Ver caso de uso no GitHub

scroll-entry-exit-effects

Crie efeitos de entrada, ampliação ou outros efeitos complexos de revelação em elementos à medida que eles entram e saem da porta de rolagem (ou viewport) enquanto o usuário rola a tela.

Recursos usados:

Ver caso de uso no GitHub

scroll-position-aware-elements

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

Recursos usados:

Ver caso de uso no GitHub

scroll-progress-indicator

Crie uma barra de progresso de rolagem, um rastreador de progresso gradual ou qualquer recurso visual que comunique até onde o usuário rolou uma página ou seção.

Recursos usados:

Ver caso de uso no GitHub

scroll-snap-realtime-feedback

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

Recursos usados:

Ver caso de uso no GitHub

scroll-snap-state-sync

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

Recursos usados:

Ver caso de uso no GitHub

scroll-target-on-load

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

Recursos usados:

Ver caso de uso no GitHub

scrollability-affordance-hints

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

Recursos usados:

Ver caso de uso no GitHub

scrollytelling

Anima propriedades visuais em um elemento de destino, como o esmaecimento de um plano de fundo, a mudança de uma cor de fundo ou a criação de experiências de scrollytelling, totalmente impulsionadas pela posição da porta de rolagem de um elemento completamente diferente.

Recursos usados:

Ver caso de uso no GitHub

search-hidden-content

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 "Encontrar na página", permitindo a indexação do mecanismo de pesquisa, oferecendo suporte a links diretos de fragmentos do URL e mantendo a acessibilidade ARIA.

Recursos usados:

Ver caso de uso no GitHub

shaped-cutouts

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

Recursos usados:

Ver caso de uso no GitHub

shrinking-header-on-scroll

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

Recursos usados:

Ver caso de uso no GitHub

size-aware-styling

Crie um componente cujos estilos possam 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 os layouts dependendo do tamanho ou um botão de call-to-action que pode mostrar texto de ajuda condicionalmente com base na largura.

Recursos usados:

Ver caso de uso no GitHub

soft-edge-content-fade

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

Recursos usados:

Ver caso de uso no GitHub

stabilize-reactive-state

Gerencie prazos ou cronogramas de tarefas em visualizações orientadas por dados sem efeitos colaterais inesperados de um estado mutável compartilhado.

Recursos usados:

Ver caso de uso no GitHub

stack-drill-down

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

Recursos usados:

Ver caso de uso no GitHub

style-parent-with-has

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

Recursos usados:

Ver caso de uso no GitHub

support-global-calendar-systems

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

Recursos usados:

Ver caso de uso no GitHub

swipe-to-remove

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

Recursos usados:

Ver caso de uso no GitHub

visually-stable-font-fallbacks

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

Recursos usados:

Ver caso de uso no GitHub

visually-stable-mixed-fonts

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.

Recursos usados:

Ver caso de uso no GitHub

visually-texture-content

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.

Recursos usados:

Ver caso de uso no GitHub

webmcp

agentic-forms

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

Recursos usados:

Ver caso de uso no GitHub

agentic-javascript-tools

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

Recursos usados:

Ver caso de uso no GitHub