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 o Lista de alterações do repositório de origem do Chromium.

API CSS Paint

Com a API CSS Paint, você pode gerar programaticamente uma imagem para propriedades CSS, como background-image ou border-image.

Em vez de fazer referência a uma imagem, você pode usar a nova função de pintura para desenhe a imagem, como um elemento canvas.

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

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

Também é um método eficiente de polyfilling de recursos CSS que não são compatíveis em um navegador.

Surma fez uma ótima postagem com vários demonstrações na explicação dele.

API Server Timing

Espero que você esteja usando as APIs de tempo de recursos e navegação para acompanhar a o desempenho do seu site para usuários reais. Até agora, não tinha sido fácil para que o servidor informe o tempo de desempenho.

Com a nova API Server Timing, para transmitir informações de tempo ao navegador. fornecendo uma imagem melhor do seu desempenho geral.

Você pode acompanhar 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 ao seu resposta:

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

Elas são mostradas no Chrome DevTools ou você pode removê-las da resposta cabeçalho e salvá-los com suas outras análises 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 basicamente desaparece. Digamos que eu tenha dois divs, um dentro entre si. Minha div externa tem uma borda vermelha e 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 ao div externo faz o div externo desaparecer e as restrições dele não são mais aplicadas ao div interno. O interior div agora tem 100% de largura.

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

Isso pode ser útil em muitos casos, mas o mais comum é com Flexbox. Com o flexbox, somente os filhos imediatos de um contêiner flexível se tornar itens flexíveis.

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

Confira a excelente postagem de Rachel Andrew 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 os desenvolvedores, obviamente, há muito mais.

Confira as Novidades do Chrome DevTools, para conhecer as novidades do DevTools no Chrome 65. 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 66 for lançado, terei certeza aqui para contar as novidades do Google Chrome.