Una guida ai nuovi e sperimentali CSS DevTools in Firefox

Negli ultimi anni, il nostro team di Firefox ha lavorato a nuovi strumenti CSS che affrontano sia le tecniche all'avanguardia che le frustrazioni secolari. Siamo il team di Layout Tools, un sottoinsieme di Firefox Developer Tools, e la nostra ricerca è migliorare il moderno flusso di lavoro di web design.

Il web ha visto un'incredibile evoluzione nell'ultimo decennio: nuove funzionalità HTML/CSS, miglioramenti del browser e tecniche di progettazione. Il nostro team è dedito alla creazione di strumenti che corrispondano a tale innovazione in modo che designer e sviluppatori possano sfruttare più efficienza e creatività ora possibili.

In questa guida condivideremo una panoramica dei nostri sette nuovi strumenti, con storie del processo di progettazione e passaggi pratici per provare ciascuno strumento.

1. Ispettore griglia

Tutto è iniziato tre anni fa, quando la nostra esperta di layout CSS e sostenitrice dello sviluppo, Jen Simmons, ha collaborato con i membri di Firefox DevTools per creare uno strumento che aiutasse gli utenti a esaminare i layout CSS Grid.

Essendo una delle nuove funzionalità più potenti del Web moderno, CSS Grid ha rapidamente ottenuto un'adozione decente del browser, ma ha ancora una bassa adozione del sito Web. C'è una curva di apprendimento ripida e hai ancora bisogno di fallback per alcuni browser. Pertanto, parte del nostro obiettivo era aiutare a rendere popolare Grid offrendo agli sviluppatori un modo più pratico per impararlo.

Il nucleo dello strumento è un contorno della griglia, sovrapposto alla pagina, che aiuta gli sviluppatori a visualizzare come la griglia sta posizionando i loro elementi e come cambia il layout quando modificano i loro stili. Abbiamo aggiunto etichette numerate per identificare ciascuna linea della griglia, la possibilità di visualizzare fino a tre griglie contemporaneamente e la personalizzazione del colore per le sovrapposizioni. Di recente, abbiamo anche aggiunto il supporto per subgrid, una nuova specifica CSS implementata in Firefox e, si spera, presto in più browser.

Grid Inspector è stato fonte di ispirazione per tutti gli strumenti che sono seguiti. È stata anche fonte di ispirazione per un nuovo team: Layout Tools! Formati alla fine del 2017, siamo distribuiti su quattro fusi orari e collaboriamo con molti altri in Mozilla, come i nostri sviluppatori di motori di rendering e le brave persone di MDN.

Prova The Grid Inspector

1. In Firefox, visita il nostro sito di esempio Grid.
2. Apri l'Inspector con Cmd + Shift + C .
3. Attiva la sovrapposizione della griglia in uno dei tre modi seguenti:
• Pannello di layout :
  Nella sezione Griglia, seleziona la casella di controllo accanto a .content.grid-content ;
• Vista markup :
  Attiva o disattiva il badge "griglia" accanto a <div class="content grid-content"> ;
• Visualizza regole :
  Clicca il pulsante accanto a display:grid; all'interno #page-intro .grid-content ;
4. Sperimenta con Grid Inspector:
• Cambia il colore della sovrapposizione viola in rosso;
• Attiva/disattiva "Numeri di riga" o "Estendi le righe all'infinito";
• Attiva più sovrapposizioni di griglia;
• Guarda cosa succede quando disabiliti grid-gap: 15px in Regole.

Da Grid, abbiamo cercato di espandere le possibilità di ciò che può essere uno strumento CSS del browser.

“

2. Editor del percorso di forma

Il prossimo progetto su cui abbiamo lavorato è stato Shape Path Editor: il nostro primo strumento di editing visivo.

CSS Shapes ti consente di definire forme per far scorrere il testo: un cerchio, un triangolo o un poligono a più lati. Può essere utilizzato con la proprietà clip-path di ritaglio che consente di tagliare gli elementi a qualsiasi di quelle stesse forme. Queste due tecniche insieme aprono la possibilità per alcuni layout ispirati al design grafico davvero unici.

Tuttavia, la creazione di queste forme a volte complesse può essere difficile. Digitare manualmente tutte le coordinate e utilizzare le giuste unità CSS è soggetto a errori e molto lontano dalla mentalità creativa consentita da Shapes. Pertanto, abbiamo creato uno strumento che ti consente di modificare il tuo codice facendo clic e trascinando direttamente le forme sulla pagina.

Questo tipo di funzionalità, l'editing visivo, era una novità per noi e per gli strumenti del browser in generale. È un esempio di come possiamo andare oltre l'ispezione e il debug e entrare nel regno del design.

Prova l'editor del percorso di forma

