Trajetória de animação do CSS, API NotRestoredReason do cache de avanço e retorno, picture-in-picture do documento e muito mais.
Salvo indicação em contrário, as mudanças descritas se aplicam à versão mais recente do Canal Beta do Chrome para Android, ChromeOS, Linux, macOS e Windows. Saiba mais sobre os recursos listados aqui nos links fornecidos ou na lista em ChromeStatus.com. O Chrome 116 está na versão Beta desde 19 de julho de 2023. Faça o download da versão mais recente em Google.com para computador ou na Google Play Store no Android.
CSS
Nesta versão, adicionamos dois novos recursos CSS.
Trajetória de animação do CSS
A trajetória de animação permite aos autores posicionar qualquer objeto gráfico e animá-lo ao longo de um caminho especificado pelo desenvolvedor. Isso permite várias novas possibilidades de transformação, como o posicionamento usando coordenadas polares (com a função ray()) em vez das coordenadas retangulares padrão usadas pela função translate() ou a animação de um elemento ao longo de um caminho definido. Isso facilita a definição de transições espaciais em 2D complexas e belas. Um caminho pode ser especificado como circle(), ellipse(), rect(), inset(), xywh(), polygon(), ray() e url().
Animações de visibilidade de exibição e conteúdo
O Chrome 116 é compatível com as propriedades display e content-visibility em animações de frame-chave. Esse suporte permite que os desenvolvedores criem animações de saída, após as quais o elemento se torna automaticamente display: none ou content-visibility: hidden sem precisar escrever JavaScript para processar essa chave após a conclusão da animação. Isso permite que animações de saída de elementos sejam adicionadas somente em CSS.
APIs Web
AbortSignal.any()
Retorna um indicador que é cancelado quando qualquer um dos indicadores de origem é cancelado. Os desenvolvedores podem usar isso para combinar fontes de cancelamento independentes, por exemplo, tempos limite especificados com AbortSignal.timeout() e indicadores associados a um AbortController, e transmiti-los para APIs assíncronas como fetch().
Suporte a BYOB para Busca
A implementação do ReadableStream do Chrome é compatível com leitores BYOB (traga seu próprio buffer) para fluxos de bytes legíveis. Agora, Response.body também é um fluxo de bytes legível em vez de um "padrão". mais legível. Isso permite que a API Fetch seja usada com leitores BYOB, reduzindo a sobrecarga de coleta de lixo e cópias e melhorando a capacidade de resposta dos usuários. A Blob.stream() agora também se beneficia dessa otimização.
API NotRestoredReason de cache de avanço e retorno
A API NotRestoredReason vai informar a lista de motivos pelos quais uma página não é veiculada no cache de avanço e retorno em uma estrutura de árvore de frames usando a API PerformanceNavigationTiming.
Picture-in-picture do documento
O Document Picture-in-Picture adiciona uma nova API para abrir uma janela sempre ativada que pode ser preenchida com HTMLElements arbitrário. Essa é uma expansão da API HTMLVideoElement existente que permite apenas que um HTMLVideoElement seja colocado em uma janela picture-in-picture (PiP). Isso permite que os desenvolvedores Web ofereçam uma experiência de picture-in-picture melhor aos usuários.
Caracteres curinga expandidos nas origens da política de permissões
Os caracteres curinga de subdomínio nas listas de permissões forneciam alguma flexibilidade valiosa, mas eram diferentes dos analisadores de caractere curinga existentes e exigiam novos códigos e especificações. Essa intent reduzirá essa sobrecarga reutilizando partes da especificação atual da Política de Segurança de Conteúdo e permitindo que scheme + wildcard domain e wildcard port sejam incluídos na lista de permissões. Especificamente, essa intent adotaria a definição de host-source e scheme-source em vez da origem na definição da lista de permissões, exigindo que a parte do caminho esteja vazia, já que as Políticas de permissões se aplicam a origens correspondentes.
Pacote do FedCM: API Login Hint, API User Info e API RP Context
Essa atualização agrupada permite personalizações de fluxos de login federados que usam a API Federated Credential Management (FedCM).
Com a API Login Hint, a parte confiável (RP) pode especificar uma dica sobre a conta de usuário que quer exibir na interface do FedCM. Isso é usado principalmente para fornecer uma UX melhor para usuários recorrentes.
A API User Info permite que o provedor de identidade (IdP) busque as informações do usuário para personalizar a experiência de login dos usuários recorrentes, por exemplo, usando botões "Fazer login com IdP".
Com a API RP Context, o RP pode solicitar que a caixa de diálogo do FedCM substitua o título "Fazer login" como "Inscrever-se", "Usar" ou “Continue”, para alinhar a intent real para o usuário.
Eventos de entrada/sair de mouse e ponteiro não compostos
Defina a propriedade event.composed nos eventos mouseenter, mouseleave, pointerenter e pointerleave "false" para atender às especificações e corrigir lacunas de interoperabilidade. Tanto a especificação de eventos de interface para eventos de mouse quanto de eventos de ponteiro definem esses eventos como não compostos. As duas especificações mudaram das definições originais há alguns anos: https://github.com/w3c/uievents/pull/210 https://github.com/w3c/pointerevents/pull/461 Além de resolver a lacuna de interoperabilidade, essa alteração também corrige um envio duplo ou triplo desses eventos para um host shadow DOM no Chromium quando o shadow DOM também detecta (link em inglês).
Remover herança do sandbox document.open
No momento, as flags do sandbox do autor da chamada são aplicadas ao recebedor da chamada quando o document.open é direcionado a uma janela diferente. Depois dessa mudança, não será mais assim.
Informar que um erro crítico causou a reinicialização no NavigationTiming
Os sites podem indicar que uma dica específica é essencial para a página incluindo-a em um cabeçalho de resposta HTTP Critical-CH. Isso acionará uma reinicialização da conexão se a dica listada no cabeçalho de resposta HTTP Critical-CH puder ser incluída, mas não tiver sido, na solicitação HTTP enviada inicialmente. Essa intent propõe adicionar readonly attribute DOMHighResTimeStamp criticalCHRestart; à interface PerformanceNavigationTiming.
Testes de origem em andamento
No Chrome 116, é possível ativar os novos testes de origem a seguir.
COOP: restricted-properties
Cross-Origin-Opener-Policy é usado para romper a relação entre pop-ups e abridores e aumentar a segurança. "restrict-properties" é um valor proposto que restringe o relacionamento em vez de separá-lo completamente. O crossOriginIsolated seria ativado quando pareado com o COEP.
Inscreva-se no teste de origens das propriedades de restrição da COOP.
API FedCM Sign-in Status
A API IdP Sign-in Status da API Federated Credential Management (FedCM) permite que um provedor de identidade (IdP) sinalize ao navegador quando os usuários estão fazendo login/saindo para que a FedCM possa aumentar as propriedades de privacidade otimizando a UX.
Inscrever-se no teste de origem do Status de login da FedCM
API EditContext
A API EditContext simplifica o processo de integração de um app da Web com métodos avançados de entrada de texto, como escrita de formas VK, painéis de escrita à mão, reconhecimento de fala e composições do IME. A API melhora a acessibilidade e o desempenho e disponibiliza novos recursos para editores baseados na Web.
Inscreva-se no teste de origem da API EditContext
Tempo de frame de animação longo
Essa é uma extensão das tarefas longas. Ela mede a tarefa com a atualização de renderização subsequente, adicionando informações como scripts de longa duração, tempo de renderização e tempo gasto em layout e estilo forçados, conhecido como troca frequente de layouts.
Os desenvolvedores podem usar isso como um diagnóstico da "lentidão", que é medida pelo INP, encontrando as causas do congestionamento da linha de execução principal, que geralmente é a causa de um INP ruim.
Inscreva-se no teste de origem da Long Animation Frame Timing