La storia di CSS Grid raccontata dai suoi creatori

Non un’idea nuova#section1

Sebbene il concetto moderno di “grid layout” sia stato con noi fin dalla Rivoluzione Industriale, le griglie sono state un tool di design per secoli. Pertanto, non dovrebbe sorprenderci che i layout grid-based siano stati un obiettivo di CSS fin dall’inizio.

Stando a quanto sostiene il Dr. Bert Bos, che ha co-creato CSS con Håkon Wium Lie, i layout basati su griglie sono stati un suo pensiero fisso per un bel po’ di tempo.

“CSS è cominciato come qualcosa di molto semplice”, ricorda Bos, “Si trattava semplicemente di un modo per creare una visualizzazione di un documento su uno schermo molto semplice e piccolo dell’epoca. Vent’anni fa, gli schermi erano molto piccoli. Quindi, quando abbiamo visto che potevamo creare un foglio di stile per i documenti, abbiamo pensato: Beh, cos’altro possiamo fare adesso che abbiamo un sistema per creare i fogli di stile?”.

Osservare quello che i libri e le riviste stavano facendo con il layout è stata una grande ispirazione per loro.

“Indipendentemente dal contenuto di ciascuna pagina, essa ha un certo layout”, dice Bos. “I numeri di pagina si trovano in certi posti e le immagini sono sempre allineate su alcuni lati: sinistra o destra o in centro. Volevamo catturare quello.”

All’inizio, i produttori di browser avevano dismesso l’idea come “troppo complessa” da implementare, ma i concetti del layout a griglia continuavano a crescere. Nel 1996, Bos, Lie e Dave Raggett se ne uscirono con un modello di layout “frame-based”. In seguito, nel 2005, Bos rilasciò l’Advanced Layout Module, che poi si trasformò nel Template Layout Module. Nonostante l’entusiasmo per questi concetti da parte della community di web design, nessuno di loro è mai approdato in un browser.

Ancora una volta, con sentimento#section2

La speranza era che continuando a scagliare con una certa regolarità i concetti di griglia contro il muro del CSS Working Group, uno di essi alla fine avrebbe fatto presa. E l’idea vincente è stata una proposta di un paio di persone in Microsoft che stavano cercando uno strumento di layout più robusto per uno dei loro prodotti basati sul web.

Phil Cupp era stato nominato responsabile del team di UI con il compito di reinventare Microsoft Intune, una computer management utility. Cupp era un grande fan di Silverlight, un plug-in del browser che sfoggiava robusti strumenti di layout da Windows Presentation Foundation, e inizialmente aveva programmato di seguire quella strada per la costruzione del nuovo Intune. Quel che successe, invece, fu che Microsoft si trovava in fase di pianificazione di Windows 8 e stava per attivare la creazione di app con tecnologie web. Dopo averlo saputo, Cupp ha voluto seguire l’esempio con Intune, ma ha subito capito che il web aveva un disperato bisogno di migliori opzioni di layout.

Si è unito a un nuovo team in modo da potersi concentrare sul portare sul web alcune delle opzioni di layout avanzate esistenti in Silverlight, come il grid layout. È interessante notare che le persone di questo nuovo team ne avevano già notato la necessità. All’epoca, molti sviluppatori di app si stavano concentrando su iPhone e iPad, che richiedevano ai designer di considerare solo due diversi formati fissi di canvas (quattro, se si considera portrait e landscape). Windows doveva supportare una tonnellata di diverse dimensioni, risoluzioni e fattori di forma di schermi diversi. Oh, e finestre ridimensionabili. In breve, Microsoft aveva bisogno disperatamente di uno strumento di layout robusto e flessibile per il Web, se il Web stava diventando un’opzione per lo sviluppo di app native su Windows.

Dopo aver lavorato ampiamente con vari team all’interno di Microsoft per assemblare una draft specification, Cupp e il suo team hanno rilasciato un’implementazione di grid layout dietro al vendor prefix -ms- in Internet Explorer 10 nel 2011. Vi hanno fatto seguire una draft Grid Layout spec, che hanno presentato nel 2012 al W3C.

