- A manipulação do CSS fica mais fácil com o novo Modelo de objeto tipado do CSS.
- O acesso à área de transferência agora é assíncrono.
- Há um novo contexto de renderização para elementos de tela.
E tem muito mais!
Meu nome é Pete LePage. Vamos conferir as novidades para desenvolvedores no Chrome 66.
Quer a lista completa de mudanças? Confira a lista de mudanças do repositório de origem do Chromium.
Modelo de objetos tipado do CSS
Se você já atualizou uma propriedade CSS usando JavaScript, usou o modelo de objeto CSS. Mas ele retorna tudo como uma string.
el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?
Para animar a propriedade opacity
, preciso converter a string em um número,
incrementar o valor e aplicar minhas mudanças. Não é exatamente 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 objetos tipado do CSS, os valores do CSS são expostos como objetos tipados do JavaScript, eliminando grande parte da manipulação de tipos e oferecendo uma maneira mais sensata de trabalhar com CSS.
Em vez de usar element.style
, acesse os estilos pela
propriedade .attributeStyleMap
ou .styleMap
. Elas retornam um objeto semelhante a 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 do CSS, os comparativos iniciais mostram uma melhoria de cerca de 30% nas operações por segundo, algo que é especialmente importante para animações JavaScript.
el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles
Ele também ajuda a eliminar bugs causados por esquecimento de converter o valor de uma string em um número e processa automaticamente o arredondamento e a fixação de valores. Além disso, há alguns métodos novos muito legais para lidar com conversões de unidades, aritmética e igualdade.
el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1
Eric tem um ótimo post com várias demonstrações e exemplos no explicador.
API Async Clipboard
const successful = document.execCommand('copy');
A cópia e a colagem síncronas usando document.execCommand
podem ser aceitáveis para pequenos
trechos de texto, mas para qualquer outra coisa, há uma boa chance de que a natureza síncrona
bloqueie a página, causando uma experiência ruim para o usuário. E o
modelo de permissão entre navegadores é inconsistente.
A nova API Async Clipboard é uma substituição que funciona de forma 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.
Da mesma forma, o texto pode ser lido da área de transferência chamando getText()
e
esperando que a promessa retornada seja resolvida com o texto.
navigator.clipboard.getText()
.then((text) => {
console.log('Clipboard: ', text);
});
Confira a postagem e as demonstrações de Jason no
texto explicativo.
Ele também tem exemplos que usam funções async
.
Novo contexto do Canvas BitmapRenderer
O elemento canvas
permite manipular gráficos no nível do pixel. Você pode
desenhar gráficos, manipular fotos ou até mesmo fazer o processamento de vídeo em tempo real.
No entanto, a menos que você esteja começando com uma canvas
em branco, é necessário renderizar
uma imagem na canvas
.
Historicamente, isso significava criar uma tag image
e renderizar o
conteúdo dela no 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
simplificou a exibição de objetos ImageBitmap
. Agora eles são renderizados de forma mais
eficiente e com menos instabilidade, trabalhando de forma assíncrona e evitando a duplicação
de memória.
Para usá-lo:
- Chame
createImageBitmap
e transmita um blob de imagem para criar a imagem. - Acesse o contexto
bitmaprenderer
docanvas
. - 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 estão disponíveis! O PaintWorklet foi enviado 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 legada que era executada na linha de execução principal. Cada AudioWorklet é executado no próprio escopo global, reduzindo a latência e aumentando a estabilidade de transferência.
Há alguns exemplos interessantes de AudioWorklet no Google Chrome Labs.
E muito mais.
Estas são apenas algumas das mudanças no Chrome 66 para desenvolvedores. Há muitas outras.
TextArea
eSelect
agora oferecem suporte ao atributoautocomplete
.- A configuração de
autocapitalize
em um elementoform
será aplicada a todos os campos do formulário filho, melhorando a compatibilidade com a implementação deautocapitalize
no Safari. trimStart()
etrimEnd()
agora estão disponíveis como uma forma baseada em padrões de ajuste de espaços em strings.
Confira as Novidades do Chrome DevTools para saber o que há de novo no Chrome DevTools no Chrome 66. Se você tiver interesse em apps da Web progressivos, confira a nova série de vídeos do PWA Roadshow. Depois, clique no botão inscrever-se no nosso canal do YouTube. Você vai receber uma notificação por e-mail sempre que lançarmos um novo vídeo.
Meu nome é Pete LePage, e assim que o Chrome 67 for lançado, vou estar aqui para contar as novidades do Chrome.