Novidades do Chrome 71

No Chrome 71, adicionamos suporte para:

E tem muito mais!

Meu nome é Pete LePage. Vamos conhecer as novidades para os desenvolvedores no Chrome 71.

Registro de alterações

Isso abrange apenas alguns dos principais destaques. Confira os links abaixo para ver outras mudanças no Chrome 71.

Mostrar horários relativos com Intl.RelativeTimeFormat()

Twitter mostrando o horário relativo da postagem mais recente

Muitos apps da Web usam frases como "ontem", "em dois dias" ou "uma hora atrás" para indicar quando algo aconteceu, ou vai acontecer, em vez de exibir a data e a hora completas.

A exibição de horários relativos se tornou tão comum que a maioria das bibliotecas comuns de data/hora fornece funções localizadas para lidar com isso. Na verdade, quase todos os apps da Web que crio, a Moment JS é uma das primeiras bibliotecas que adicionei, expressamente para essa finalidade.

O Chrome 71 introduz o Intl.RelativeTimeFormat(), que muda o trabalho para o mecanismo JavaScript e permite a formatação localizada de horários relativos. Isso proporciona um pequeno aumento de desempenho e significa que só precisamos dessas bibliotecas como um polyfill quando um navegador ainda não for compatível com as novas APIs.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

O uso dele é simples: crie uma nova instância e especifique a localidade. Em seguida, chame o formato com o tempo relativo. Confira a postagem de The Intl.RelativeTimeFormat API (em inglês) de Mathias para saber mais detalhes.

Como especificar o local do sublinhado para o texto vertical

Texto vertical com sublinhados inconsistentes

Quando um texto em chinês ou japonês é exibido em um fluxo vertical, os navegadores ficam inconsistentes com o local onde o sublinhado é colocado. Ele pode estar à esquerda ou à direita.

No Chrome 71, a propriedade text-underline-position agora aceita left ou right como parte da especificação de decoração de texto CSS3. A especificação de decoração de texto CSS3 adiciona várias novas propriedades que permitem especificar itens como que tipo de linha usar, estilo, cor e posição.


.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

A síntese de fala requer a ativação do usuário

Todos nós ficamos surpresos quando acessamos um site e de repente ele começa a falar conosco. As políticas de reprodução automática impedem que os sites reproduzam automaticamente arquivos de áudio ou de vídeo com áudio. Alguns sites tentaram contornar esse problema usando a API de síntese de fala.

A partir do Chrome 71, a API de síntese de fala agora exige algum tipo de ativação do usuário na página antes de funcionar. Isso alinha com outras políticas de reprodução automática. Se você tentar usá-lo antes de o usuário interagir com a página, um erro será disparado.

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

Não há nada pior do que acessar um site e surpreender você e seus colegas de trabalho sentados ao seu redor.

E muito mais.

Essas são apenas algumas das mudanças no Chrome 71 para desenvolvedores. É claro que há muito mais.

Vídeos do Chrome DevSummit

Se você não participou da Conferência de Desenvolvedores Chrome, ou talvez tenha assistido, mas não tenha visto todas as palestras, confira a playlist do Chrome Dev Summit 2018 no nosso canal do YouTube.

Eva e Phil conheceram algumas técnicas interessantes para usar service workers em Como criar aplicativos mais rápidos e resilientes com service workers.

Mariko e Jake conversaram sobre como criaram o Squoosh em Apps da Web complexos e com muito JS, evitando a lentidão.

Katie e Houssein abordaram ótimas técnicas para maximizar o desempenho do site em Speed Essentials: Key Techniques for Fast Websites (em inglês).

Jake deixou o bolo. Confira também vários outros vídeos incríveis na playlist Chrome DevSummit 2018.

Inscrever-se

Para ficar por dentro dos nossos vídeos, inscreva-se no canal de desenvolvedores do Chrome no YouTube. Você vai receber uma notificação por e-mail sempre que lançarmos um novo vídeo.

Eu sou Pete LePage e, assim que o Chrome 72 for lançado, terei aqui umas notícias das novidades do Chrome!