Ovviamente, non era né la prima né la terza volta che il W3C riceveva una grid layout spec da considerare. Ciò che c’era di diverso, questa volta, era che avevano anche un’effettiva implementazione da valutare e criticare. Inoltre, noi, come developer, avevamo finalmente qualcosa con cui giocherellare. Il grid layout non era più solo una possibilità teorica.

Un manipolo di web designer e developer progressisti – in particolar modo Rachel Andrew, una Invited Expert al W3C, su tutti – cominciò a trafficarci.

“Mi sono imbattuta inizialmente in CSS Grid in un workshop tenuto da Bert Bos in francese e io non parlo davvero francese, ma guardavo le slide e cercavo di seguire” ricorda Andrew. “L’ho visto dimostrare la … Template Layout spec. Penso ne stesse davvero parlano in termini di stampa e usando quella cosa per creare dei layout di stampa, ma nel momento esatto in cui lo vidi, pensai: No, lo vogliamo per il web. È qualcosa di cui abbiamo davvero bisogno per la praticità con cui si possono disporre le cose in maniera appropriata. E quindi ho cominciato ad esaminarla e a scoprire cosa stava facendo e ho creato degli esempi.”

“Poi ho visto l’implementazione di Microsoft [della draft della specifica di Grid Layout], la quale mi ha fornito un’implementazione reale su cui creare esempi da mostrare ad altre persone. E volevo farlo, non solo perché era interessante e a me piace giocare con le cose interessanti, ma perché volevo che arrivasse là fuori e che altre persone ci dessero un’occhiata, dal momento che mi sono occupata di questo per molto tempo e so che spesso le specifiche vengono realizzate e poi nessuno ne parla davvero e quindi in un certo senso spariscono di nuovo. Ed ero assolutamente determinata a fare in modo che Grid Layout non sparisse, sarebbe stato qualcosa che altre persone avrebbero scoperto e ne sarebbero state entusiaste. E alla fine siamo effettivamente riusciti a farla arrivare nei browser e siamo in grado di usarla.”

L’evoluzione della specifica#section3

La bozza della specifica che Cupp presentò al W3C e che il suo team ha inserito in IE10 non è la la specifica Grid Layout che abbiamo oggi. È stato un passo nella giusta direzione ma era ben lungi dall’essere perfetta.

“Quella [che Phil Cupp aveva presentato] era un sistema pesantemente basato sulle track”, ricorda Elika Etemad, un’Invited Expert al W3C e un’Editor del CSS Grid Layout Module. “C’era solo un sistema di addressing numerico, non c’erano i nomi di riga, non c’erano i template, nulla di tutto ciò. Ma aveva un algoritmo di layout che … erano sicuri avrebbe funzionato perché ne avevano fatte delle implementazioni sperimentali.”

“La griglia originale che Bert [Bos] si era inventato … era davvero la ragione per cui mi sono unito al CSS Working Group”, ricorda Tab Atkins di Google, un altro Editor del CSS Grid Layout Module. “A quell’epoca, stavo imparando tutti i terribili hack di layout e vedere la possibilità di scrivere semplicemente in CSS il mio layout di pagina e vederlo funzionare in qualche modo era sorprendente. E poi l’aver visto la draft di Phil Cupp … e vedere tutto disposto in maniera appropriata e con un buon algoritmo che gli stava dietro, sapevo che era qualcosa che sarebbe potuto davvero esistere.”

Si trattava inoltre di un’opzione convincente (efficace) perché, a differenza delle proposte precedenti, che specificavano layout rigidi, questa proposta era per un grid system responsive.

“Si può essere espliciti riguardo alla dimensione di un grid item”, spiegava Etemad. “Ma potete anche dire, La tua dimensione sarà quella occupata dal tuo contenuto. E questo è quello di cui avevamo bisogno per progredire.”

Tuttavia, la draft spec non era così accessibile come tanti nel CSS Working Group volevano che fosse. Quindi il gruppo cercò di portare delle idee da alcune delle sue esplorazioni antecedenti.

“Quello che ci piaceva davvero della proposta di Bert [Bos] era che aveva questa interfaccia davvero elegante che rendeva facile esprimere i layout in maniera intuitiva”, dice Etemad. “È come un ASCII art format per creare un template e lo potete mettere nel vostro codice, come la larghezza delle colonne e l’altezza delle righe. Potreste inserirli nello stesso tipo di diagrammi ASCII, che hanno reso molto più semplice vedere quello che si stava facendo.”

