- L'API CSS Paint ti consente di generare un'immagine in modo programmatico.
- L'API Server Timing consente ai server web di fornire informazioni sulle tempistiche delle prestazioni tramite intestazioni HTTP.
- la nuova proprietà CSS
display: contents
può far sparire le caselle.
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.
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%.
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.
- La sintassi per specificare le coordinate
HSL
eHSLA
, nonché le coordinateRGB
eRGBA
per la proprietà color ora corrispondono alle specifiche CSS Color 4. - È disponibile una nuova norma relativa alle funzionalità che ti consente di controllare gli XHR sincroni tramite un'intestazione HTTP o l'attributo iframe
allow
.
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.