No Chrome 74, adicionamos suporte para:
- A criação de campos de classe particular em JavaScript agora é muito mais limpa.
- Você pode detectar quando o usuário solicitou uma experiência de movimento reduzido.
- Eventos de transição de CSS
- Adiciona novas APIs de política de recursos para verificar se os recursos estão ativados ou não.
E tem muitos outros!
Meu nome é Pete LePage. Vamos conhecer as novidades para os desenvolvedores no Chrome 74!
Registro de alterações
Esses são apenas alguns dos principais destaques. Acesse os links abaixo para conferir outras mudanças no Chrome 74.
- Novidades no Chrome DevTools (74)
- Descontinuações e remoções do Chrome 74
- Atualizações do ChromeStatus.com para o Chrome 74
- Novidades do JavaScript no Chrome 74
- Lista de alterações do repositório de origem do Chromium
Campos de turmas particulares
Os campos de classe simplificam a sintaxe da classe, evitando a necessidade de funções de construtor apenas para definir propriedades de instância. No Chrome 72, adicionamos suporte a campos de classe pública.
class IncreasingCounter {
// Public class field
_publicValue = 0;
get value() {
return this._publicValue;
}
increment() {
this._publicValue++;
}
}
E eu disse que os campos de aula particular estão sendo desenvolvidos. Tenho a satisfação de dizer
que os campos de classe particular chegaram ao Chrome 74. A nova sintaxe dos campos particulares é semelhante à dos campos públicos, exceto pelo uso de um #
(sinal de cerquilha) para marcar o campo como particular. Pense no #
como parte do nome do campo.
class IncreasingCounter {
// Private class field
#privateValue = 0;
get value() {
return this.#privateValue;
}
increment() {
this.#privateValue++;
}
}
Lembre-se de que os campos private
são exatamente isso: particulares. Eles podem ser acessados
dentro da classe, mas não fora do corpo dela.
class SimpleClass {
_iAmPublic = 'shared';
#iAmPrivate = 'secret';
doSomething() {
...
}
}
Para ler mais sobre classes públicas e particulares, confira a postagem de Mathias sobre campos de turmas.
prefers-reduced-motion
Alguns usuários relataram sentir enjoos ao visualizar a rolagem paralaxe, zoom e outros efeitos de movimento. Para resolver isso, muitos sistemas operacionais oferecem uma opção de reduzir a movimentação sempre que possível.
O Chrome agora oferece uma consulta de mídia, prefers-reduced-motion
, parte da especificação das consultas de mídia de nível 5, que permite detectar quando essa opção está ativada.
@media (prefers-reduced-motion: reduce)
Imagine que eu tenha um botão de inscrição que chama a atenção para si mesmo com um pequeno movimento. A nova consulta permite desativar o movimento apenas do botão.
button {
animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
button {
animation: none;
}
}
Confira o artigo de Tom Move Ya! Ou talvez não faça isso se o usuário preferir menos movimento reduzido! para saber mais detalhes.
Eventos CSS transition
A especificação de transições CSS exige que eventos de transição sejam enviados quando uma transição for enfileirada, iniciada, encerrada ou cancelada. Outros navegadores são compatíveis com esses eventos há algum tempo...
Mas, até agora, eles não eram suportados no Chrome. No Chrome 74, agora é possível ouvir:
transitionrun
transitionstart
transitionend
transitioncancel
Ao detectar esses eventos, é possível rastrear ou mudar o comportamento quando uma transição é executada.
Atualizações da API Feature Policy
As políticas de recursos permitem que você ative, desative e modifique seletivamente o comportamento de APIs e outros recursos da Web. Isso é feito pelo cabeçalho "Feature-Policy" ou pelo atributo allow em um iframe.
Feature-Policy: geolocation 'self'
<iframe ... allow="geolocation self">
</iframe>
O Chrome 74 apresenta um novo conjunto de APIs para verificar quais recursos estão ativados:
- Você pode conferir uma lista de recursos permitidos com
document.featurePolicy.allowedFeatures()
. - É possível conferir se um recurso específico é permitido com
document.featurePolicy.allowsFeature(...)
. - Você pode consultar uma lista dos domínios usados na página atual que permitem um
recurso especificado com
document.featurePolicy.getAllowlistForFeature()
.
Confira a postagem de introdução à política de recursos para mais detalhes.
E muito mais.
Essas são apenas algumas das mudanças no Chrome 74 para desenvolvedores. É claro, há muito mais. Pessoalmente, estou muito empolgado com o KV Storage, um serviço de armazenamento de chave-valor super rápido, assíncrono e disponível como teste de origem.
O Google I/O vai acontecer em breve!
E não se esqueça: o Google I/O está daqui a algumas semanas (de 7 a 9 de maio), e teremos muitas novidades para você. Se não puder participar, todas as sessões serão transmitidas ao vivo e, depois, disponíveis no nosso canal do YouTube para desenvolvedores do Chrome.
Fazer inscrição
Para ficar por dentro dos nossos vídeos, inscreva-se no nosso canal de desenvolvedores do Chrome no YouTube. Você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.
Sou Pete LePage e, assim que o Chrome 75 for lançado, estarei aqui para informar as novidades do Chrome.