Peter Linss, l’allora Co-Chair del CSS Working Group, ha inoltre suggerito che incorporassero il concetto di righe della griglia nella spec (invece di parlare solo di track). Credeva che includere questo concetto familiare di graphic design avrebbe reso la specifica più accessibile ai designer.

“Quando all’inizio stavamo ragionando su CSS Grid, pensavamo ad esso come a un modello molto app-centrico”, ricorda Rossen Atanassov di Microsoft, un altro Editor della spec. “Ma la griglia non è nulla di nuovo. Voglio dire, il concetto di griglia c’è da molto tempo e quel tipo tradizionale di griglia si è sempre basato su righe. E noi abbiamo in qualche modo ignorato le righe. Quando abbiamo realizzato che potevamo unire le due implementazioni, il lato app e il lato tipografico di Grid, quello, per me personalmente, è stato uno di quei momenti rivelatori che mi hanno davvero ispirato a continuare a lavorare su Grid.”

Quindi, il CSS Working Group ha cominciato a modificare leggermente la proposta di Microsoft di incorporare queste idee. Il risultato finale vi permette di pensare ai Grid system in termini di track o righe o template o addirittura a tutti e tre contemporaneamente.

Ovviamente, arrivarci non è stato semplice.

Perfezionare, ripetere#section4

Come potrete probabilmente immaginare, riconciliare tre diverse idee (la proposta di Microsoft, l’Advanced Layout di Bos e l’aggiunga delle grid line di Linss) non è stato un semplice copia-incolla: c’erano molti aspetti critici e casi limite che dovevano essere gestiti.

“Penso che alcune delle cose più delicate all’inizio fossero prendere tutti i vari aspetti delle … tre proposte che stavamo cercando di combinare insieme e trovare un sistema che fosse sufficientemente coerente da accettare in maniera garbata tutti quegli input”, dice Etemad.

Alcune idee semplicemente non erano fattibili per la fase uno di una griglia CSS. Per esempio, il concetto di Bos permetteva ad un arbitrario discendente di grid di disporsi come se fosse un elemento figlio della griglia. Si fa spesso riferimento a questa feature come a “subgrid” e non arrivò in CSS Grid Layout 1.0.

“Subgrid è stata una di quelle cose che è stata segnalata immediatamente”, dice Atanassov. “E questa è stata sia una benedizione sia una specie di ostacolo lungo il percorso. Per un bel po’ ha frenato il lavoro sulla specifica. E ha anche spaventato un po’ di implementatori. … Ma si tratta anche di una delle feature per cui sono più eccitato che si proceda coi lavori. E so che risolveremo la questione e sarà grandiosa. Ci vorrà solo un po’ più di tempo.”

In maniera simile, c’erano due opzione per gestire il contenuto mappato alle linee della griglia. Da un lato, è possibile lasciare che la griglia stessa abbia track di dimensioni fisse e aggiustare quale linea di griglia finale è mappata al contenuto in overflow, in base a quanto è uscito. In alternativa, potreste lasciare che la track cresca fino a contenere il contenuto in modo tale che finisca alla linea predefinita della griglia. Tenerle tutte e due non era un’opzione perché avrebbe potuto creare una dipendenza circolare, quindi il gruppo ha deciso di mettere in pausa l’idea dello spezzare la griglia.

In fin dei conti, molte di queste modifiche sono state fatte alla luce dei tre obiettivi primari del CSS Working Group per questa specifica. Doveva essere:

1. potente: volevano che CSS Grid permettesse ai designer di esprimere i propri desideri in un modo che “rendesse semplici le cose facili e complesse le cose possibili”, come ha detto Etemad;
2. robusta: volevano essere sicuri che non ci sarebbero stati dei gap che avrebbero causato la rottura dei layout, che impedissero lo scrolling o causassero la sparizione accidentale del contenuto;
3. e performante: se l’algoritmo non era sufficientemente veloce da gestire elegantemente le situazioni del mondo reale come gli eventi di ridimensionamento dei browser e il caricamento dinamico dei contenuti, sapevano che avrebbe creato un’esperienza frustrante per gli utenti finali.

