Novos tipos de cores e espaços de cor CSS, funções trigonométricas de CSS e a API View Transitions.
Salvo indicação em contrário, as mudanças a seguir 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 111 está na versão Beta em 9 de fevereiro de 2023. Faça o download da versão mais recente em Google.com para computador ou na Google Play Store no Android.
CSS
Novos espaços e tipos de cores CSS
Todos os recursos descritos no nível de cor CSS 4 estão ativados. Isso inclui quatro tipos de cores independentes de dispositivo (lab, Oklab, lch e Oklch), a função color() e espaços de cor definidos pelo usuário para gradientes e animações.
Leia o Guia de cores CSS de alta definição para saber mais sobre esses novos tipos de cores e espaços.
A função color-mix()
A função color-mix(), incrivelmente útil, da CSS Color 5, também está disponível para envio. Essa função permite misturar uma porcentagem de uma cor com outra, em qualquer espaço de cores compatível. O exemplo a seguir mistura 10% de blue com white em SRGB.
.item {
background-color: color-mix(in srgb, blue 10%, white);
}
Seletores de CSS 4 Pseudoclasse :nth-child(an + b de S)
Estende :nth-child(an + b) e :nth-last-child() para usar um seletor. Por exemplo, :nth-child(3 of .c) é a terceira .c de um determinado pai. Para saber mais, leia a postagem Mais controle sobre as seleções de :nth-child() com a sintaxe of S.
Unidades de fontes raiz de CSS
Foram adicionadas unidades de fontes raiz: rex, rch, ric e rlh à unidade de fonte raiz existente de rem.
Funções trigonométricas de CSS
As funções trigonométricas sin(), cos(), tan(), asin(), acos(), atan(), atan2() foram adicionadas a expressões matemáticas CSS.
Consultas de contêiner de estilo para propriedades personalizadas de CSS
Adiciona a função style() às regras @container para possibilitar a aplicação de estilos com base nos valores calculados das propriedades personalizadas de um elemento ancestral.
A propriedade baseline-source
A propriedade baseline-source permite que os desenvolvedores da Web especifiquem se um box no nível da linha precisa usar o valor de referência first ou last para alinhamento dentro de uma caixa de linha.
APIs Web
A string da política de permissões e window-management
O Chrome 111 adiciona window-management como um alias para as strings de permissão e política de permissão window-placement. Isso faz parte de um esforço maior para renomear as strings, descontinuando e removendo window-placement. A mudança na terminologia melhora a longevidade do descritor à medida que a API Window Management evolui com o tempo.
API Media Session: apresentação de ações de slides
Adiciona as ações previousslide e nextslide à API Media Session existente.
ArrayBuffer redimensionável e SharedArrayBuffer aumentável.
Estenda os construtores ArrayBuffer para ter um tamanho máximo extra que permita o aumento e a redução de buffers no local. Da mesma forma, SharedArrayBuffer é estendido para ter um comprimento máximo adicional que permita o crescimento no local.
Regras de especulação: chave de política do referenciador
Isso amplia a sintaxe das regras de especulação para permitir que os desenvolvedores especifiquem a política de referenciador a ser usada com solicitações especulativas acionadas por regras de especulação. Isso também reapresenta o requisito de "política de referenciadores suficientemente rigorosas".
shadow DOM declarativa de streaming
Isso adiciona suporte para streaming, anexando a raiz paralela à tag de abertura em vez da tag de modelo de fechamento.
Ver a API Transitions
Permite a criação de transições refinadas em aplicativos de página única (SPAs), gerando um instantâneo de visualizações e permitindo que o DOM seja alterado sem qualquer sobreposição entre estados. Use as transições de visualização para criar transições personalizadas ou use um padrão simples de crossfade para melhorar a experiência do usuário.
Confira o artigo para desenvolvedores do Chrome se quiser mais informações e exemplos de transições que ajudam você a começar.
Extensões de codificação de vídeo escalável WebRTC
Esta extensão define um método padrão para escolher entre possíveis configurações de codificação de vídeo escalonável (SVC) em uma faixa de vídeo WebRTC de saída.
Atributo enabledFeatures do WebXR
Retorna o conjunto de recursos que foram ativados para este XRSession, conforme especificado por XRSessionInit e os recursos implícitos exigidos pela especificação para o modo e os recursos fornecidos. Para uma sessão concedida, ela conterá todos os requiredFeatures, mas pode ser um subconjunto de optionalFeatures. A maioria dos recursos tem maneiras alternativas de detectar se foram concedidos. No entanto, em alguns deles, o indicador de ativação pode estar diretamente ligado aos dados de um recurso que não está disponível no momento, em vez de dados que nunca estão disponíveis. Ao consultar enabledFeatures, você pode determinar se alguma dica útil (por exemplo, para melhorar ou iniciar o monitoramento) vai ser mostrada ou se um recurso nunca terá suporte na sessão atual.
Testes de origem em andamento
No Chrome 111, você pode ativar os novos testes de origem a seguir.
Teste de descontinuação para remoção da CSP ignorada connect-src na API Web Payment
Não é mais possível usar a API Web Payment de ignorar a política de CSP Connect-src ao buscar o manifesto. Após essa descontinuação, a política de CSP Connect-src do site precisará permitir o URL da forma de pagamento especificado em uma chamada do PaymentRequest, bem como quaisquer outros URLs que o método encadear para buscar o manifesto.
Essa capacidade de ignorar é removida no Chrome 111 com um teste de origem reversa de 111 para 113 para os desenvolvedores que precisam reativar temporariamente o recurso. Para isso, inscreva-se no teste de descontinuação reversa para ignorar a CSP do connect-src.
Picture-in-picture do documento
A API Document Picture-in-Picture é uma nova API para abrir uma janela sempre ativa que pode ser preenchida com conteúdo HTML arbitrário. Essa é uma expansão da API Picture-in-Picture existente que só permite que um HTMLVideoElement seja colocado em uma janela picture-in-picture. Isso permite que os desenvolvedores da Web ofereçam uma experiência de picture-in-picture melhor aos usuários.
Leia a documentação do modo picture-in-picture de documentos.
Inscreva-se para o teste de origem do recurso picture-in-picture de documentos.
Descontinuações e remoções
Esta versão do Chrome apresenta as suspensões de uso e remoções listadas abaixo. Acesse ChromeStatus.com para consultar as listas de descontinuações planejadas, suspensões atuais e remoções anteriores.
Esta versão do Chrome remove três recursos.
Remover instrumentos de pagamento
PaymentInstruments é a API Web que oferece suporte à instalação de apps de pagamento não JIT. Consulte https://w3c.github.io/payment-Handler/. Ele foi projetado com a suposição de que o navegador armazenaria os detalhes reais do instrumento de pagamento, o que não é verdade e tem alguns vazamentos de privacidade. Ele também não foi enviado em nenhum outro navegador, e não vimos interesse de outros fornecedores de navegadores. Por isso, essa API foi descontinuada e removida.
Remoção da CSP do connect-src ignorada na API Web Payment
Não é mais possível que a API Web Payment ignore a política da CSP connect-src ao buscar o manifesto. Após a remoção, a política da CSP connect-src de um site vai precisar permitir o URL da forma de pagamento especificado em uma chamada de PaymentRequest, bem como todos os outros URLs que o método encadeia para buscar o manifesto.
Consulte as informações em "Testes de origem" para saber como ativar um teste de descontinuação. Assim, você vai ter mais tempo para fazer as mudanças necessárias devido a essa remoção.
Identidade do comerciante no evento canmakepayment
O evento canmakepayment do service worker permite que o comerciante saiba se o usuário tem um cartão registrado em um app de pagamento instalado. Ele costumava transmitir silenciosamente a origem do comerciante e os dados arbitrários a um service worker da origem do app de pagamento. Essa comunicação de origem cruzada ocorreu na construção de PaymentRequest em JavaScript, não exigiu um gesto do usuário e não mostrou nenhuma interface do usuário. Essa passagem de dados silenciosa foi removida do evento canmakepayment e da intent IS_READY_TO_PAY do Android.