No Chrome 74, adicionamos suporte para:
- A criação de campos de classe privados em JavaScript agora é muito mais simples.
- É possível detectar quando o usuário solicitou uma experiência de movimento reduzido.
- Eventos de transição do CSS
- Foram adicionadas novas APIs de política de recursos para verificar se os recursos estão ativados ou não.
E tem muito mais!
Meu nome é Pete LePage. Vamos conferir as novidades para desenvolvedores no Chrome 74.
Registro de alterações
Este artigo aborda apenas alguns dos principais destaques. Confira os links abaixo para ver outras mudanças no Chrome 74.
- Novidades do Chrome DevTools (74)
- Remoção e descontinuação de recursos do Chrome 74
- Atualizações do ChromeStatus.com para o Chrome 74
- Novidades do JavaScript no Chrome 74
- Lista de mudanças do repositório de origem do Chromium
Campos de classe 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 classe privada estavam em desenvolvimento. Fico feliz em informar que
os campos de classe privada foram lançados no Chrome 74. A nova sintaxe de campos particulares é
semelhante aos campos públicos, exceto que você marca o campo como particular usando um
#
(sinal de cifrão). Pense no #
como parte do nome do campo.
class IncreasingCounter {
// Private class field
#privateValue = 0;
get value() {
return this.#privateValue;
}
increment() {
this.#privateValue++;
}
}
Os campos private
são privados. Eles são acessíveis
dentro da classe, mas não estão disponíveis fora do corpo da classe.
class SimpleClass {
_iAmPublic = 'shared';
#iAmPrivate = 'secret';
doSomething() {
...
}
}
Para saber mais sobre classes públicas e privadas, confira a postagem de Mathias sobre campos de classe.
prefers-reduced-motion
Alguns usuários relataram ter enjoo de movimento ao visualizar rolagem de paralaxe, zoom e outros efeitos de movimento. Para resolver esse problema, muitos sistemas operacionais oferecem uma opção para reduzir o movimento sempre que possível.
O Chrome agora oferece uma consulta de mídia, prefers-reduced-motion
, parte da
especificação de consultas de mídia do nível 5, que permite detectar quando essa
opção está ativada.
@media (prefers-reduced-motion: reduce)
Imagine que eu tenho um botão de inscrição que chama a atenção com um leve movimento. A nova consulta me permite desativar o movimento apenas para o botão.
button {
animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
button {
animation: none;
}
}
Confira o artigo do Tom, Move Ya! Ou talvez não, se o usuário preferir a animação reduzida. para mais detalhes.
Eventos transition
do CSS
A especificação de transições do CSS exige que eventos de transição sejam enviados quando uma transição é enfileirada, iniciada, encerrada ou cancelada. Esses eventos já são compatíveis com outros navegadores há algum tempo…
Mas, até agora, elas não eram compatíveis com o Chrome. No Chrome 74, agora é possível detectar:
transitionrun
transitionstart
transitionend
transitioncancel
Ao detectar esses eventos, é possível acompanhar ou mudar o comportamento quando uma transição é executada.
Atualizações da API Feature policy
As políticas de recursos permitem ativar, desativar e modificar 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:
- É possível acessar uma lista de recursos permitidos com
document.featurePolicy.allowedFeatures()
. - É possível verificar se um recurso específico é permitido com
document.featurePolicy.allowsFeature(...)
. - Além disso, é possível receber uma lista de 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.
Estas são apenas algumas das mudanças no Chrome 74 para desenvolvedores. Há muitas outras. Pessoalmente, estou muito animado com o armazenamento KV, um serviço de armazenamento de chave/valor super rápido e assíncrono, disponível como um teste de origem.
O Google I/O está chegando!
E não se esqueça: o Google I/O está a poucas semanas (de 7 a 9 de maio), e vamos ter muitas novidades para você. Se você não puder participar, todas as sessões serão transmitidas ao vivo e estarão disponíveis no canal do YouTube dos desenvolvedores do Chrome depois.
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 75 for lançado, vou estar aqui para contar as novidades do Chrome.