“Questo è il motivo per cui ci vuole molto tempo per progettare un nuovo sistema di layout per CSS,” dice Etemad. “Ci vuole molto tempo, molto lavoro e molto amore da parte delle persone che ci lavorano.”

Dove la teoria incontra la pratica (o il momento della verità)#section5

Prima che una Candidate Recommendation (ossia, una bozza finale) possa diventare una Proposed Recommendation (quella a cui colloquialmente facciamo riferimento come “standard”), il W3C deve vedere almeno due implementazioni indipendenti ed interoperabili. Microsoft aveva implementato la sua draft proposal, ma la specifica era cambiata molto da allora. Oltre a ciò, volevano vedere come altri browser avrebbero raccolto il testimone prima di impegnarsi in ulteriore lavoro ingegneristico per aggiornarla. Perché? Beh, erano un po’ intimoriti e prevenuti dopo quello che era successo con altre promettenti proposte per il layout: CSS Regions.

CSS Regions offriva un modo per far scorrere il contenuto attraverso una serie di “regioni” predefinite su una pagina, permettendo dei layout davvero complessi. Microsoft ha rilasciato molto in anticipo un’implementazione di CSS Regions, dietro prefisso, in IE 10. Una patch ha creato supporto anche in WebKit per Regions. Safari l’ha rilasciato, così come Chrome (che all’epoca girava ancora su WebKit). Ma poi Google l’ha tolto da Chrome. Firefox si è opposto alla specifica e non l’ha mai implementato. Quindi l’idea attualmente è in un limbo. Anche Safari eliminerà il suo supporto sperimentale per CSS Regions nella sua prossima release. Basta dire che Microsoft voleva essere sicura che Grid non subisse la stessa sorte di Regions prima di impegnare più risorse di ingegneria su essa.

“C’erano degli implementers che hanno detto immediatamente: ‘Wow, è grandioso, dovremmo assolutamente farlo,’” ricorda Atanassov di Grid. “Ma una cosa è dire: ‘Sì, grande! Dovremmo farlo!’ e poi c’è il passo successivo in cui aggiungere risorse e pagare gli sviluppatori perché effettivamente lo implementino.”

“C’era il desiderio da parte di altri implementer: uno degli editor della spec è di Google, ma c’era ancora dell’esitazione a creare effettivamente del codice,” ricorda Greg Whitworth di Microsoft, un membro del CSS Working Group. “E … rilasciare codice è quello che conta.”

In una svolta interessante degli eventi, la media company Bloomberg ha assunto Igalia, una open source consultancy, per implementare CSS Grid sia per Blink che per WebKit.

“Nel 2013 … siamo stati contattati da Bloomberg … perché avevano dei bisogno molto specifici di definire e utilizzare strutture simili a griglie,” ricorda Sergio Villar Senin, software engineer in e partner di Igalia. “Praticamente, ci hanno chiesto di aiutarli nello sviluppo della specifica di CSS Grid layout e anche di implementarla per Blink and WebKit.”

“Il lavoro di Igalia è stato di enorme aiuto perché allora i developer hanno potuto vederlo come possibilmente qualcosa che avrebbero potuto effettivamente usare durante lo sviluppo dei loro siti,” ha aggiunto Whitworth. Ma anche con due implementazioni pronte, alcune persone nutrivano ancora dei dubbi che la feature non avrebbe trovato appoggio. Dopo tutto, solo perché un rendering engine è open source non significa che i suoi steward accettino qualunque patch. E anche se lo facessero, come è accaduto con CSS Regions, non ci sono garanzie che la feature alla fine rimanga. Fortunatamente, un buon numero di designer e developer stava cominciando ad esaltarsi per Grid e cominciava a fare pressione sui browser vendor perché la implementassero.

“C’è stato un cambiamento epocale con CSS Grid”, dice Whitworth. “È cominciato con Rachel Andrew che è entrata e ha creato una tonnellata di demo ed eccitamento attorno a CSS Grid con Grid by Example e ha cominciato a sostenerla davvero e a mostrarla ai web developer, e a mostrare quello che era in grado di fare e i problemi che risolveva.”

