Esta página foi traduzida pela API Cloud Translation.

Novidades no Chrome 106

Pete LePage

Adriana Jara

Veja o que é necessário saber:

Agora você tem novas APIs Intl para ter mais controle sobre a formatação de números.
Há um teste de origem da API Pop-up para facilitar a exibição de conteúdo essencial para o usuário.
Estamos adicionando vários recursos de CSS para melhorar a interoperabilidade.
E há muito mais.

Meu nome é Pete LePage e meu nome é Adriana Jara. Vamos conhecer as novidades para desenvolvedores no Chrome 106.

Novas APIs internacionais

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

Assim como em outras APIs internacionais, isso transfere a carga para o sistema. Assim, você não precisa enviar ou manter códigos de localização complexos para cada usuário.

A API sabe para onde o símbolo da moeda vai, 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? O formatRange pode ajudar.

Crie um novo objeto numberFormat, informe o style e outras opções, além de quantos dígitos serão mostrados.

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. Em seguida, 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%"

É possível até mesmo dizer ao navegador para incluir zeros à direita com trailingZeroDisplay, o que é muito útil para os 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%

Para mais informações, confira os documentos sobre formato de número internacional no MDN.

A API Pop-Up facilita a criação de interfaces para os momentos em que você só precisa mostrar as informações ao usuário.

O atributo popup leva o elemento automaticamente para a camada superior do site e oferece controles fáceis para alternar a visibilidade. Chega de se preocupar com posicionamento, empilhamento de elementos, foco ou interações com o teclado. E o melhor de tudo é que não precisa de JavaScript.

Com apenas o snippet a seguir, a API cuida da renderização do elemento sobre todos os outros conteúdos 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.

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

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

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

Novos recursos de CSS

Há dois novos recursos de CSS que melhoram a interoperabilidade e facilitam um pouco sua vida.

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

É uma unidade projetada para dimensionar o texto, permitindo que você limite a largura para melhorar a legibilidade, e oferece um 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 esse contêiner terá no máximo 10 glifos de largura total, independentemente do tamanho da fonte. Confira no exemplo a seguir:

O suporte à grade CSS para interpolação para grid-template-columns e grid-template-rows está chegando. Ele estava planejado para a versão 106, mas está atrasado e será lançado no Chrome 107. Você ainda pode testá-lo no Chrome Beta. Aqui está o código de Bramus como exemplo:

E muito mais.

Claro, há muito mais.

Estamos iniciando a fase cinco do plano de redução do user agent.
O suporte para push HTTP2 e o tipo de cota persistente está sendo descontinuado.
E a propriedade CSS hyphenate-character agora está disponível sem prefixo.

Novidades no Chrome 106

Novas APIs internacionais

API pop-up

Novos recursos de CSS

E muito mais.

Leia mais

Fazer inscrição