- 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%.
div
esterno esiste ancora.
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
eHSLA
e le coordinateRGB
eRGBA
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.