“Poi, poco dopo, Jen Simmons [Designer Advocate in Mozilla] ha creato qualcosa chiamato Labs dove mette molte demo di quello che ha creato per CSS Grid sul web e, di nuovo, ha continuato a tenere in movimento quell’ondata di entusiasmo per CSS Grid con i web developer nella community.”

Grid rende possibili sia i layout tradizionali sia (come mostrato qui) che quelli non tradizionali. Questo è un esempio di Grid Layout tratto da Labs di Jen Simmons, come lo si vede in Edge 16. Se volete vedere come funziona in Edge ma non avete Windows, potete anche visualizzarlo in BrowserStack (richiede un account).

Con leader di pensiero come Andrew e Simmons che dimostrano attivamente il potere e la versatilità di CSS Grid, la community di web design è sempre più esaltata. Si è cominciato a sperimentare su siti quali CodePen, condividendo idee e sviluppando le proprie skill di layout con Grid. Non ci pensiamo spesso ma l’entusiasmo dei developer ha il potere di sostenere o affossare una specifica.

“Possiamo scrivere una spec, possiamo implementare delle cose, ma se non c’è domanda da parte dei developer o uso delle feature, non importa davvero quanto ci facciamo,” ha detto Whitworth.

Sfortunatamente, con spec ambiziose come Grid, il costo dell’implementazione spesso può dissuadere un browser vendor dall’impegno. Senza un’implementazione in un browser che permetta ai developer di sperimentare, è difficile creare entusiasmo. Senza l’entusiasmo dei developer, i browser vendor sono riluttanti all’idea di spendere soldi per vedere se l’idea diventerà popolare. Sono sicuro che possiamo vedere dove stia il problema qui. In effetti, questo è in parte quello che ha condannato Regions—la performance sui chipset mobile è stata un’altra ragione citata—almeno per ora.

Per fortuna, Bloomberg ha svolto volentieri il ruolo di benefattore e ha dato il via libera alla nuova incarnazione di CSS Grid. Poi, con il suo aiuto, Google ha rilasciato un’implementazione di CSS Grid in Chromium 56 per Android nel gennaio 2017. Ha rilasciato la sua implementazione di Chrome all’inizio di marzo, solo due giorni dopo che Mozilla ha rilasciato la sua implementazione in Firefox. Prima che il mese fosse finito, Opera e Safari avevano anche fornito il supporto per CSS Grid.

Ironicamente, l’ultima azienda a rilasciare CSS Grid è stata Microsoft. Ma ha rilasciato la sua implementazione in Edge all’inizio di questa settimana.

“Con le feature nella piattaforma web … si aspetta il momento giusto,” dice Whitworth, proprio prima del rilascio di Grid in Edge. “Si vuole una spec solida, si vuole l’interesse dell’implementer e tonnellate di richieste dai web developer. Il momento giusto era la fine del 2016/l’inizio del 2017. Tutto ciò è successo. Abbiamo aggiornato la nostra implementazione e siamo entusiasti di rilasciarla.”

“Non ricordo una feature che sia mai stata rilasciata come CSS Grid. Ogni grande browser l’ha rilasciata nel giro di un solo anno e sarà interoperabile perché l’abbiamo implementata behind flags, testata, faremo i cambiamenti futuri behind flags e poi, quando sarà stabile, tutti i browser l’avranno rilasciata nativamente.”

“Visto che tutti hanno rilasciato più o meno allo stesso momento,” sostiene Atkins, “[Grid] passa da idea interessante con cui giocare a qualcosa che si usa come unico metodo di layout senza doversi preoccupare dei fallback in un tempo estremamente rapido. … [È stato] più veloce di quello che mi aspettassi.”

Il significato di Grid per CSS#section6

Ora che il supporto di Grid non è più in discussione, possiamo (e dobbiamo) cominciare a usare questo incredibile tool. Una delle sfide per molti di noi veterani che hanno lavorato con CSS per una gran parte degli ultimi vent’anni, è che CSS Grid richiede un modo completamente nuovo di pensare al layout.

“Non si tratta solo di attaccare i margin e le proprietà ad ogni elemento individuale e piazzarlo”, dice Bos. “Adesso potete avere un modello diverso, un modello in cui cominciate prima con il vostro layout e poi tirate dentro i diversi elementi in quel layout.”

