- A manipulação de CSS se torna mais fácil com o novo objeto de modelo tipado de 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 nos aprofundar e conhecer as novidades para desenvolvedores no Chrome 66.
Quer a lista completa de alterações? Consulte o 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 JavaScript, usou o CSS modelo de objeto. mas retorna tudo como uma string.
el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?
Para animar a propriedade opacity
, seria preciso converter a string em um número,
incrementar o valor e aplicar as alterações. 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 objetos tipados de CSS, os valores CSS são expostos conforme digitados objetos JavaScript, eliminando grande parte da manipulação de tipo e fornecendo uma maneira mais prática de trabalhar com CSS.
Em vez de usar element.style
, você acessa os estilos pela
propriedade .attributeStyleMap
ou .styleMap
. Eles retornam um objeto semelhante a um mapa.
que facilite 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 modelo de objeto CSS antigo, os primeiros comparativos mostram cerca de 30% de melhoria 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
Isso também ajuda a eliminar bugs causados por esquecer de transmitir o valor de uma a um número e processa automaticamente o arredondamento e o fechamento de e a distribuição dos valores dos dados. Além disso, há alguns métodos novos para lidar com as unidades conversões, aritmética e igualdade.
el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1
Eric fez uma ótima postagem com várias demonstrações e exemplos explicação.
API Async Clipboard
const successful = document.execCommand('copy');
Cópia síncrona e colar usando document.execCommand
pode ser aceitável para texto
partes de texto, mas há uma boa chance de que seja síncrono
a natureza bloqueará 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 maneira assíncrona. integra-se com a API de permissão para fornecer uma melhor experiência para os usuários.
Para copiar o texto para a área de transferência, chame 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ão resolvidas ou rejeitadas dependendo
do texto que transmitimos
foi copiado com sucesso.
Da mesma forma, o texto pode ser lido na área de transferência chamando getText()
e
aguardando a resolução da promessa retornada 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 da tela BitmapRenderer
O elemento canvas
permite manipular gráficos no nível de pixel, você pode
podem desenhar gráficos, manipular fotos ou até mesmo processar vídeos em tempo real.
No entanto, a menos que você esteja começando com uma canvas
em branco, é necessária uma maneira de renderizar
uma imagem no canvas
.
Historicamente, isso significa criar uma tag image
e processá-la
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 é
simplificou a exibição de objetos ImageBitmap
. Agora, eles renderizam mais
de forma eficiente e com menos instabilidade, trabalhando de modo assíncrono e evitando o uso de memória
duplicação.
Para usá-lo:
- Chame
createImageBitmap
e entregue um blob de imagem para criar a imagem. - Acesse o contexto
bitmaprenderer
docanvas
. - Depois, transfira a imagem para dentro dela.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);
Pronto, a imagem foi renderizada.
AudioWorklet
Os Worklets estão dentro! O PaintWorklet, fornecido no Chrome 65, está sendo ativado. AudioWorklet por padrão no Chrome 66. Esse novo tipo de Worklet pode ser usado para processar áudio na linha de execução dedicada, substituindo o script ScriptProcessorNode legado que é executado na linha de execução principal. Cada AudioWorklet é executado em um escopo global próprio, reduzindo a latência e aumentando a estabilidade da capacidade de processamento.
Há alguns exemplos interessantes do AudioWorklet Labs do Google Chrome.
E muito mais.
Estas são apenas algumas das mudanças do Chrome 66 para os desenvolvedores, obviamente, há muito mais.
TextArea
eSelect
agora oferecem suporte ao atributoautocomplete
.- A definição de
autocapitalize
em um elementoform
será aplicada a qualquer formulário filho do Safari, melhorando a compatibilidade com a implementação do Safariautocapitalize
: trimStart()
etrimEnd()
agora estão disponíveis como a forma baseada em padrões de cortar espaços em branco das strings.
Confira as Novidades do Chrome DevTools, para conhecer as novidades do DevTools no Chrome 66. E, caso tenha interesse Apps Web Progressivos, confira o novo Série de vídeos PWA Roadshow. Em seguida, clique no botão Inscrever-se na nossa Canal do YouTube você 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, terei certeza aqui para contar as novidades do Google Chrome.