Novidades do Chrome 99

Pete LePage

Veja o que é necessário saber:

  • A contagem regressiva para a versão 100 do Chrome e do Firefox está a poucas semanas.
  • As camadas em cascata do CSS oferecem mais controle sobre o CSS e ajudam a evitar conflitos de especificidade de estilo.
  • O método showPicker() permite mostrar de forma programática um seletor de navegador para elementos <input>, como date, color e datalist.
  • E há muito mais.

Meu nome é Pete LePage. Vamos nos aprofundar e ver as novidades para desenvolvedores do Chrome 99.

Chrome 100 e Firefox 100

O Chrome 100 será lançado no final de março de 2022, e o Firefox 100 será lançado logo em seguida, no início de maio. Ambos são um marco importante de número de versão e passam a ter três dígitos. No entanto, se o código esperar dois dígitos, o novo número de versão poderá causar problemas.

Qualquer código que verifique números de versão ou analise a string do agente do usuário precisa ser verificado para garantir que não tenha problemas.

Página de flags do Chrome destacando a nova opção #force-major-version-to-100

No Chrome, a flag #force-major-version-to-100 vai mudar o número da versão atual para 100.

No menu de configurações do Firefox Nightly, você pode ativar a opção "Firefox 100 User-Agent String". É uma boa ideia testar o site para ter certeza de que tudo funciona conforme o esperado.

Confira a página sobre a versão principal do Chrome e do Firefox 100 em breve para ver mais detalhes.

Camadas de CSS em cascata

O suporte para camadas em cascata do CSS e a regra @layer do CSS estão sendo lançados no Chrome 99. Elas oferecem um controle mais explícito dos arquivos CSS para evitar conflitos de especificidade de estilo. Isso é útil principalmente para bases de código grandes, sistemas de design e ao gerenciar estilos de terceiros em aplicativos.

Eles introduzem uma nova camada na cascata do CSS. Com estilos em camadas, a precedência de uma camada sempre vence a especificidade de um seletor.

Ilustração da demonstração do projeto de separação da interface

Se você estiver tentando estilizar um link dentro de um .card, em um .post, o seletor mais específico será aplicado. Ao usar a regra @layer, você pode ser mais explícito sobre a especificidade do estilo de cada um e garantir que o estilo do link no card substitua o estilo do link na postagem.

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

Isso ocorre devido à precedência em cascata. Estilos em camadas criam novos planos em cascata.

As camadas em cascata que usam a regra CSS @layer têm suporte no Chrome 99, no Firefox 97 e no Safari 15.4 Beta. Confira As camadas em casca estão chegando ao seu navegador para mais informações.

showPicker() para elementos de entrada

Por muito tempo, tivemos que recorrer a bibliotecas de widgets personalizadas ou hacks para mostrar um seletor de data. Há um novo método showPicker() no HTML InputElements. É a maneira canônica de mostrar um seletor de navegador, não apenas para date, mas também time, color e outros elementos <input> com seletores.

Capturas de tela dos seletores de navegador
Seletores de data do navegador no Chrome para computador, Chrome para dispositivos móveis, Safari para computador, Safari para dispositivos móveis e Firefox para computador (julho de 2021).

Para usá-lo, chame showPicker() no elemento <input>. Neste exemplo, ele foi incluído em um bloco try…catch. Isso permite que eu forneça uma alternativa, se o navegador não oferecer suporte à API ou não conseguir mostrar o seletor. Assim, os usuários ainda têm uma boa experiência.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

Confira Mostrar um seletor de navegador para data, hora, cor e arquivos para detalhes completos e todos os diferentes tipos de <input> que podem ser usados com showPicker().

E muito mais.

Claro que há muito mais.

A API Canvas2D foi atualizada, adicionando novas funcionalidades, incluindo:

  • Dois novos eventos para ContextLost e ContextRestored
  • Uma opção willReadFrequently
  • Mais suporte a modificadores de texto CSS
  • e muito mais.

Há um novo teste de origem que permite que os PWAs forneçam cores alternativas no manifesto do app da Web para o modo escuro.

A API de reconhecimento de escrita manual já está disponível.

Leitura adicional

Isso abrange apenas alguns dos principais destaques. Confira os links abaixo para ver outras mudanças no Chrome 99.

Inscrever-se

Para ficar por dentro das novidades, inscreva-se no canal do YouTube para desenvolvedores do Chrome e receba uma notificação por e-mail sempre que lançarmos um novo vídeo.

Meu nome é Pete LePage e, assim que o Chrome 100 for lançado, estarei aqui para contar as novidades do Chrome!