Novità di Chrome 65

Pete LePage

• L'API CSS Paint ti consente di generare un'immagine in modo programmatico.
• L'API Server Timing consente ai server web di fornire informazioni sulla tempistica delle prestazioni tramite intestazioni HTTP.
• la nuova proprietà display: contents CSS può far sparire le caselle.

E ce n'è molto altro.

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

Vuoi l'elenco completo delle modifiche? Consulta l'elenco delle modifiche al repository di codice sorgente 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.

Anziché fare riferimento a un'immagine, puoi utilizzare la nuova funzione di colorazione per disegnare l'immagine, proprio come 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 Material, puoi utilizzare l'API Paint.

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

Sandro ha un bellissimo post con diverse demo nel suo spiegatore.

API Server Timing

Speriamo che tu stia utilizzando le API di navigazione e temporizzazione delle risorse per monitorare le prestazioni del tuo sito per gli utenti reali. A oggi, il server non ha avuto un modo semplice per indicare le tempistiche delle prestazioni.

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

Puoi monitorare 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 le altre analisi delle prestazioni.

display: contents

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

Quando viene aggiunto a un elemento container, ogni elemento figlio occupa il suo posto nel DOM, ma sostanzialmente scompare. Supponiamo che ne abbia due di div, uno dentro l'altro. Il mio div esterno 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 celeste.

.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 valore div interno è contenuto nell'elemento div esterno.

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

Questo potrebbe essere utile in molti casi, ma il più comune è 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 configurati utilizzando le stesse regole che sarebbero state applicate all'elemento principale.

Dai un'occhiata all'eccellente post di Rachel Andrew "Vanishing box with display content" per ulteriori dettagli e altri esempi.

E altro ancora

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

• La sintassi per specificare HSL e HSLA e le coordinate RGB e RGBA per la proprietà color ora corrisponde alla specifica CSS Color 4.
• È disponibile un nuovo criterio di funzionalità che consente di controllare gli XHR sincroni tramite un'intestazione HTTP o l'attributo allow iframe.

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

Mi chiamo Pete LePage e, non appena verrà rilasciato Chrome 66, ti comunicherò le novità di Chrome.