No Chrome 71, adicionamos suporte para:
- A exibição de horários relativos agora faz parte da API
Intl
. - Especificar em qual lado do texto o sublinhado precisa aparecer para textos que fluem verticalmente.
- Exigir a ativação do usuário antes de usar a API de síntese de fala.
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.
- Lista de alterações do repositório de origem do Chromium
- Atualizações do ChromeStatus.com para o Chrome 71
- Suspensões de uso e remoções do Chrome 71
Mostrar horários relativos com Intl.RelativeTimeFormat()
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
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.
- O método
Element.requestFullscreen()
agora pode ser personalizado no Android e permite que você escolha entre tornar a barra de navegação visível ou um modo completamente imersivo, em que nenhum controle do user agent é exibido até que um gesto do usuário seja realizado. - O modo de credenciais padrão para solicitações de script de módulo
foi alterado de
omit
parasame-origin
. - Além disso, trazendo 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 de::slotted()
.
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!