No Chrome 71, adicionamos suporte para:
- A exibição de tempos relativos agora faz parte da API
Intl. - Especificar em qual lado do texto o sublinhado precisa aparecer para texto que flui verticalmente.
- Exigir a ativação do usuário antes de usar a API de síntese de voz.
E tem muito mais!
Meu nome é Pete LePage. Vamos conferir as novidades para desenvolvedores no Chrome 71.
Registro de alterações
Este artigo aborda apenas alguns dos principais destaques. Confira os links abaixo para ver outras mudanças no Chrome 71.
- Lista de mudanças no repositório de origem do Chromium
- Atualizações do ChromeStatus.com para o Chrome 71
- Descontinuação e remoções do Chrome 71
Mostrar tempos relativos com Intl.RelativeTimeFormat()
Muitos apps da Web usam frases como "ontem", "em dois dias" ou "há uma hora" para indicar quando algo aconteceu ou vai acontecer, em vez de mostrar a data e a hora completas.
A exibição de tempos relativos se tornou tão comum que a maioria das bibliotecas de data/hora comuns oferece funções localizadas para lidar com isso. Na verdade, em quase todos os apps da Web que crio, a Moment JS é uma das primeiras bibliotecas que adiciono, especificamente para esse propósito.
O Chrome 71 introduz o Intl.RelativeTimeFormat(), que
desloca o trabalho para o mecanismo JavaScript e permite a formatação localizada de
tempos relativos. Isso nos dá um pequeno aumento de desempenho e significa que só
precisamos dessas bibliotecas como um polyfill quando um navegador ainda não oferece suporte às 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 é simples. Crie uma nova instância e especifique a localidade.
Depois, chame o formato com o tempo relativo. Confira a postagem
O Intl.RelativeTimeFormat API
de Mathias para saber mais detalhes.
Como especificar o local do sublinhado para texto vertical
Quando o texto em chinês ou japonês é mostrado em um fluxo vertical, os navegadores são inconsistentes com o local em que 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 do CSS3. A
especificação de decoração de texto do CSS3 adiciona várias novas propriedades que
permitem especificar coisas como o tipo de linha a ser usado,
o estilo, a cor e a
posição.
.left {
text-underline-position: left;
}
.right {
text-underline-position: right;
}
A síntese de voz requer ativação do usuário
Todos nós ficamos surpresos quando abrimos um site e ele começa a falar com a gente. As políticas de reprodução automática impedem que os sites reproduzam arquivos de áudio ou vídeo com áudio automaticamente. 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 está alinhado com outras políticas de reprodução automática. Se você tentar usá-lo antes que o usuário interaja com a página, um erro será gerado.
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 se surpreender, assim como os colegas ao seu redor.
E muito mais.
Estas são apenas algumas das mudanças no Chrome 71 para desenvolvedores. Há muitas outras.
- O método
Element.requestFullscreen()agora pode ser personalizado no Android e permite escolher entre tornar a barra de navegação visível ou optar por um modo completamente imersivo em que nenhum controle de user agent é mostrado até que um gesto do usuário seja realizado. - O modo de credenciais padrão para solicitações de script de módulo
mudou de
omitparasame-origin. - Além disso, com o Chrome inline com a
especificação Shadow DOM v1,
o Chrome 71 agora calcula a especificidade das pseudoclasses
:host()e:host-context(), assim como dos argumentos para::slotted().
Vídeos do Chrome DevSummit
Se você não conseguiu participar da Chrome Dev Summit ou não assistiu a todas as palestras, confira a playlist da Chrome Dev Summit 2018 no nosso canal do YouTube.
Eva e Phil abordaram algumas técnicas interessantes para usar service workers em Como criar apps mais rápidos e resilientes com service workers.
Mariko e Jake falaram sobre como criaram o Squoosh em Aplicativos da Web complexos com muito JS, evitando a lentidão.
Katie e Houssein abordaram algumas técnicas excelentes para maximizar o desempenho do seu site em Speed Essentials: Key Techniques for Fast Websites.
Jake derrubou o bolo. E há muitos outros vídeos ótimos na playlist do Chrome DevSummit 2018. Confira.
Inscrever-se
Se quiser ficar por dentro dos nossos vídeos, 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 é Pete LePage, e assim que o Chrome 72 for lançado, vou estar aqui para contar as novidades do Chrome.