Novità di Chrome 65

Pete LePage

E c'è molto altro ancora.

Mi chiamo Pete LePage. Analizziamo le novità di Chrome 65 per gli sviluppatori.

Vuoi l'elenco completo delle modifiche? Consulta l'elenco delle modifiche al repository di codice sorgente di Chromium.

API CSS Paint

L'API CSS Paint ti consente di generare in modo programmatico un'immagine per le proprietà CSS come background-image o border-image.

Invece di fare riferimento a un'immagine, puoi usare la nuova funzione paint per disegnare l'immagine, in modo molto simile a un elemento canvas.

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

Ad esempio, invece di aggiungere ulteriori elementi DOM per creare l'effetto a onde su un pulsante con stile materiale, puoi utilizzare l'API Paint.

Si tratta inoltre di un metodo efficace per il polyfill delle funzionalità CSS non ancora supportate in un browser.

Surma ha un ottimo post con diverse demo nel suo video esplicativo.

API Server Timing

Ci auguriamo che tu stia utilizzando le API di navigazione e tempi delle risorse per monitorare le prestazioni del tuo sito per gli utenti reali. Finora, il server non aveva un modo semplice per generare report sulle tempistiche delle prestazioni.

La nuova API Server Timing consente al server di passare al browser le informazioni di temporizzazione, offrendo un quadro migliore delle prestazioni complessive.

Puoi tenere traccia di tutte le metriche che vuoi: tempi di lettura del database, tempo di avvio o qualsiasi cosa sia importante per te aggiungendo un'intestazione Server-Timing alla tua risposta:

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

Vengono mostrate in Chrome DevTools oppure puoi estrarle dall'intestazione della risposta e salvarle con altre analisi delle prestazioni.


display: contents

La nuova proprietà CSS display: contents è molto efficiente.

Quando vengono aggiunti a un elemento contenitore, gli eventuali elementi secondari vengono inseriti nel DOM e scompare. Supponiamo che io abbia due div, uno all'interno dell'altro. La mia div esterna ha un bordo rosso, uno sfondo grigio e ho impostato una larghezza di 200 pixel. L'elemento div interno ha un bordo blu e uno sfondo azzurro.

.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;
}

Per impostazione predefinita, il div interno si trova all'interno dell'elemento div esterno.

Sono l'<div> interiore

Se aggiungi display: contents al div esterno, il div esterno scompare e i suoi vincoli non vengono più applicati al div interno. La larghezza interna div ora è al 100%.

Utilizza DevTools per esaminare il DOM e notare che l'elemento div esterno esiste ancora.

Ci sono molti casi in cui questo può essere utile, ma il più comune è con flexbox. Con flexbox, solo gli elementi secondari immediati di un container flessibile diventano elementi flessibili.

Tuttavia, una volta applicato display: contents a un asset secondario, i relativi elementi secondari diventano elementi flessibili e vengono disposti utilizzando le stesse regole che verrebbero applicate al padre.

Per ulteriori dettagli e altri esempi, dai un'occhiata all'eccellente post di Rachel Andrew su Caselle di vaneggi con contenuti display.

E tanto altro.

Queste sono solo alcune delle modifiche di Chrome 65 per gli sviluppatori. Ovviamente, ce ne sono molte altre.

Dai un'occhiata alle Novità di Chrome DevTools per scoprire le novità di DevTools in Chrome 65. Se ti interessano le app web progressive, guarda la nuova serie di video PWA Roadshow. Poi, fai clic sul pulsante Iscriviti sul nostro canale YouTube e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Mi chiamo Pete LePage e, non appena uscirà Chrome 66, sarò qui per raccontarvi le novità di Chrome.