“È il più potente tool di layout che abbiamo inventato finora per CSS,” sostiene Atkins. “Rende così incredibilmente facili i layout di pagina. … La gente ha sempre chiesto layout migliori. Solo per ragioni di possibilità di modifica e perché gli hack che stavamo impiegando non erano così potenti come i vecchi metodi in cui semplicemente mettevamo tutto in una grande vecchio elemento table, che era popolare per un motivo: permetteva di realizzare layout complessi. Era solo la cosa peggiore da mantenere ed era la cosa più terribile per la semantica. E Grid vi ridà potere e molto più, che è piuttosto fantastico.”

“CSS Grid prende tutte quelle cose complicate che dovevamo fare per ottenere dei layout di base e le rende completamente inutili,” dice Etemad. “Potete parlare direttamente con l’engine CSS, voi stessi, senza un interprete di mezzo.”

CSS Grid offre molto potere che molti di noi stanno solo cominciando a comprendere. Sarà interessante vedere come si evolverà.

“Penso che trasformerà le cose,” dice Etemad. “Porterà di nuovo CSS a quello a cui era destinato, ossia un linguaggio di styling e layout che toglie tutta la logica dal markup e permette una chiara separazione tra contenuto e stile che abbiamo cercato di ottenere fin dall’inizio.”

“Sono entusiasta riguardo al futuro di CSS layout,” sostiene Whitworth. “CSS Grid non è la fine: è in realtà solo l’inizio. In IE 10 … [abbiamo rilasciato] CSS Regions così come CSS Exclusions. Penso che man mano che i web designer cominceranno ad utilizzare sempre di più CSS Grid, realizzeranno perché abbiamo inserito tutti e tre insieme. E magari potremo continuare quello che abbiamo fatto con CSS Grid e continuare a migliorare su quelle specifiche. Fate anche in modo che i vendor desiderino implementarli. Fate sì che la community sia esaltata riguardo ad essi e spinga il layout sul web ancora più lontano.”

“Penso che adesso che abbiamo Grid, abbia assolutamente senso avere Exclusions,” sostiene Andrew. “Ci dà un modo per piazzare qualcosa in una griglia e farlo avvolgere dal testo, e non c’è alcun altro modo per farlo. … E poi cose come Regions … Mi piacerebbe vedere che progredisce perché … una volta che possiamo costruire una bella struttura a griglia, potremmo volere che il contenuto vi scorra. Non c’è un modo per farlo.”

“Per quel che mi riguarda, non finisce qui: questo è solo l’inizio.”

Entrare nella griglia#section7

• CSS Grid Layout Module Level 1
  https://www.w3.org/TR/css-grid-1/
• CSS Grid Layout – Mozilla Developer Network
  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
• Grid by Example – Rachel Andrew
  https://gridbyexample.com/examples/
• Grab & Go Grid Layout Patterns by Rachel Andrew
  https://gridbyexample.com/patterns/
• Layout Demos by Jen Simmons
  http://labs.jensimmons.com/2016/
• Learn CSS Grid by Jen Simmons
  http://jensimmons.com/post/feb-27-2017/learn-css-grid
• CSS Grid and Grid Inspector in Firefox
  https://www.mozilla.org/en-US/developer/css-grid/
• Practical CSS Grid: Adding Grid to an Existing Design by Eric Meyer
  https://alistapart.com/article/practical-grid
• Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid by Manuel Matuzović
  https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/
• Box Alignment Cheatsheet by Rachel Andrew
  https://rachelandrew.co.uk/css/cheatsheets/box-alignment
• CSS Grid Layout by Rachel Andrew – An Event Apart video
  https://aneventapart.com/news/post/css-grid-layout-by-rachel-andrewan-event-apart-video
• Revolutionize Your Page: Real Art Direction on the Web by Jen Simmons – An Event Apart video
  https://aneventapart.com/news/post/real-art-direction-on-the-web-by-jen-simmons-an-event-apart
• “Learn Grid Layout” video series by Rachel Andrew
  https://gridbyexample.com/video/
• Why I love CSS Grid – a short video by Jen Simmons
  https://www.youtube.com/watch?v=tY-MHUsG6ls
• Modern Layouts: Getting Out of Our Ruts by Jen Simmons – An Event Apart video
  https://vimeo.com/147950924