1. In Firefox, visita questa pagina sul sito Web di An Event Apart.
2. Apri l'Inspector con Cmd + Shift + C e seleziona la prima immagine circolare.
3. In Regole, fare clic su icona accanto alla proprietà shape-outside .
4. Nella pagina, fai clic sui punti della forma e guarda cosa succede quando trascini per rendere la forma grande o minuscola. Cambialo in una taglia che ti sta bene.

L'editing visivo è un esempio di come possiamo andare oltre l'ispezione e il debug e entrare nel regno del design.

“

3. Editor di caratteri

Per anni, abbiamo avuto un pannello Font in Firefox che mostra un elenco informativo di tutti i font utilizzati in un sito web. Continuando il nostro tema di progettazione nel browser, abbiamo deciso di trasformarlo in un Font Editor per la messa a punto delle proprietà di un font.

Una forza trainante dietro questo progetto è stato il nostro obiettivo di supportare i caratteri variabili nello stesso momento in cui il team del motore di rendering di Firefox stava aggiungendo il supporto per esso. Variable Fonts offre ai progettisti di font un modo per offrire variazioni a grana fine lungo gli assi, come il peso, all'interno di un file di font. Supporta anche assi personalizzati, che offrono sia ai creatori di font che ai web designer una straordinaria flessibilità. Il nostro strumento rileva automaticamente questi assi personalizzati e ti offre un modo per regolarli e visualizzarli. Ciò richiederebbe altrimenti siti Web specializzati come Axis-Praxis.

Inoltre, abbiamo aggiunto una funzione che offre la possibilità di passare il mouse sopra il nome di un font per evidenziare dove viene utilizzato quel particolare font nella pagina. Ciò è utile perché il modo in cui i browser selezionano il carattere utilizzato per il rendering di una parte di testo può essere complesso e dipendere dal proprio computer. Alcuni caratteri potrebbero essere scambiati inaspettatamente con un carattere diverso a causa della sottoimpostazione del carattere.

Prova l'editor dei caratteri

1. In Firefox, visita questo sito dimostrativo di font variabili.
2. Apri l'Inspector con Cmd + Shift + C e seleziona la parola "variable" nel titolo (il selettore dell'elemento è .title__variable-web__variable ).
3. Nel terzo pannello dell'Inspector, vai al pannello Font:
• Passa il mouse sopra il nome del carattere Output Sans Regular per vedere cosa viene evidenziato;
• Prova i cursori di peso e inclinazione ;
• Dai un'occhiata alle variazioni dei caratteri preimpostate nel menu a discesa Istanze .

4. Ispettore Flexbox

I nostri strumenti Griglia, Forme e Caratteri variabili possono insieme potenziare una progettazione grafica molto avanzata sul Web, ma sono comunque all'avanguardia in base al supporto del browser. (Ci sono quasi, ma richiedono ancora dei fallback.) Non volevamo lavorare solo su nuove funzionalità: eravamo attratti dai problemi che la maggior parte degli sviluppatori web affronta quotidianamente.

Così abbiamo iniziato a lavorare su Flexbox Inspector. Dal punto di vista del design, questo è stato il nostro progetto più ambizioso e ha fatto germogliare alcune nuove strategie di ricerca sugli utenti per il nostro team.

Come Grid, CSS Flexbox ha una curva di apprendimento abbastanza ripida quando inizi per la prima volta. Ci vuole tempo per capirlo davvero e molti di noi ricorrono a tentativi ed errori per ottenere i layout desiderati. All'inizio del progetto, il nostro team non era nemmeno sicuro di aver capito Flexbox da soli e non sapevamo quali fossero le sfide principali. Quindi abbiamo migliorato la nostra comprensione e abbiamo condotto un sondaggio per scoprire ciò di cui le persone avevano più bisogno quando si trattava di Flexbox.

I risultati hanno avuto un grande effetto sui nostri piani, rendendo possibili visualizzazioni complicate come crescita/riduzione e min/max. Abbiamo continuato a lavorare con la community durante tutto il progetto incorporando feedback in prototipi visivi in ​​evoluzione e build Nightly.

Lo strumento include due parti principali: un evidenziatore che funziona in modo molto simile a Grid Inspector e uno strumento Flexbox dettagliato all'interno di Inspector. Il cuore dello strumento è un diagramma di elementi flessibili con informazioni sulle taglie.

Con l'aiuto degli ingegneri del layout Gecko, siamo stati in grado di mostrare passo dopo passo le decisioni sulle dimensioni del motore di rendering per fornire agli utenti un quadro completo del perché e come un elemento flessibile è finito con una certa dimensione.

Nota : scopri la storia completa del nostro processo di progettazione in "Progettazione di Flexbox Inspector".

