Novos tipos e espaços de cores do CSS, funções trigonométricas do CSS e a API View Transitions.
A menos que indicado de outra forma, 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 do ChromeStatus.com. O Chrome 111 é Beta desde 9 de fevereiro de 2023. Faça o download da versão mais recente no Google.com para computadores ou na Google Play Store no Android.
CSS
Novos tipos e espaços de cores do CSS
Todos os recursos descritos no Nível 4 de cor do CSS agora estão ativados. Isso inclui quatro tipos de cores independentes do dispositivo (lab, Oklab, lch e Oklch), a função color() e espaços de cores 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 e espaços de cores.
A função color-mix()
A função color-mix() do CSS Color 5, que é muito útil, também está disponível. Essa função permite misturar uma porcentagem de uma cor em outra, em qualquer espaço de cor compatível. O exemplo a seguir mistura 10% de blue em white em SRGB.
.item {
background-color: color-mix(in srgb, blue 10%, white);
}
CSS Selectors 4 Pseudo-Class :nth-child(an + b of S)
Estende :nth-child(an + b) e :nth-last-child() para receber 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 do CSS
Adiciona unidades de fonte raiz: rex, rch, ric e rlh à unidade de fonte raiz existente de rem.
Funções trigonométricas do CSS
As funções trigonométricas sin(), cos(), tan(), asin(), acos(), atan() e atan2() foram adicionadas às expressões matemáticas do CSS.
Estilo de 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 de propriedades personalizadas de um elemento ancestral.
A propriedade baseline-source
A propriedade baseline-source permite que os desenvolvedores da Web especifiquem se uma caixa de nível inline deve usar a linha de base first ou last para o alinhamento dentro de uma caixa de linha.
APIs Web
A permissão window-management e a string da política de permissão
O Chrome 111 adiciona window-management como um alias para a permissão window-placement e as strings de política de permissão. Isso faz parte de uma iniciativa 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 ao longo do tempo.
API Media Session: ações de apresentação de slides
Adiciona ações previousslide e nextslide à API MediaSession existente.
ArrayBuffer redimensionável e SharedArrayBuffer expansível
Os construtores ArrayBuffer foram estendidos para usar um comprimento máximo adicional que permite o crescimento e o encolhimento in-place de buffers. Da mesma forma, SharedArrayBuffer é estendido para ter um comprimento máximo adicional que permite o crescimento no local.
Regras de especulação: chave da política de 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 o requisito da "política de referenciador suficientemente rigorosa".
Streaming de DOM paralelo declarativo
Isso adiciona suporte ao streaming, anexando a raiz de sombra na abertura, em vez da tag de modelo de fechamento.
API View Transitions
Permite a criação de transições refinadas em aplicativos de página única (SPAs) fazendo snapshots de visualizações e permitindo que o DOM mude sem sobreposição entre estados. Use a View Transitions para criar transições personalizadas ou use um crossfade padrão simples para melhorar a experiência do usuário.
Confira o artigo para desenvolvedores do Chrome para mais informações e exemplos de transições para ajudar você a começar.
Extensões de codificação de vídeo escalonável do WebRTC
Essa extensão define um método padrão para escolher entre possíveis configurações de codificação de vídeo escalonável (SVC, na sigla em inglês) 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, ele vai conter todos os requiredFeatures, mas pode ser um subconjunto de optionalFeatures. A maioria dos recursos tem maneiras alternativas de detectar se eles foram concedidos. No entanto, para alguns recursos, o indicador de ativação pode estar intimamente relacionado a dados de um recurso que não está disponível no momento, e não a dados que nunca estarão disponíveis. Ao consultar enabledFeatures, você pode determinar se dicas úteis (por exemplo, para melhorar ou iniciar o rastreamento) devem ser mostradas ou se um recurso nunca terá suporte na sessão atual.
Testes de origem em andamento
No Chrome 111, você pode ativar os seguintes testes de origem.
Teste de descontinuação para remoção do bypass de CSP connect-src na API Web Payments
A capacidade da API Web Payment de ignorar a política de CSP connect-src ao buscar o manifesto foi descontinuada. Após essa descontinuação, a política de CSP connect-src de um site precisará permitir o URL da forma de pagamento especificada em uma chamada PaymentRequest, bem como todos os outros URLs que a cadeia de métodos usa para buscar o manifesto.
Essa capacidade de desvio foi removida no Chrome 111 com um teste de origem reversa do 111 para o 113 para desenvolvedores que precisam reativar o desvio temporariamente. Para ativar essa opção, registre-se no teste de reversão da descontinuação do bypass do CSP connect-src.
Document Picture-in-Picture
A API Document Picture-in-Picture é uma nova API para abrir uma janela sempre visível que pode ser preenchida com conteúdo HTML arbitrário. Essa é uma expansão da API picture-in-picture atual, que permite apenas que um HTMLVideoElement seja colocado em uma janela picture-in-picture. Isso permite que os desenvolvedores da Web ofereçam uma experiência melhor de PiP aos usuários.
Leia a documentação sobre Document Picture-in-Picture.
Inscreva-se no teste de origem do Picture-in-Picture de documentos.
Suspensões de uso e remoções
Esta versão do Chrome apresenta as descontinuações e remoções listadas abaixo. Acesse o 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 PaymentInstruments
PaymentInstruments é a API da Web que oferece suporte à instalação não JIT de apps de pagamento (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 observamos interesse de outros fornecedores de navegadores. Por isso, ela foi descontinuada e removida.
Remoção do bypass do CSP connect-src na API Web Payments
A capacidade da API Web Payment de ignorar a política de CSP connect-src ao buscar o manifesto foi descontinuada. Após essa remoção, a política CSP connect-src de um site precisará permitir o URL da forma de pagamento especificada em uma chamada 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 e ter mais tempo para fazer as mudanças necessárias devido a essa remoção.
Identidade do comerciante no evento canmakepayment
O evento do worker de serviço canmakepayment informa ao comerciante se o usuário tem um cartão registrado em um app de pagamento instalado. Ele transmitia em silêncio a origem e os dados arbitrários do comerciante para um worker de serviço da origem do app de pagamento. Essa comunicação entre origens ocorreu na construção do PaymentRequest em JavaScript, não exigiu um gesto do usuário e não mostrou nenhuma interface do usuário. Essa transmissão silenciosa de dados foi removida do evento canmakepayment e da intent IS_READY_TO_PAY do Android).