Novidades no Chrome 65

Pete LePage

E tem muito mais!

Meu nome é Pete LePage. Vamos conhecer as novidades do Chrome 65 para os desenvolvedores!

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

API CSS Paint

A API CSS Paint permite gerar de maneira programática 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 mais elementos DOM para criar o efeito de ondulação em um botão com estilo do Material Design, você pode usar a API Pintura.

É 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 dele.

API Server Timing

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

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

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

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

Elas são mostradas no Chrome DevTools ou você pode extraí-las do cabeçalho de resposta e salvá-las com outras análises de desempenho.


display: contents

A nova propriedade CSS display: contents é bem eficiente.

Quando adicionado a um elemento de contêiner, todos os filhos ocupam o lugar no DOM e ele basicamente desaparece. Digamos que eu tenho dois divs, um dentro do outro. Meu div externo tem uma borda vermelha, um plano de 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 fica no div externo.

Eu sou o interior <div>

Adicionar display: contents ao div externo faz o div externo desaparecer e as restrições dele não são mais aplicadas ao div interno. O div interno agora tem 100% de largura.

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

Há muitos casos em que isso pode ser útil, mas o mais comum é com o 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 organizados usando as mesmas regras aplicadas ao pai.

Confira a excelente postagem de Rachel Andrew (em inglês) Como liberar caixas com conteúdo de display para mais detalhes e outros exemplos.

E muito mais.

Essas são apenas algumas das mudanças no Chrome 65 para desenvolvedores. É claro que há muito mais.

Confira Novidades no Chrome DevTools para saber as novidades do DevTools no Chrome 65. 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 e 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 66 for lançado, terei aqui as novidades do Chrome!