Novidades no Chrome 106

Pete LePage
Adriana Jara

Veja o que é necessário saber:

  • As novas APIs internacionais oferecem mais controle ao formatar números.
  • Há um teste de origem para a API Pop-up, que facilita a exibição de conteúdo importante para o usuário.
  • Estamos adicionando vários recursos CSS para melhorar a interoperabilidade.
  • E há muito mais.

Meu nome é Pete LePage, e eu sou Adriana Jara. Vamos conferir as novidades para desenvolvedores no Chrome 106.

Novas APIs Intl

As APIs internacionais ajudam a exibir conteúdo em um formato localizado.

Como outras APIs Intl, isso transfere a carga para o sistema, para que você não precise enviar ou manter um código de localização complexo para cada usuário.

A API sabe para onde vai o símbolo da moeda, como formatar datas e horas ou compilar uma lista.

O Chrome 106 adiciona uma série de novas funcionalidades de formato de número.

const opts = {
  style: 'currency',
  currency: 'EUR'
};
const x = new Intl.NumberFormat('de-DE', opts);
const r = x.format(number);
// expected output: "123.456,79 €"

Precisa mostrar uma faixa de preço? formatRange pode ajudar.

Crie um novo objeto numberFormat, forneça o style e outras opções e quantos dígitos mostrar.

Em seguida, chame formatRange() para receber a string formatada.

const opts = {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

Quer arredondar um número para o incremento de cinco mais próximo com uma precisão de duas casas decimais? Sem problemas.

Especifique o minimumFractionDigits e o roundingIncrement e chame format().

const opts = {
  style: 'percent',
  minimumFractionDigits: 2,
  roundingIncrement: 5,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.format(0.428267);
// expected output: "42.85%"

Você pode até mesmo dizer ao navegador para incluir zeros à direita com trailingZeroDisplay, o que é muito útil para preços.

const strip = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'stripIfInteger',
}).format(0.42);
// 42%

const auto = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'auto',
}).format(0.42);
// 42.00%

Confira as documentações sobre o formato de número internacional no MDN para mais informações.

A API Pop-Up facilita a criação de interfaces para aquelas ocasiões em que você precisa colocar informações bem na frente do usuário.

O atributo popup leva o elemento automaticamente à camada superior do site e oferece controles fáceis para alternar a visibilidade. Não se preocupe mais com posicionamento, elementos empilhados, foco ou interações com o teclado. O melhor de tudo é que não é necessário usar JavaScript.

Com apenas o snippet abaixo, a API cuida da renderização do elemento sobre todo o outro conteúdo e processa a entrada do usuário e o gerenciamento de foco.

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button  popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

Por padrão, os usuários podem fechar o pop-up com gestos como a tecla ESC ou clicando em outros elementos.

Os desenvolvedores têm controle total sobre o estilo,o posicionamento e o tamanho da camada superior, mas também a flexibilidade para modificar os comportamentos padrão. Usar apenas CSS e HTML.

Confira o artigo do Jhey para mais exemplos e opções de API.

Inscreva-se no teste de origem para fornecer informações oportunas aos seus usuários. Envie sua opinião.

Novos recursos do CSS

Há dois novos recursos do CSS que melhoram a interoperabilidade e facilitam sua vida.

Há uma nova unidade de comprimento na cidade: ic está chegando. ic é semelhante a ch. Mas ic é usado especificamente para textos escritos em idiomas que usam ideogramas. Basicamente, ele mede o comprimento com base na largura ou altura desse caractere [apontar para algum lugar] que significa água.

Ela é uma unidade projetada para dimensionar textos, o que permite limitar a largura para melhorar a legibilidade e oferece controle previsível independentemente do tamanho do texto.

Por exemplo, se você definir o max-width de um contêiner, digamos, como 10ic, sabe que o contêiner vai conter no máximo 10 glifos de largura total, independente do tamanho da fonte. Confira o exemplo a seguir:

(link em inglês)

A compatibilidade com a grade CSS para interpolação de grid-template-columns e grid-template-rows está chegando. Ela estava planejada para a versão 106, mas está atrasada e será lançada no Chrome 107. Você ainda pode testá-la no Chrome Beta. Confira o código do Bramus como exemplo:

E muito mais.

É claro que há muito mais.

  • Estamos iniciando a fase cinco do plano de redução do user agent.
  • O suporte para HTTP2 Push e o tipo de cota permanente estão sendo descontinuados.
  • Além disso, a propriedade CSS hyphenate-character agora está disponível sem prefixo.

Leitura adicional

Isso inclui apenas alguns destaques importantes. Confira nos links abaixo outras mudanças no Chrome 106.

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 é Adriana Jara, e, assim que o Chrome 107 for lançado, estarei aqui para contar as novidades do Chrome.