- A manipulação de CSS fica mais fácil com o novo objeto de modelo tipado do CSS.
- O acesso à área de transferência agora é assíncrono.
- Há um novo contexto de renderização para elementos da tela.
E tem muitos outros!
Meu nome é Pete LePage. Vamos em frente e ver as novidades para os desenvolvedores no Chrome 66!
Quer a lista completa de alterações? Confira a lista de alterações do repositório de origem do Chromium.
Modelo de objeto tipado do CSS
Se você já atualizou uma propriedade CSS por meio de JavaScript, então usou o modelo de objeto CSS. Mas tudo retorna como uma string.
el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?
Para animar a propriedade opacity
, eu teria que converter a string para um número e, em seguida, incrementar o valor e aplicar minhas mudanças. Não é exatamente o ideal.
function step(timestamp) {
const currentOpacity = parseFloat(el.style.opacity);
const newOpacity = currentOpacity + 0.01;
element.style.opacity = newOpacity;
if (newOpacity <= 1) {
window.requestAnimationFrame(step);
}
}
Com o novo modelo de objeto tipado do CSS, os valores CSS são expostos como objetos JavaScript tipados, eliminando a manipulação grande de tipo e proporcionando uma maneira mais sensata de trabalhar com CSS.
Em vez de usar element.style
, é possível acessar os estilos usando a propriedade .attributeStyleMap
ou .styleMap
. Eles retornam um objeto parecido com
um mapa que facilita a leitura ou atualização.
el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!
Em comparação com o antigo modelo de objetos CSS, os primeiros comparativos de mercado mostram uma melhoria de 30% nas operações por segundo, algo que é especialmente importante para animações em JavaScript.
el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles
Isso também ajuda a eliminar bugs causados ao esquecer de converter o valor de uma string para um número, além de processar automaticamente o arredondamento e a restrição de valores. Além disso, há alguns métodos novos e bem legais para lidar com conversões de unidade, aritmética e igualdade.
el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1
Érico tem uma ótima postagem com várias demonstrações e exemplos na explicação (link em inglês).
API Async Clipboard
const successful = document.execCommand('copy');
A função de copiar e colar síncrona usando document.execCommand
pode ser adequada para pequenas
partes de texto. No entanto, para qualquer outra coisa, é provável que a natureza síncrona
bloqueie a página, causando uma experiência ruim para o usuário. E o modelo de permissões entre navegadores é inconsistente.
A nova API Async Clipboard é uma substituição que funciona de maneira assíncrona e se integra à API de permissão para oferecer uma experiência melhor aos usuários.
O texto pode ser copiado para a área de transferência chamando writeText()
.
navigator.clipboard.writeText('Copy me!')
.then(() => {
console.log('Text is on the clipboard.');
});
Como essa API é assíncrona, a função writeText()
retorna uma promessa que será resolvida ou rejeitada dependendo se o texto transmitido foi copiado com êxito.
Da mesma forma, o texto pode ser lido da área de transferência chamando getText()
e
aguardando a promessa retornada ser resolvida com o texto.
navigator.clipboard.getText()
.then((text) => {
console.log('Clipboard: ', text);
});
Confira a postagem e as demonstrações de Jason na
explicação.
Ele também tem exemplos que usam funções async
.
Novo contexto de tela BitmapRenderer
O elemento canvas
permite manipular gráficos no nível do pixel, desenhar gráficos, manipular fotos ou até mesmo fazer processamento de vídeo em tempo real.
No entanto, a menos que você esteja começando com um canvas
em branco, precisará de uma maneira de renderizar
uma imagem na canvas
.
Historicamente, isso significava criar uma tag image
e renderizar o
conteúdo dela para o canvas
. Infelizmente, isso significa que o navegador precisa
armazenar várias cópias da imagem na memória.
const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0);
}
img.src = 'llama.png';
A partir do Chrome 66, há um novo contexto de renderização assíncrona que
simplifica a exibição de objetos ImageBitmap
. Agora, elas são renderizadas de modo mais
eficiente e com menos instabilidade, trabalhando de forma assíncrona e evitando a duplicação
de memória.
Para usá-lo, faça o seguinte:
- Chame
createImageBitmap
e entregue a ele um blob de imagem para criar a imagem. - Extraia o contexto
bitmaprenderer
dacanvas
. - Em seguida, transfira a imagem.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);
Pronto, renderizei a imagem!
AudioWorklet
Os Worklets entraram. O PaintWorklet é fornecido no Chrome 65 e agora estamos ativando o AudioWorklet por padrão no Chrome 66. Esse novo tipo de Worklet pode ser usado para processar áudio na linha de execução de áudio dedicada, substituindo o ScriptProcessorNode legado que era executado na linha de execução principal. Cada AudioWorklet é executado no próprio escopo global, reduzindo a latência e aumentando a estabilidade da capacidade.
Há alguns exemplos interessantes do AudioWorklet nos Labs do Google Chrome.
E muito mais.
Essas são apenas algumas das mudanças no Chrome 66 para desenvolvedores. É claro, há muito mais.
TextArea
eSelect
agora oferecem suporte ao atributoautocomplete
.- A definição de
autocapitalize
em um elementoform
será aplicada a todos os campos de formulário filhos, melhorando a compatibilidade com a implementação deautocapitalize
do Safari. trimStart()
etrimEnd()
agora estão disponíveis como a maneira baseada em padrões de cortar espaços em branco das strings.
Confira a seção Novidades do Chrome DevTools para conhecer as novidades do DevTools no Chrome 66. Se você tiver interesse nos Progressive Web Apps, confira a nova série de vídeos PWA Roadshow. Em seguida, clique no botão Inscrever-se em nosso canal do YouTube para receber uma notificação por e-mail sempre que lançarmos um novo vídeo.
Sou Pete LePage e, assim que o Chrome 67 for lançado, estarei aqui para informar as novidades do Chrome.