Novos tipos e espaços de cor CSS, funções trigonométricas 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 desde 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 tipos de cores e espaços CSS
Todos os recursos descritos em Nível de cor CSS 4 estão ativados. Isso inclui quatro tipos de cores independentes de dispositivos (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 de CSS de alta definição para saber mais sobre esses novos tipos de cor e espaços.
A função color-mix()
A função color-mix(), que é incrivelmente útil, do CSS Color 5 também é útil. Esta função permite misturar uma porcentagem de uma cor com outra, em qualquer espaço de cores permitido. O exemplo a seguir mistura 10% de blue em 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) é o terceiro .c em 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 fonte raiz de CSS
Adiciona unidades de fonte raiz: rex, rch, ric e rlh à unidade de fonte raiz de rem.
Funções trigonométricas CSS
As funções trigonométricas sin(), cos(), tan(), asin(), acos(), atan(), atan2() foram adicionadas às expressões matemáticas de CSS.
Estilizar consultas de contêiner para propriedades personalizadas de CSS
Adiciona a função style() às regras @container para permitir 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 Web especifiquem se uma caixa inline 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ão e permissão window-management
O Chrome 111 adiciona window-management como um alias para as strings da política de permissão e da permissão window-placement. Isso faz parte de um esforço maior para renomear as strings, descontinuando e removendo window-placement. A mudança de terminologia melhora a longevidade do descritor à medida que a API Window Management evolui ao longo do tempo.
API Media Session: apresentar ações de slides
Adiciona as ações previousslide e nextslide à API Media Session atual.
ArrayBuffer redimensionável e SharedArrayBuffer expansível
Estenda os construtores ArrayBuffer para ter um tamanho máximo adicional que permita o crescimento e a redução no local de buffers. Da mesma forma, SharedArrayBuffer é estendido para ter um tamanho máximo adicional que permite o crescimento no local.
Regras de especulação: chave de política do referenciador
Isso estende 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 reintroduz a "política de referenciador suficientemente rigorosa" requisito fundamental.
Como fazer streaming de shadow DOM declarativo
Isso adiciona suporte para streaming anexando a raiz paralela à tag de modelo de abertura em vez da tag de fechamento.
API View Transitions
Permite a criação de transições refinadas em aplicativos de página única (SPAs), capturando um instantâneo das visualizações e permitindo que o DOM seja alterado sem nenhuma sobreposição entre os estados. Use transições de visualização para criar transições personalizadas ou use um padrão de crossfade simples para melhorar a experiência do usuário.
Confira o artigo para desenvolvedores do Chrome e confira mais informações e exemplos de transições que vão ajudar você a começar.
Extensões de codificação de vídeo escalonável WebRTC
Esta extensão define um método padrão para escolher entre possíveis configurações de programação de vídeo escalonável (SVC, na sigla em inglês) em uma faixa de vídeo de saída WebRTC.
Atributo enabledFeatures do WebXR
Retorna o conjunto de recursos que foram ativados para 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 vai conter todos os requiredFeatures, mas pode ser um subconjunto de optionalFeatures. A maioria dos recursos tem formas alternativas de detectar se eles foram concedidos. No entanto, para alguns recursos, o sinal sobre a ativação ou não de um recurso pode estar diretamente ligado aos dados de um recurso que não está disponível agora, em vez de dados que não estão disponíveis nunca. Ao consultar enabledFeatures, é possível determinar se alguma dica útil (por exemplo, para melhorar ou iniciar o rastreamento) vai ser exibida ou se um recurso nunca vai ter suporte na sessão atual.
Testes de origem em andamento
No Chrome 111, é possível ativar os novos testes de origem a seguir.
Teste de descontinuação para remover a passagem direta da CSP connect-src na API Web Payment
Descontinuação da capacidade da 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 de um site vai precisar permitir o URL da forma de pagamento especificado em uma chamada de PaymentRequest, bem como qualquer outro URL que o método encadeie para buscar o manifesto.
Essa capacidade de ignorar foi removida no Chrome 111 com um teste de origem reversa do 111 para o 113 para os desenvolvedores que precisam reativar temporariamente o desvio. Para ativar essa opção, faça o registro 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 ativada que pode ser preenchida com conteúdo HTML arbitrário. Essa é uma expansão da API Picture-in-Picture existente que permite apenas que um HTMLVideoElement seja colocado em uma janela picture-in-picture. Isso permite que os desenvolvedores Web ofereçam uma experiência de picture-in-picture melhor aos usuários.
Leia a documentação do Document Picture-in-Picture.
Inscreva-se no teste de origem do Document Picture-in-Picture.
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.
Esta versão do Chrome remove três recursos.
Remover Instrumentos de Pagamento
PaymentInstruments é a API Web que oferece suporte a instalações 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, não vimos nenhum interesse de outros fornecedores de navegadores. Por isso, essa API foi descontinuada e removida.
Remoção do desvio de CSP connect-src na API Web Payment
Suspensão do uso da capacidade da API Web Payment de ignorar a política de CSP connect-src ao buscar o manifesto. Após a remoção, a política de CSP connect-src de um site precisará permitir o URL da forma de pagamento especificado em uma chamada de PaymentRequest, além de outros URLs que o método encadear para buscar o manifesto.
Consulte as informações em "Testes de origem" para saber como ativar um teste de descontinuação, com mais tempo para fazer as mudanças necessárias devido a essa remoção.
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 é usado para transmitir 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 aconteceu 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.