Novità di Chrome 65

Pete LePage

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 le 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.

Anziché fare riferimento a un'immagine, puoi utilizzare la nuova funzione di colorazione e disegnare l'immagine, come un elemento canvas.

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

Ad esempio, invece di aggiungere altri elementi DOM a crea l'effetto a onde su un pulsante in stile material (materiale), potresti usare l'API Paint.

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

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

API Server Timing

Se tutto va bene, stai utilizzando le API di navigazione e temporizzazione delle risorse per monitorare rendimento del tuo sito per utenti reali. Finora, non c'è stato un facile per consentire al server di reportare le tempistiche delle sue prestazioni.

La nuova API Server Timing ti consente server per passare informazioni sulle tempistiche al browser; per offrirti un quadro migliore del rendimento complessivo.

Puoi monitorare tutte le metriche che vuoi: tempi di lettura del database, tempo di avvio o in base a ciò che per te è importante, 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 escluderle dalla risposta e salvarle insieme ad altre analisi sul rendimento.


display: contents

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

Quando vengono aggiunti a un elemento container, tutti gli elementi figlio occupano il suo posto nel DOM, e praticamente scompare. Supponiamo che ne abbia due di div, uno all'interno e 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.

Sono il <div> interno

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

Usa DevTools per ispezionare il DOM e nota che il div esterno esiste ancora.

Questo potrebbe essere utile in molti casi, ma il più comune è con flexbox. Con flexbox, solo gli elementi figlio immediati di un container flessibile diventano flessibili.

Tuttavia, una volta che applichi display: contents a un asset secondario, i relativi elementi figlio diventano flessibili e vengono stabilite utilizzando le stesse regole che sarebbero state applicate il genitore.

Dai un'occhiata all'ottimo post di Rachel Andrew Scatole espositore con contenuti espositivi per ulteriori dettagli e altri esempi.

E tanto altro.

Queste sono solo alcune delle modifiche di Chrome 65 per gli sviluppatori, ovviamente. ce n'è molto altro.

dai un'occhiata alle novità di Chrome DevTools. per scoprire le novità di DevTools in Chrome 65. Se ti interessa Scopri le nuove app web progressive Serie di video PWA Roadshow. Quindi, fai clic sul pulsante Iscriviti nelle nostre canale YouTube e riceverai una notifica via email ogni volta che viene lanciato un nuovo video.

Sono Pete LePage e, non appena verrà rilasciato Chrome 66, riuscirò a qui per dirti le novità di Chrome.