Perché abbiamo creato CSS Grid Tooling?
CSS Grid è un potente sistema di layout CSS che consente agli sviluppatori web di creare un layout bidimensionale complesso e di stabilire delle regole per stabilire le dimensioni, l'allineamento e l'ordine di ogni elemento secondario in una griglia. CSS Grid è stata introdotta dopo che Flexbox è diventata popolare e, insieme, può aiutare gli sviluppatori a migliorare il responsive design senza complicati passaggi per l'allineamento o il layout assistito da JavaScript.
Poiché si tratta di un sistema di layout relativamente nuovo, anche CSS Grid è difficile da implementare. La sua sintassi è piuttosto versatile (basta cercare la scheda di riferimento della griglia), ci sono molti modi per ottenere lo stesso layout e dimensioni flessibili e tracce implicite rendono più difficile capire perché il layout sta o non ha il comportamento previsto. Per questo motivo abbiamo deciso di fornire strumenti di griglia CSS dedicati in DevTools, in modo che gli sviluppatori possano comprendere meglio il funzionamento del loro codice CSS e come arrivare al layout giusto.
Progettazione di utensili
Uno sforzo congiunto tra Chrome ed Edge
Gli strumenti di griglia CSS hanno catturato l'attenzione di Chrome DevTools ed Edge DevTools. Abbiamo deciso di collaborare dall'inizio. Abbiamo condiviso le nostre risorse su prodotti, progettazione e progettazione da entrambi i team e abbiamo coordinato settimanalmente la realizzazione di questo obiettivo.
Riepilogo delle funzionalità
Gli strumenti CSS Grid sono tre:
- Overlay permanente specifica per la griglia che aiuta con le informazioni dimensionali e di ordinamento
- Badge nell'albero DOM che evidenziano i contenitori della griglia CSS e attiva gli overlay della griglia
- Un riquadro della barra laterale che consente agli sviluppatori di personalizzare la visualizzazione degli overlay DOM (ad es. modificando il colore e la larghezza delle regole)
- Un editor della griglia CSS nel riquadro Stili
Esaminiamoli più a fondo nel prossimo video.
Overlay permanenti a griglia
In DevTools, un overlay è un potente strumento che fornisce informazioni sul layout e sullo stile di un singolo elemento:
Queste informazioni aggiuntive vengono sovrapposte all'elemento di interesse. In precedenza, quando passavi il mouse sopra una griglia con DevTools aperto, l'overlay mostrava le informazioni sul modello a scatola, ma limitava l'evidenziazione dei contenuti agli elementi della griglia senza spiegare il motivo. Ci sono due elementi principali che vorremmo aggiungere per gli overlay CSS Grid:
- vogliamo mostrare informazioni più utili sulle griglie, ad esempio dimensioni e lacune create
- vogliamo rendere gli overlay fissi, in modo da poter visualizzare più griglie contemporaneamente e possiamo notare che gli overlay aggiornano le informazioni della griglia man mano che cambiamo gli stili degli elementi.
Diamo un'occhiata a come li abbiamo raggiunti.
Confronto tra dimensioni create dall'autore e dimensioni calcolate
Una delle parti difficili del debug di CSS Grid sono i molti modi per definire le dimensioni della traccia della griglia. Ad esempio, per creare dimensioni di traccia versatili, puoi utilizzare una combinazione di valori pixel, valori percentuali, frazioni, funzione di ripetizione e funzione minmax:
.grid-cards {
display: grid;
width: 200px;
height: 300px;
grid-template-rows: 20% 0.3fr 100px minmax(100px, auto);
grid-template-columns: repeat(3, minmax(200px, 1fr));
}
Tuttavia, sarebbe difficile mappare queste dimensioni delle tracce create in base alle dimensioni delle tracce computed calcolate dal browser. Per colmare questa lacuna, mettiamo queste due informazioni affiancate sull'overlay:
La stringa prima del punto è il valore creato, mentre la stringa dopo il punto rappresenta il valore effettivo calcolato.
In precedenza, DevTools non era in grado di ottenere i valori creati. In teoria, potremmo analizzare noi stessi i valori creati in DevTools e calcolarli in base alle specifiche della griglia CSS. Ciò avrebbe comportato molti scenari complicati e, in sostanza, sarebbe solo una duplicazione degli sforzi di Blink. Pertanto, con l'aiuto del team Style di Blink, abbiamo ricevuto una nuova API dal motore di stile che espone i "valori a cascata". Un valore a cascata è il valore effettivo finale, dopo la cascata CSS, per una proprietà CSS. Si tratta del valore che risulta vincente dopo che il motore di stile ha compilato tutti i fogli di stile, ma prima di calcolare effettivamente qualsiasi valore, ad esempio percentuale, frazioni e così via.
Ora utilizziamo questa API per visualizzare i valori creati negli overlay a griglia.
Overlay permanenti
Prima di utilizzare gli strumenti della griglia CSS, l'overlay in DevTools era semplice: passavi il mouse sopra un elemento, nel riquadro DOM di DevTools o direttamente nella pagina ispezionata, per visualizzare un overlay che descrive l'elemento. Ti allontani con il mouse e l'overlay scompare. Per gli overlay griglia, volevamo qualcosa di diverso: è possibile evidenziare più griglie contemporaneamente e gli overlay griglia possono rimanere attivi mentre i normali overlay al passaggio del mouse sono ancora funzionanti.
Ad esempio:
Tuttavia, l'overlay in DevTools non è stato progettato tenendo conto di questo meccanismo permanente multi-elemento (creato molti anni fa). Di conseguenza, abbiamo dovuto rifattorizzare il design dell'overlay per far sì che funzionasse correttamente. Abbiamo aggiunto un nuovo GridHighlightTool a una suite di strumenti per l'evidenziazione esistente, che in seguito si è evoluta in un PersistentTool globale per mettere in evidenza contemporaneamente tutti gli overlay permanenti. Per ogni tipo di overlay permanente (Griglia, Flex e così via), è presente un rispettivo campo di configurazione all'interno dello strumento permanente. Ogni volta che l'evidenziatore in overlay controlla cosa disegnare, saranno incluse anche queste configurazioni.
Per consentire a DevTools di controllare ciò che deve essere evidenziato, abbiamo creato un nuovo comando CDP per l'overlay permanente della griglia:
# Highlight multiple elements with the CSS Grid overlay.
command setShowGridOverlays
parameters
# An array of node identifiers and descriptors for the highlight appearance.
array of GridNodeHighlightConfig gridNodeHighlightConfigs
dove ogni elemento GridNodeHighlightConfig contiene informazioni su quale nodo tracciare e come. In questo modo possiamo aggiungere un meccanismo permanente con più elementi senza interrompere l'attuale comportamento al passaggio del mouse.
Badge griglia in tempo reale
Per aiutare gli sviluppatori ad attivare e disattivare facilmente gli overlay griglia, abbiamo deciso di aggiungere piccoli badge accanto ai container Griglia nell'albero DOM. Questi badge possono anche aiutare gli sviluppatori a identificare i container Grid nelle loro strutture DOM.
Modifiche all'albero DOM
Poiché i badge Grid non sono gli unici che intendiamo visualizzare nell'albero DOM, vorremmo semplificare il più possibile l'aggiunta di badge. ElementsTreeElement, il corso responsabile della creazione e della gestione dei singoli elementi dell'albero DOM in DevTools, è stato aggiornato con diversi nuovi metodi pubblici per configurare i badge. Se sono presenti più badge per un elemento, questi vengono ordinati in base alle categorie dei badge e poi ai nomi in ordine alfabetico se si trovano nella stessa categoria. Le categorie disponibili includono Security, Layout e così via, mentre Grid appartiene alla categoria Layout.
Inoltre, sin dall'inizio abbiamo integrato un supporto per l'accessibilità. Ogni badge interattivo deve fornire un badge predefinito e uno attivo aria-label, mentre i badge di sola lettura usano i nomi dei badge aria-label.
Come abbiamo ricevuto aggiornamenti di stile in tempo reale?
Molte modifiche al DOM si riflettono nell'albero DOM di DevTools in tempo reale. Ad esempio, i nodi appena aggiunti appaiono all'istante nell'albero DOM e i nomi delle classi rimossi scompaiono all'istante. Vogliamo che anche lo stato del badge a griglia rispecchino le stesse informazioni aggiornate. Tuttavia, questo approccio si è rivelato difficile da implementare, perché DevTools non poteva ricevere notifiche quando gli elementi mostrati nell'albero DOM ricevevano aggiornamenti di stile calcolati. L'unico modo esistente per sapere quando un elemento diventa o smette di essere un contenitore della griglia è eseguire costantemente una query nel browser per trovare le informazioni aggiornate sullo stile di ogni singolo elemento. Questo approccio sarebbe proibitivo costoso.
Per consentire al front-end di sapere più facilmente quando lo stile di un elemento viene aggiornato, abbiamo aggiunto un nuovo metodo CDP per il polling degli aggiornamenti dello stile. Per ricevere aggiornamenti di stile dei nodi DOM, iniziamo comunicando al browser quali dichiarazioni CSS vogliamo monitorare. Nel caso dei badge a griglia, chiediamo al browser di tenere traccia di:
{
"display": "grid",
"display": "inline-grid",
}
Inviamo quindi una richiesta di polling e, quando ci sono aggiornamenti di stile monitorati per i nodi DOM nel riquadro Elementi, il browser invia a DevTools un elenco di nodi aggiornati e risolve la richiesta di polling esistente. Ogni volta che DevTools vuole ricevere di nuovo notifiche per gli aggiornamenti dello stile, può inviare questa richiesta di polling anziché eseguire continuamente il polling del backend da ogni singolo nodo. DevTools può anche modificare le dichiarazioni CSS monitorate inviando un nuovo elenco al browser.
Riquadro Layout
Anche se i badge dell'albero DOM favoriscono la rilevabilità delle griglie CSS, a volte vogliamo vedere un elenco di tutte le griglie CSS in una determinata pagina e attivare e disattivare facilmente i relativi overlay permanenti per eseguire il debug dei layout. Pertanto, abbiamo deciso di creare un riquadro della barra laterale dedicato esclusivamente agli strumenti di layout. In questo modo abbiamo uno spazio dedicato per raccogliere tutti i container della griglia e configurare tutte le opzioni per gli overlay griglia. Il riquadro Layout ci consente anche di inserire qui anche strumenti futuri che richiedono un uso intensivo del layout (ad es. Flexbox, Query container).
Trova elementi per stili calcolati
Per mostrare l'elenco dei container della griglia CSS nel riquadro Layout, dobbiamo trovare i nodi DOM in base agli stili calcolati. Anche questo si è rivelato poco semplice, perché non tutti i nodi DOM sono noti a DevTools quando DevTools è aperto. Al contrario, DevTools conosce solo un piccolo sottoinsieme di nodi, di solito al livello superiore della gerarchia DOM, solo per avviare l'albero DOM di Devtools. Per motivi legati alle prestazioni, altri nodi vengono recuperati solo su ulteriore richiesta. Ciò significa che abbiamo bisogno di un nuovo comando CDP per raccogliere tutti i nodi nella pagina e filtrarli in base agli stili calcolati:
# Finds nodes with a given computed style in a subtree.
experimental command getNodesForSubtreeByStyle
parameters
# Node ID pointing to the root of a subtree.
NodeId nodeId
# The style to filter nodes by (includes nodes if any of properties matches).
array of CSSComputedStyleProperty computedStyles
# Whether or not iframes and shadow roots in the same target should be traversed when returning the
# results (default is false).
optional boolean pierce
returns
# Resulting nodes.
array of NodeId nodeIds
In questo modo, il frontend di DevTools può recuperare un elenco di contenitori della griglia CSS in una pagina, eseguendo il foro in iframe e root shadow, per poi eseguirne il rendering nel riquadro Layout.
Conclusione
Gli strumenti CSS Grid sono stati uno dei primi progetti di progettazione di DevTools a supportare una funzionalità della piattaforma web. Ha introdotto molti strumenti fondamentali in DevTools, come gli overlay permanenti, i badge dell'albero DOM e il riquadro Layout, e ha aperto la strada a futuri strumenti di layout in Chrome DevTools, come le query Flexbox e Container. Ha anche gettato le basi per gli editor Grid e Flexbox, che consentono agli sviluppatori di modificare gli allineamenti di Grid e Flexbox in modo interattivo. Li esamineremo in futuro.
Scaricare i canali in anteprima
Prendi in considerazione l'utilizzo di Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di individuare i problemi sul tuo sito prima che lo facciano gli utenti.
Contattare il team di Chrome DevTools
Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o di qualsiasi altra informazione relativa a DevTools.
- Inviaci un suggerimento o un feedback tramite crbug.com.
- Segnala un problema di DevTools usando Altre opzioni
> Guida > Segnala un problema di DevTools in DevTools. - Invia un tweet all'indirizzo @ChromeDevTools.
- Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.