Prova Flexbox Inspector

1. In Firefox, visita Bugzilla di Mozilla.
2. Apri l'Inspector con Cmd + Shift + C e seleziona l'elemento div.inner (appena dentro la barra dell'intestazione).
3. Attiva l'overlay Flexbox in uno dei tre modi seguenti:
• Pannello di layout :
  Nella sezione Flex Container, accendere l'interruttore;
• Vista markup :
  Attiva o disattiva il badge "flex" accanto a <div class="inner"> ;
• Visualizza regole :
  Clicca il pulsante accanto a display:flex .
4. Usa il pannello Flex Container per passare a un Flex Item chiamato nav#header-nav .
• Nota le taglie mostrate nel diagramma e nella tabella delle taglie;
• Aumenta e riduci la larghezza del tuo browser e guarda come cambia il diagramma.

Interludio: raddoppiare la ricerca

Come piccolo team senza un supporto formale per la ricerca degli utenti, abbiamo spesso fatto ricorso al design by dogfooding: basando le nostre opinioni sulle nostre esperienze nell'utilizzo degli strumenti. Ma dopo il successo ottenuto con il sondaggio Flexbox, sapevamo di voler essere più bravi nella raccolta dei dati per guidarci. Abbiamo condotto un nuovo sondaggio per aiutare a informare i nostri prossimi passi.

Abbiamo raccolto in crowdsourcing un elenco delle 20 maggiori sfide affrontate dagli sviluppatori web e abbiamo chiesto alla nostra community di classificarle utilizzando un formato max-diff.

Quando abbiamo scoperto che il grande vincitore delle sfide era il debug del layout CSS, abbiamo condotto un sondaggio di follow-up su bug CSS specifici per scoprire i maggiori punti deboli. Abbiamo integrato questi sondaggi con interviste agli utenti e test sugli utenti.

Abbiamo anche chiesto alle persone di classificare le loro frustrazioni con gli strumenti di sviluppo del browser. Il chiaro problema principale era lo spostamento delle modifiche CSS nell'editor. Questo è diventato il nostro prossimo progetto.

5. Pannello delle modifiche

La difficoltà nel trasferire il proprio lavoro da uno strumento di sviluppo browser all'editor è uno di quei problemi secolari a cui tutti ci siamo appena abituati. Eravamo entusiasti di creare una soluzione semplice e immediatamente utilizzabile.

Edge e Chrome DevTools sono usciti prima con le varianti di questo strumento. Il nostro è incentrato sull'assistenza a un'ampia gamma di flussi di lavoro CSS: avviare DevTools, modificare gli stili desiderati, quindi esportare le modifiche copiando l'intero set di modifiche (per la collaborazione) o solo una regola modificata (per incollare nel codice).

Ciò migliora la robustezza dell'intero flusso di lavoro, compresi gli altri nostri strumenti di layout. E questo è solo l'inizio: sappiamo che l'aggiornamento accidentale e la navigazione dalla pagina sono una grande fonte di perdita di dati, quindi un modo per portare la persistenza allo strumento sarà un passo successivo importante.

Prova il pannello delle modifiche

1. In Firefox, accedi a qualsiasi sito Web.
2. Apri l'Inspector con Cmd + Shift + C e seleziona un elemento.
3. Apporta alcune modifiche al CSS:
• Modifica gli stili nel riquadro Regole;
• Regola i caratteri nel riquadro Caratteri.
4. Nel riquadro destro dell'Inspector, vai alla scheda Modifiche ed esegui le seguenti operazioni:
• Fai clic su Copia tutte le modifiche , quindi incollalo in un editor di testo per visualizzare l'output;
• Passa il mouse sopra il nome del selettore e fai clic su Copia regola , quindi incollalo per visualizzare l'output.

6. CSS inattivo

La nostra funzione CSS inattivo risolve uno dei problemi principali del nostro sondaggio sul debug del layout su specifici bug CSS:

"Perché questa proprietà CSS non fa nulla?"

Dal punto di vista del design, questa funzione è molto semplice: disattiva i CSS che non influiscono sulla pagina e mostra un suggerimento per spiegare perché la proprietà non ha effetto. Ma sappiamo che questo può aumentare l'efficienza e ridurre la frustrazione. Siamo stati sostenuti dalla ricerca di Sarah Lim e dei suoi colleghi che hanno costruito uno strumento simile. Nei loro studi, hanno scoperto che gli sviluppatori alle prime armi erano il 50% più veloci nella creazione con CSS quando utilizzavano uno strumento che consentiva loro di ignorare il codice irrilevante.

In un certo senso, questo è il nostro tipo di funzionalità preferito: un frutto UX a basso impatto che si registra a malapena come funzionalità, ma migliora l'intero flusso di lavoro senza che sia davvero necessario essere scoperto o appreso.

Il CSS inattivo viene lanciato in Firefox 70 ma ora può essere utilizzato nelle versioni preliminari di Firefox, tra cui Developer Edition, Beta e Nightly.

Prova CSS inattivo

1. Scarica Firefox Developer Edition;
2. Apri Firefox e vai su wikipedia.org;
3. Apri l'Inspector con Cmd + Shift + C e seleziona l'area del contenuto centrale, chiamata central-featured ;
4. Nota la dichiarazione vertical-align in grigio;
5. Passa il mouse sopra l'icona delle informazioni e fai clic su "Ulteriori informazioni" se sei interessato.

7. Pannello di accessibilità

Lungo la strada abbiamo sviluppato funzionalità di accessibilità da un team separato composto principalmente da una persona: Yura Zenevich, quest'anno con la sua stagista Maliha Islam.

Insieme hanno trasformato il nuovo pannello Accessibilità in Firefox in un potente strumento di ispezione e controllo. Oltre a visualizzare l'albero di accessibilità e le proprietà, ora puoi eseguire diversi tipi di controlli su una pagina. Finora i controlli includono il contrasto del colore, le etichette di testo e lo stile di messa a fuoco della tastiera.

Ora in Nightly, puoi provare il nuovo simulatore di daltonismo che sfrutta la nostra prossima tecnologia WebRender.

Prova il pannello di accessibilità

1. Scarica Firefox Developer Edition;
2. Accedi a meetup.com;
3. Negli strumenti per sviluppatori, vai alla scheda Accessibilità e fai clic sul pulsante "Attiva funzionalità di accessibilità";
4. Fare clic sul menu a discesa accanto a "Verifica problemi" e selezionare "Tutti i problemi";
5. Dai un'occhiata ai vari problemi di contrasto, tastiera ed etichetta di testo e fai clic sui collegamenti "Ulteriori informazioni" se sei interessato.

Prossimo

Attualmente stiamo lavorando sodo su uno strumento di compatibilità del browser che utilizza le informazioni di MDN per mostrare problemi specifici del browser per un elemento selezionato. Puoi seguire su GitHub per saperne di più.

Il futuro

Ci impegniamo a supportare il Web moderno e questo significa cambiare e crescere continuamente.

Nuove specifiche vengono costantemente implementate dai fornitori di browser. Le linee guida e le migliori pratiche relative al miglioramento progressivo, alla reattività e all'accessibilità si evolvono costantemente. Anche noi produttori di strumenti dobbiamo continuare a evolverci.

E che dire dei problemi di lunga durata e sempre presenti nella creazione del web? Quali interfacce utente quotidiane devono essere ripensate? Queste sono alcune delle domande che ci fanno andare avanti!

Che ne dici di un modo migliore per navigare nell'albero DOM di una pagina? Quella parte di DevTools è rimasta sostanzialmente invariata dai tempi di Firebug.

Abbiamo sperimentato funzionalità come i pulsanti avanti e indietro che faciliterebbero la navigazione tra gli elementi visitati di recente.

Un cambiamento più drammatico di cui stiamo discutendo è l'aggiunta di una vista DOM compatta che utilizza una sintassi simile ai motori di modelli HTML. L'attenzione si concentrerebbe sul caso d'uso più comune, la navigazione in CSS, piuttosto che sulla visualizzazione/modifica della sorgente.

Abbiamo anche pensato a un selettore di elementi migliore. Sappiamo come può essere più produttivo lavorare all'interno della pagina, con meno salti avanti e indietro in DevTools. Potremmo rendere il selettore degli elementi più potente e più persistente. Forse potrebbe selezionare uno spazio bianco su una pagina e dirti cosa causa quello spazio, oppure potrebbe far luce sulle relazioni tra i diversi elementi.

Queste sono solo due delle tante idee che speriamo di approfondire con l'aiuto della community.

Abbiamo bisogno del tuo contributo!

Vogliamo continuare a creare strumenti fantastici che ti semplifichino la vita come sviluppatore o designer.

Ecco un modo semplice per aiutarti: scarica Firefox Developer Edition e prova a usarlo per parte del tuo lavoro la prossima settimana.

Quindi, facci sapere cosa ne pensi partecipando al nostro sondaggio di 1 pagina.

Siamo sempre interessati ad ascoltare idee per miglioramenti, in particolare qualsiasi frutto basso che potrebbe salvarci da qualche frustrazione regolare. Svolgiamo il nostro lavoro all'aperto, quindi puoi seguirti e intervenire. Ti terremo aggiornato su @FirefoxDevTools.

Grazie a Patrick Brosset per i suoi contributi a questo articolo.