Veja o que é necessário saber:
- A contagem regressiva para a versão 100 do Chrome e do Firefox está daqui a algumas semanas.
- As camadas em cascata do CSS oferecem mais controle sobre o CSS e ajudam a evitar conflitos de especificidade do estilo.
- O método
showPicker()permite mostrar programaticamente um seletor de navegador para elementos<input>, comodate,coloredatalist. - E há muito mais.
Meu nome é Pete LePage. Vamos conhecer as novidades para os desenvolvedores no 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 principal da versão e podem passar de três dígitos. No entanto, se o código estiver esperando dois dígitos, o novo número de versão poderá causar problemas para você.
Qualquer código que verifique números de versão ou analise a string do user agent precisa ser verificado para garantir que não haja problemas.
No Chrome, a sinalização #force-major-version-to-100 mudará o número da versão atual para 100.
No menu "Configurações" do Firefox Nightly, ative a opção "String do user agent do Firefox 100". É uma boa ideia testar o site para ter certeza de que tudo funciona conforme o esperado.
Confira a página Chrome e Firefox em breve para alcançar a versão principal 100 para ver todos os detalhes.
Camadas da cascata CSS
O suporte para CSS Cascade Layers e a regra @layer CSS será lançado no
Chrome 99. Elas fornecem um controle mais explícito dos 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 do CSS. Com os estilos em camadas, a precedência de uma camada sempre supera a especificidade de um seletor.
Se você estiver tentando definir o estilo de um link, dentro de um .card, dentro de um .post, você descobrirá que o seletor mais específico será aplicado. Com a regra @layer, é possível dar mais detalhes sobre a especificidade de cada estilo e garantir que o estilo do link no seu card substitua o estilo do link na 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.
As camadas em cascata usando a regra CSS @layer são compatíveis com o Chrome 99, o Firefox 97 e o Safari 15.4 Beta. Para saber mais, confira
As camadas em cascata estão chegando ao seu navegador.
showPicker() para elementos de entrada
Por muito tempo, tivemos que recorrer a bibliotecas de widgets personalizados ou dicas para
mostrar um seletor de data. Há um novo método showPicker() em InputElements HTML.
Essa é 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.
Para usá-lo, chame showPicker() no elemento <input>. Neste exemplo, ele foi unido em um bloco try…catch. Assim, posso oferecer um substituto, caso o navegador não seja compatível com a API ou não possa mostrar o seletor. Isso garante 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 do navegador para data, hora, cor e arquivos
para ver detalhes completos e todos os diferentes tipos de <input> em que você pode usar
showPicker().
E muito mais.
Claro, há muito mais.
A API Canvas2D foi atualizada com a adição de novas funcionalidades, incluindo:
- Dois novos eventos para
ContextLosteContextRestored - Uma opção
willReadFrequently - Mais suporte a modificadores de texto CSS
- e muito mais.
Há um novo teste de origem para permitir que os PWAs forneçam cores alternativas no manifesto do app da Web para o modo escuro.
E a API de reconhecimento de escrita manual já está disponível.
Leia mais
Esses são apenas alguns dos principais destaques. Confira os links abaixo para ver outras mudanças no Chrome 99.
- Novidades no Chrome DevTools (99)
- Descontinuações e remoções do Chrome 99
- Atualizações do ChromeStatus.com para o Chrome 99
- Lista de alterações do repositório de origem do Chromium
- Agenda de lançamentos do Chrome
Fazer inscrição
Para ficar por dentro, inscreva-se no canal do YouTube Chrome Developers para receber 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.