Novidades no Chrome 65

Pete LePage

E tem muito mais.

Meu nome é Pete LePage. Vamos nos aprofundar e conhecer as novidades para desenvolvedores no Chrome 65.

Quer a lista completa de alterações? Consulte a lista de alterações do repositório de origem do Chromium.

API CSS Paint

Com a API CSS Paint, é possível gerar programaticamente uma imagem para propriedades CSS, como background-image ou border-image.

Em vez de referenciar uma imagem, você pode usar a nova função paint para desenhar a imagem, de forma semelhante a um elemento de tela.

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

Por exemplo, em vez de adicionar outros elementos DOM para criar o efeito de ondulação em um botão estilizado do Material Design, você pode usar a API Paint.

Ele também é um método eficiente de polyfilling de recursos CSS que ainda não são compatíveis com um navegador.

Surma tem uma ótima postagem com várias demonstrações na explicação (link em inglês).

API Server Timing

Esperamos que você esteja usando as APIs de tempo de recursos e navegação para acompanhar o desempenho do seu site para usuários reais. Até agora, não havia uma maneira fácil de o servidor informar o tempo de desempenho.

A nova API Server Timing permite que seu servidor transmita informações de tempo para o navegador, oferecendo uma visão melhor do seu desempenho geral.

É possível acompanhar quantas métricas quiser, como tempos de leitura do banco de dados, tempo de inicialização ou o que for importante para você, adicionando um cabeçalho Server-Timing à resposta:

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

Eles são mostrados no Chrome DevTools, mas também é possível retirá-los do cabeçalho da resposta e salvá-los com sua outra análise de desempenho.


display: contents

A nova propriedade CSS display: contents é bem eficiente.

Quando adicionados a um elemento de contêiner, todos os filhos tomam seu lugar no DOM e ele basicamente desaparece. Digamos que eu tenha dois divs, um dentro do outro. Minha div externa tem uma borda vermelha, um fundo cinza, e eu defini uma largura de 200 pixels. A div interna tem uma borda azul e um plano de fundo azul-claro.

.disp-contents-outer {
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}
.disp-contents-inner {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

Por padrão, o div interno está contido no div externo.

Sou o que há de dentro <div>

Adicionar display: contents à div externa faz com que a div externa desaparece e as restrições dela não sejam mais aplicadas à div interna. O div interno agora tem 100% de largura.

Use o DevTools para inspecionar o DOM e observe que a div externa ainda existe.

Em muitos casos, isso pode ser útil, mas o mais comum é com flexbox. Com o flexbox, apenas os filhos imediatos de um contêiner flexível se tornam itens flexíveis.

No entanto, depois de aplicar display: contents a um filho, os filhos dele se tornam itens flexíveis e são dispostos usando as mesmas regras que seriam aplicadas ao pai.

Confira a excelente postagem de Rachel Andrew sobre Como usar caixas com conteúdo de exibição para mais detalhes e outros exemplos.

E muito mais

Estas são apenas algumas das mudanças do Chrome 65 para desenvolvedores. Há muito mais.

Confira a página Novidades do Chrome DevTools para saber as novidades do DevTools no Chrome 65. Se você tiver interesse em Progressive Web Apps, confira a nova série de vídeos PWA Roadshow. Depois, clique no botão Inscrever-se no nosso canal do YouTube para receber uma notificação por e-mail sempre que lançarmos um novo vídeo.

Meu nome é Pete LePage, e assim que o Chrome 66 for lançado, estarei aqui para contar as novidades do Chrome!