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.
API pop-up
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.
Leia mais
Isso aborda apenas alguns destaques importantes. Confira os links abaixo para ver outras mudanças no Chrome 106.
- Novidades do Chrome DevTools (106)
- Descontinuações e remoções do Chrome 106
- Atualizações do ChromeStatus.com para o Chrome 106
- 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 para desenvolvedores do Chrome. Você receberá 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 dizer as novidades do Chrome.