- A API CSS Paint permite gerar uma imagem de forma programática.
- A API Server Timing permite que os servidores da Web forneçam informações de tempo de desempenho por meio de cabeçalhos HTTP.
- a nova propriedade
display: contents
do CSS pode fazer as caixas desaparecerem.
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 div
s, 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.
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.
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.
- A sintaxe para especificar as coordenadas
HSL
eHSLA
, eRGB
eRGBA
para a propriedade de cor agora corresponde à especificação CSS Color 4. - Há uma nova política de recursos que permite
controlar XHRs síncronos por meio de um cabeçalho HTTP ou do
atributo
allow
de iframe.
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!