3 min read

Novidades no Chrome 99

Novidades no Chrome 99

Aqui está o que você precisa saber:

  • A contagem regressiva para a versão 100 do Chrome e Firefox está a apenas algumas semanas de distância.
  • As camadas em cascata CSS oferecem mais controle sobre seu CSS e ajudam a evitar conflitos de especificidade de estilo.
  • O showPicker()método permite que você mostre programaticamente um seletor de navegador para <input>elementos como date, colore datalist.
  • E há muito mais .

Veja o que há de novo para desenvolvedores no Chrome 99, extraido de uma publicação de Pete LePage.

Chrome 100 e Firefox 100

O Chrome 100 é lançado no final de março (2022) e o Firefox 100 é lançado logo depois, no início de maio. Ambos são um marco importante no número da versão e passam para três dígitos. Mas, se o seu código estiver esperando dois dígitos, o novo número da versão pode causar problemas para você.

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

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

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

E no menu Configurações do Firefox Nightly, você pode habilitar a opção "Firefox 100 User-Agent String". É uma boa ideia testar seu site para garantir que tudo funcione conforme o esperado.

Confira o Chrome e o Firefox em breve para alcançar a versão principal 100 para obter detalhes completos.

Camadas em Cascata CSS

O suporte para CSS Cascade Layers e  regra CSS a @layer estão chegando ao Chrome 99. Eles fornecem controle mais explícito de seus arquivos CSS para evitar conflitos de especificidade de estilo. Isso é especialmente útil para grandes bases de código, sistemas de design e ao gerenciar estilos de terceiros em aplicativos.

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

Ilustração da demonstração do projeto de quebrar a interface do usuário

Se você estiver tentando estilizar um link, dentro de um .card, dentro de um .postvocê descobrirá que 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 em seu cartão substitua o estilo do link em sua 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.

Camadas em cascata usando a @layer são suportadas no Chrome 99, Firefox 97 e Safari 15.4 Beta.

showPicker() para elementos de entrada

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

Capturas de tela de seletores de navegador
Seletores de data do navegador no Chrome desktop, Chrome mobile, Safari desktop, Safari mobile e Firefox desktop (julho de 2021).

Para usá-lo, chame showPicker() no <input>. Neste exemplo, permite fornecer um substituto, se o navegador não suportar a API ou não puder mostrar o seletor. Assim, garantindo que os usuários ainda tenham 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 obter detalhes completos e todos os <input> diferentes que você pode usar o showPicker().

E mais!

Claro que há muito mais.

A API Canvas 2D foi atualizada, adicionando novas funcionalidades, incluindo:

  • Dois novos eventos para ContextLosteContextRestored
  • Uma opção willReadFrequently
  • Mais suporte a modificadores de texto CSS
  • E mais.

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

E a API de reconhecimento de caligrafia chegou agora.

Leitura adicional

Isso cobre apenas alguns dos principais destaques. Verifique os links abaixo para alterações adicionais no Chrome 99.

Fonte: New in Chrome 99 - Google Developer