Perché abbiamo creato gli strumenti della griglia CSS?
Griglia CSS è un potente sistema di layout CSS che consente agli sviluppatori web di creare un layout bidimensionale complesso e di definire regole relative alle dimensioni, all'allineamento e all'ordine di ogni singolo elemento secondario di una griglia. La griglia CSS è stata introdotta dopo che Flexbox è diventata popolare e, insieme, possono aiutare gli sviluppatori a ottenere un design reattivo migliore senza complicati attacchi di allineamento o layout con JavaScript.
Essendo un sistema di layout relativamente nuovo, anche la griglia CSS è difficile da definire. La sua sintassi è piuttosto versatile (basta cercare nella scheda di riferimento della griglia), esistono molti modi per ottenere lo stesso layout e il dimensionamento flessibile e le tracce implicite rendono più difficile ragionare sul motivo per cui il layout è o non si comporta come dovrebbe. Questo è il motivo per cui abbiamo deciso di fornire strumenti della griglia CSS dedicati in DevTools, in modo che gli sviluppatori possano capire meglio cosa sta facendo il loro codice CSS e come ottenere il layout giusto.
Progettazione di strumenti
Uno sforzo congiunto tra Chrome ed Edge
Gli strumenti della griglia CSS hanno catturato l'attenzione sia di Chrome DevTools che di Edge DevTools. Abbiamo deciso di collaborare sin dall'inizio. Abbiamo condiviso le nostre risorse di prodotto, progettazione e progettazione di entrambi i team e coordinato settimanalmente questo obiettivo.
Riepilogo delle funzionalità
Esistono tre funzionalità principali per gli strumenti della griglia CSS:
- Overlay permanente specifico della griglia che facilita le informazioni su dimensioni e ordinamento
- Badge nell'albero DOM che mettono in evidenza i contenitori della griglia CSS e attivano o disattivano gli overlay della griglia
- Un riquadro della barra laterale che consente agli sviluppatori di personalizzare la visualizzazione degli overlay DOM (ad esempio la modifica del colore e della larghezza delle regole)
- Un editor della griglia CSS nel riquadro Stili
Ora daremo un'occhiata più da vicino.
Overlay permanenti a griglia
In DevTools, un overlay è un potente strumento che fornisce informazioni su layout e stile di un singolo elemento:
Queste informazioni aggiuntive vengono sovrapposte all'elemento che ti interessa. In precedenza, quando passi il mouse sopra una griglia con DevTools aperto, l'overlay mostrava le informazioni del modello a riquadro, ma limitava l'evidenziazione dei contenuti agli elementi della griglia senza spiegare il motivo. Ci sono due parti principali che vorremmo aggiungere per gli overlay griglia CSS:
- vogliamo mostrare informazioni più utili sulle griglie, ad esempio dimensioni e intervalli vuoti creati
- vogliamo rendere persistenti gli overlay in modo da poter visualizzare più griglie contemporaneamente e vedere gli overlay che aggiornano le informazioni sulla griglia quando cambiano gli stili degli elementi.
Diamo un'occhiata a come li abbiamo ottenuti.
Dimensioni create e dimensioni calcolate
Una delle parti più difficili del debug della griglia CSS sono i molti modi per definire le dimensioni delle tracce della griglia. Ad esempio, puoi utilizzare una combinazione di valori di pixel, valori percentuali, frazioni, funzione di ripetizione e funzione minmax per creare dimensioni delle tracce versatili:
.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 alle dimensioni delle tracce calcolate calcolate dal browser. Per colmare questo divario, mettiamo queste due informazioni affiancate sull'overlay:
La stringa prima del punto è il valore creato, mentre la stringa dopo il punto rappresenta il valore calcolato effettivo.
In precedenza, DevTools non aveva la possibilità di ottenere valori creati dall'autore. In teoria, potremmo in qualche modo analizzare autonomamente i valori creati in DevTools e calcolarli secondo le specifiche della griglia CSS. Ciò avrebbe comportato molti scenari complicati e, in sostanza, sarebbe solo una copia degli sforzi di Blink. Di conseguenza, con l'aiuto del team di stile di Blink, abbiamo ottenuto una nuova API dal motore degli stili che espone i "valori a cascata". Un valore a cascata è il valore effettivo finale, dopo l'applicazione a cascata di CSS, per una proprietà CSS. Si tratta del valore che vincitore 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 stiamo utilizzando questa API per visualizzare i valori creati dall'autore negli overlay griglia.
Overlay persistenti
Prima degli strumenti della griglia CSS, l'overlay in DevTools era semplice: passavi il mouse sopra un elemento nel riquadro dell'albero DOM di DevTools o direttamente nella pagina ispezionata e vedrai un overlay che descrive questo elemento. Passa il mouse lontano e l'overlay scompare. Per gli overlay Griglia, volevamo qualcosa di diverso: più griglie potevano essere evidenziate contemporaneamente e gli overlay Griglia potevano rimanere attivi mentre i normali overlay al passaggio del mouse continueranno a funzionare.
Ad esempio:
Tuttavia, l'overlay in DevTools non è stato progettato pensando a questo meccanismo persistente a più elementi (è stato creato molti anni fa). Pertanto, abbiamo dovuto ridefinire il design dell'overlay per far sì che funzionasse. Abbiamo aggiunto un nuovo GridHighlightTool a una suite di strumenti di evidenziazione esistente, che in seguito si è evoluta in una PersistentTool globale per evidenziare tutti gli overlay persistenti contemporaneamente. Per ogni tipo di overlay permanente (Griglia, Flex e così via), manteniamo un rispettivo campo di configurazione all'interno dello strumento permanente. Ogni volta che l'evidenziatore overlay controlla cosa disegnare, includerà anche queste configurazioni.
Per consentire a DevTools di controllare gli elementi da evidenziare, 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
in cui ogni GridNodeHighlightConfig contiene informazioni sul nodo da disegnare e su come. In questo modo possiamo aggiungere un meccanismo permanente con più elementi senza interrompere l'attuale comportamento di passaggio del mouse.
Badge della griglia in tempo reale
Per aiutare gli sviluppatori ad attivare e disattivare facilmente gli overlay Griglia, abbiamo deciso di aggiungere piccoli badge accanto ai contenitori Griglia nell'albero DOM. Questi badge possono anche aiutare gli sviluppatori a identificare i contenitori della griglia nelle loro strutture DOM.
Modifiche all'albero DOM
Poiché i badge Grid non sono gli unici che vorremmo mostrare nell'albero del DOM, vorremmo facilitarne il più possibile l'aggiunta. ElementsTreeElement, la classe responsabile della creazione e della gestione di singoli elementi dell'albero DOM in DevTools, è stata aggiornata con diversi nuovi metodi pubblici per configurare i badge. Se ci sono più badge per un elemento, questi vengono ordinati per categorie di badge e, se appartengono alla stessa categoria, i nomi in ordine alfabetico. Le categorie disponibili includono Security, Layout e così via, mentre Grid appartiene alla categoria Layout.
Inoltre, fin dall'inizio offriamo assistenza integrata per l'accessibilità. Ogni badge interattivo deve fornire un aria-label predefinito e uno attivo, mentre i badge di sola lettura utilizzano i relativi nomi come aria-label.
Come abbiamo ricevuto gli aggiornamenti di stile in tempo reale?
Molte modifiche al DOM si riflettono in tempo reale nell'albero DOM di DevTools. Ad esempio, i nodi appena aggiunti vengono visualizzati all'istante nell'albero DOM e anche i nomi delle classi rimossi scompaiono all'istante. Vogliamo che lo stato del badge Griglia rifletta anche le stesse informazioni aggiornate. Tuttavia, questa operazione si è rivelata difficile da implementare, perché DevTools non aveva modo di ricevere notifiche quando gli elementi visualizzati nell'albero DOM ricevevano aggiornamenti dello stile calcolati. L'unico modo per sapere quando un elemento diventa o smette di essere un contenitore della griglia è eseguire costantemente query sul browser per ottenere le informazioni aggiornate di stile di ogni elemento. Sarebbe proibitamente costoso.
Per consentire al front-end di sapere più facilmente quando viene aggiornato lo stile di un elemento, abbiamo aggiunto un nuovo metodo CDP per il polling degli aggiornamenti dello stile. Per ricevere aggiornamenti di stile dei nodi DOM, inizia indicando al browser quali dichiarazioni CSS vogliamo monitorare. Nel caso dei badge della griglia, chiediamo al browser di tenere traccia di:
{
"display": "grid",
"display": "inline-grid",
}
Inviamo quindi una richiesta di polling e quando sono presenti aggiornamenti dello stile tracciati 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 nuovamente le notifiche relative agli aggiornamenti dello stile, può inviare questa richiesta di polling anziché eseguire costantemente il polling del backend da ogni singolo nodo. DevTools può anche modificare le dichiarazioni CSS monitorate inviando un nuovo elenco al browser.
Riquadro di layout
Sebbene i badge dell'albero DOM aiutino la rilevabilità delle griglie CSS, a volte vogliamo visualizzare 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 solo per gli strumenti di layout. Questo ci offre uno spazio dedicato per raccogliere tutti i contenitori della griglia e configurare tutte le opzioni per gli overlay Griglia. Questo riquadro Layout consente anche di inserire qui anche strumenti futuri che richiedono un uso intensivo del layout (ad es. Flexbox, Query Container).
Trovare elementi in base agli stili calcolati
Per visualizzare l'elenco dei contenitori della griglia CSS nel riquadro Layout, dobbiamo trovare i nodi DOM in base agli stili elaborati. Anche questo non si è rivelato facile, 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, gli altri nodi verranno recuperati solo in seguito a un'ulteriore richiesta. Ciò significa che è necessario un nuovo comando CDP per raccogliere tutti i nodi nella pagina e filtrarli in base agli stili elaborati:
# 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 container della griglia CSS in una pagina, eventualmente penetrando in iframe e root shadow, e visualizzarli nel riquadro Layout.
Conclusione
Gli strumenti CSS Grid sono stati uno dei primi progetti di strumenti di progettazione DevTools a supportare una funzionalità della piattaforma web. Ha introdotto in DevTools molti strumenti fondamentali in DevTools, ad esempio gli overlay permanenti, i badge dell'albero DOM e il riquadro Layout. Inoltre, ha spianato la strada a futuri strumenti di layout in Chrome DevTools come le query Flexbox e Container. Ha inoltre gettato le basi per gli editor Grid e Flexbox, che consentono agli sviluppatori di modificare gli allineamenti Grid e Flexbox in modo interattivo. Esamineremo questi passaggi 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 in anteprima ti consentono di accedere alle ultime funzionalità DevTools, testare le API delle piattaforme web all'avanguardia e individuare eventuali 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 qualsiasi altra informazione relativa a DevTools.
- Inviaci un suggerimento o un feedback tramite crbug.com.
- Segnala un problema di DevTools utilizzando Altre opzioni
> Guida > Segnala i problemi di DevTools in DevTools. - Tweet all'indirizzo @ChromeDevTools.
- Lascia commenti sui video di YouTube o sui suggerimenti di DevTools sui video di YouTube di DevTools.