Novas unidades da janela de visualização CSS, API Federated Credential Management, fontes variáveis COLRv1 e muito mais.
Salvo indicação em contrário, as mudanças descritas abaixo 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 108 está na versão Beta desde 27 de outubro de 2022. Faça o download da versão mais recente em Google.com para computador ou na Google Play Store no Android.
CSS
O Chrome 108 inclui vários recursos novos de CSS.
CSS Overflow para elementos substituídos
O Chrome vai começar a lançar uma mudança que permite que os desenvolvedores usem a propriedade overflow já existente com elementos substituídos que são exibidos fora da caixa de conteúdo. Combinado com object-view-box, ele pode ser usado para criar uma imagem com um brilho ou uma sombra personalizada aplicada, com o comportamento de estouro de tinta adequado, como uma sombra CSS.
Essa é uma possível mudança interruptiva. Saiba mais em Uma mudança para estourar em elementos substituídos.
Unidades de janela de visualização pequenas, grandes, dinâmicas e lógicas
Isso adiciona suporte a unidades pequenas (svw, svh, svi, svb, svmin, svmax), grandes (lvw, lvh, lvi, lvb, lvmin, lvmax), dinâmicas (dvw, dvh, dvi, dvb, dvmin, dvmax) e lógicas (vi, vb).
Suporte a CSS break-after, break-before e break-inside
Suporte ao valor evitado das propriedades de fragmentação de CSS break-before, break-after e break-inside durante a impressão. Esse valor diz ao navegador para evitar quebrar antes, depois ou dentro do elemento ao qual é aplicado. Por exemplo, o CSS a seguir evita que um valor seja quebrado em uma quebra de página.
figure {
break-inside: avoid;
}
Esse recurso foi adicionado porque o Chrome 108 adicionou suporte à impressão LayoutNG.
Último alinhamento do item de referência
Esse recurso permite que os desenvolvedores alinhem itens no layout flexível ou de grade de acordo com o último valor de referência, em vez do primeiro. Isso é feito por meio das seguintes propriedades:
align-items: last baseline;justify-items: last baseline;align-self: last baseline;justify-self: last baseline;
ContentVisibilityAutoStateChanged evento
Um evento acionado em um elemento com content-visibility: auto quando o estado de renderização do elemento muda devido a qualquer um dos atributos que tornam o elemento relevante para o usuário.
O caso de uso para isso é permitir que os desenvolvedores tenham mais controle sobre quando parar ou iniciar a renderização em resposta ao user agent parar ou iniciar a renderização da subárvore de visibilidade do conteúdo. Por exemplo, o desenvolvedor pode querer interromper as atualizações do React em uma subárvore que não é renderizada pelo user agent. Da mesma forma, o desenvolvedor pode querer interromper quaisquer outras atualizações de script (por exemplo, atualizações de tela) quando o user agent não estiver renderizando o elemento.
APIs Web
Gerenciamento de credenciais federadas (era WebID)
A API Federated Credential Management permite que os usuários usem a identidade federada para fazer login em sites de maneira compatível com as melhorias na privacidade do navegador.
Extensões de origem de mídia em workers
Permite o uso da API Media Source Extensions (MSE) em contextos do Atividades dedicadas a permitir um desempenho aprimorado do armazenamento em buffer de mídia para reprodução por um HTMLMediaElement no contexto principal da janela. Ao criar um objeto MediaSource em um contexto do WorkerWorker, um aplicativo pode extrair um MediaSourceHandle dele e transferir esse identificador para a linha de execução principal para uso ao anexar a um HTMLMediaElement. O contexto que criou o objeto MediaSource pode usá-lo para armazenar mídia em buffer.
Sec-CH-Prefers-Reduced-Motion Cabeçalho de dicas do cliente sobre recursos de mídia de preferências do usuário
Os cabeçalhos de dicas do cliente para recursos de mídia de preferência do usuário define um conjunto de cabeçalhos de dicas do cliente HTTP relacionados aos recursos de mídia de preferência do usuário, conforme definido pelas consultas de mídia de nível 5. Se usados como dicas essenciais de cliente, esses cabeçalhos permitem que os servidores façam escolhas inteligentes relacionadas, por exemplo, ao uso de CSS inline. Sec-CH-Prefers-Reduced-Motion reflete a preferência prefers-reduced-motion do usuário.
Leitores de BYOB do WebTransport
Compatível com leitores BYOB(bring-your-own-buffer) para WebTransport, para permitir a leitura em um buffer fornecido pelo desenvolvedor. Os leitores de BYOB podem minimizar cópias de buffer e reduzir alocações de memória.
Caracteres curinga em origens da política de permissões
A especificação da política de permissões define um mecanismo que permite aos desenvolvedores ativar e desativar seletivamente o uso de vários recursos do navegador e APIs. Um recurso desse mecanismo permite que os recursos sejam ativados apenas em origens enumeradas explicitamente (por exemplo, https://foo.com/). Esse mecanismo não é flexível o suficiente para o design de algumas CDNs, que oferecem conteúdo por meio de uma origem que pode estar hospedada em um dos vários subdomínios possíveis.
Portanto, esse recurso adiciona suporte a caracteres curinga na política de permissões estruturada como SCHEME://*.HOST:PORT (por exemplo, https://*.foo.com/), em que uma origem válida pode ser construída usando SCHEME://HOST:PORT (por exemplo, https://foo.com/). Isso exige que HOST seja um domínio registrável. Isso significa que o https://*.bar.foo.com/ funciona, mas o https://*.com/ não. Se quiser permitir que todos os domínios usem o recurso, delegue ao *.
Métodos de sincronização para AccessHandles na API File System Access
Atualiza os métodos assíncronos flush(), getSize() e truncate() em FileSystemSyncAccessHandle na API File System Access para métodos síncronos.
No momento, o FileSystemSyncAccessHandle tem uma combinação de métodos de sincronização e assíncrono, o que prejudica o desempenho e a usabilidade, principalmente para aplicativos que fazem a portabilidade de C/C++ para Wasm. Essa atualização trará consistência no uso da API e melhorará o desempenho de bibliotecas baseadas em Wasm.
Essa é uma possível mudança interruptiva. Saiba mais em Alteração interruptiva: métodos de sincronização para AccessHandles.
interface condicional do WebAuthn
A interface condicional para o WebAuthn tem suporte no Windows 22H2 ou mais recente, no macOS e no Android P ou mais recente. A interface do WebAuthn nas plataformas de computador também foi atualizada.
Fontes COLRv1 variáveis e detecção de recursos de fontes
Suporte a fontes variáveis COLRv1
As fontes vetoriais de cores COLRv1 são compatíveis desde o Chrome 98, mas essa versão inicial era compatível apenas com a funcionalidade estática da tabela COLRv1. A especificação COLRv1 define a integração com variações OpenType, que permite modificar as propriedades de fonte de gradientes e transformações, alterando os parâmetros do eixo variável. Esta segunda etapa oferece suporte a essas variações para o COLRv1.
Extensões de condição font-tech() e font-format() para CSS @supports
O uso de font-tech() e font-format() com @supports do CSS permite a detecção da tecnologia de fonte e do suporte ao formato, além de aprimoramento progressivo do conteúdo. Os exemplos a seguir testam a compatibilidade com fontes COLRv1.
@supports font-tech(color-COLRv1) {
}
Suporte à função tech() no descritor @font-face src:.
O nível 4 de fontes CSS fornece meios adicionais de selecionar ou filtrar recursos de fonte. A função tech() foi introduzida, o que permite transmitir uma lista de tecnologias de fontes necessárias para o funcionamento desse blob de fontes. Com base nisso, o user agent vai selecionar o primeiro recurso adequado.
Chrome no Android
O Android OSK agora redimensiona a janela de visualização por padrão
O teclado na tela do Android redimensiona a janela de visualização por padrão em vez do bloco inicial. Os autores podem desativar esse recurso usando a nova chave de meta visualização interactive-widget.
Testes de origem
Esta versão do Chrome tem dois novos testes de origem.
Identidade do comerciante no evento canmakepayment
O evento do service worker canmakepayment permite que o comerciante saiba se o usuário tem um cartão registrado em um app de pagamento instalado. Ele transfere silenciosamente a origem do comerciante e os dados arbitrários para um service worker a partir da origem do app de pagamento. Essa comunicação de origem cruzada acontece na construção de PaymentRequest em JavaScript, não requer um gesto do usuário e não mostra nenhuma interface do usuário. O teste do desenvolvedor para remover os campos de identidade de "canmakepayment" o evento pode ser ativado em chrome://flags/#clear-identity-in-can-make-payment. Ao ativar esta flag, os campos de identidade da caixa de texto "canmakepayment" (e a intent IS_READY_TO_PAY do Android).
Saiba mais em Atualização do comportamento do evento CanMakePayment da API Payment Handler.
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.
As páginas podem ser bloqueadas do cache de avanço e retorno por diferentes motivos, como os exigidos pela especificação e os relacionados à implementação do navegador. Os desenvolvedores podem coletar a taxa de hits do BFCache no site deles usando o parâmetro persistente do gerenciador pageshow e PerformanceNavigationTiming.type(back-forward). Essa API permite que os sites coletem informações sobre por que o BFCache não é usado em uma navegação do histórico, para que possam tomar ações em cada motivo e tornar a página compatível com o BFCache.
Descontinuações e remoções
Esta versão do Chrome apresenta as descontinuações e remoções listadas abaixo. Acesse ChromeStatus.com para conferir listas de descontinuações planejadas, descontinuações atuais e remoções anteriores.
Suspensões de uso
Esta versão do Chrome descontinua um recurso.
Descontinuar e remover window.defaultStatus e window.defaultstatus
Elas não são padrão e não são implementadas por todos os navegadores e não afetam o comportamento do navegador. Isso faz a limpeza e remove possíveis sinais de impressão digital.
Originalmente, elas eram usadas para modificar/controlar a "barra de status" na parte inferior das janelas do navegador. No entanto, eles nunca tiveram nenhum efeito real na barra de status do Chrome e não são atributos padronizados. A Gecko não oferece suporte a esses atributos desde a versão 23. O WebKit ainda oferece suporte a esses atributos. O atributo window.status relacionado é padronizado, mas também não pode afetar a barra de status da janela.
Remoções
Esta versão do Chrome remove quatro recursos.
Remover ImageDecoderInit.premultiplyAlpha
O recurso não tem efeitos observáveis nos casos de uso principais, mas pode restringir as implementações de maneiras não ideais. Consulte este problema para uma descrição mais detalhada. Por consenso dos editores de especificações do WebCodecs e falta de uso (0,000000339% - 0,00000687% de carregamentos de página por contador de uso na versão M106).
Remover navigateEvent.restoreScroll()
restoreScroll() está sendo substituído por navigateEvent.scroll(). O scroll() funciona de maneira idêntica, mas permite que o desenvolvedor controle o tempo de rolagem para navegações não transversais. O scroll() funciona quando a rolagem não é uma restauração. Por isso, o nome muda junto com a mudança de comportamento.
Remover navigateEvent.transitionWhile()
O transitionWhile() está sendo substituído por navigateEvent.intercept() devido a falhas de design informadas pelos desenvolvedores. intercept() comporta-se de forma quase idêntica a transitWHEN(), mas, em vez de receber um parâmetro de promessa obrigatório, ela usa uma função de gerenciador opcional que retorna uma promessa. Isso permite que o navegador controle quando o gerenciador é executado, o que é mais tarde e mais intuitivo do que para transitionWhile().
Remover o googIPv6 do WebRTC mediaConstraint
"googIPv6: false" pode ser usado para desativar o suporte a IPv6 no WebRTC, como no exemplo a seguir.
new RTCPeerConnection({}, {mandatory:{googIPv6:false}});
O IPv6 foi ativado por padrão há muitos anos e não deve ser possível desativá-lo. Esta é uma API legada que não existe na especificação.