{"id":801,"date":"2018-03-26T15:45:12","date_gmt":"2018-03-26T13:45:12","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/storia-di-css-grid-raccontata-dai-suoi-creatori\/"},"modified":"2018-03-26T15:45:12","modified_gmt":"2018-03-26T13:45:12","slug":"storia-di-css-grid-raccontata-dai-suoi-creatori","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/storia-di-css-grid-raccontata-dai-suoi-creatori\/","title":{"rendered":"La storia di CSS Grid raccontata dai suoi creatori"},"content":{"rendered":"
\n

Nota degli editori:<\/strong> vorremmo ringraziare il team di Microsoft Edge per aver condiviso con noi le trascrizioni delle interviste che hanno fatto a molte delle brillanti menti che hanno contribuito allo sviluppo di CSS Grid. Tali trascrizioni si sono rivelate inestimabili nel realizzare questa storia. Potete guardare il breve video che hanno prodotto partendo da quelle interviste, Creating CSS Grid<\/a>, su Channel 9<\/a>.<\/p>\n<\/div>\n

Il 17 Ottobre, il browser Microsoft Edge ha rilasciato la sua implementazione di CSS Grid. Si tratta di una pietra miliare per una serie di ragioni. Primo, significa che tutti i principali browser ora supportano questo incredibile tool di layout. Secondo, significa che tutti i browser maggiori hanno rilasciato le loro implementazioni in un solo anno (!), un esempio formidabile di successo degli standard e della collaborazione cross-browser. Ma terzo, e probabilmente pi\u00f9 interessante, chiude il cerchio di un processo che \u00e8 durato pi\u00f9 di vent’anni.<\/p>\n

\n

Non un’idea nuova<\/h2>\n

Sebbene il concetto moderno di \u201cgrid layout\u201d 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.<\/p>\n

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

\u201cCSS \u00e8 cominciato come qualcosa di molto semplice\u201d, ricorda Bos, \u201cSi 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?<\/em>\u201d.<\/p>\n

Osservare quello che\ti libri e le riviste stavano facendo con il layout \u00e8 stata una grande ispirazione per loro.<\/p>\n

\u201cIndipendentemente dal contenuto di ciascuna pagina, essa ha un certo layout\u201d, dice Bos. \u201cI 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.\u201d<\/p>\n

All’inizio, i produttori di browser avevano dismesso l’idea come \u201ctroppo complessa\u201d 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 \u201cframe-based\u201d. In seguito, nel 2005, Bos rilasci\u00f2 l’Advanced Layout Module<\/a>, che poi si trasform\u00f2 nel Template Layout Module<\/a>. Nonostante l’entusiasmo per questi concetti da parte della community di web design, nessuno di loro \u00e8 mai approdato in un browser.<\/p>\n<\/div>\n

\n

Ancora una volta, con sentimento<\/h2>\n

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

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<\/a>, un plug-in del browser che sfoggiava robusti strumenti di layout da Windows Presentation Foundation<\/a>, 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.<\/p>\n

Si \u00e8 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. \u00c8 interessante notare che le persone di questo nuovo team ne avevano gi\u00e0 notato la necessit\u00e0. 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.<\/p>\n

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-<\/code> in Internet Explorer 10 nel 2011. Vi hanno fatto seguire una draft Grid Layout spec<\/a>, che hanno presentato nel 2012 al W3C.<\/p>\n

Ovviamente, non era n\u00e9 la prima n\u00e9 la terza volta che il W3C riceveva una grid layout spec da considerare. Ci\u00f2 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\u00f9 solo una possibilit\u00e0 teorica.<\/p>\n

Un manipolo di web designer e developer progressisti – in particolar modo Rachel Andrew, una Invited Expert al W3C, su tutti – cominci\u00f2 a trafficarci.<\/p>\n

\u201cMi 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\u201d ricorda Andrew. \u201cL’ho visto dimostrare la \u2026 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. \u00c8 qualcosa di cui abbiamo davvero bisogno per la praticit\u00e0 con cui si possono disporre le cose in maniera appropriata.<\/em> E quindi ho cominciato ad esaminarla e a scoprire cosa stava facendo e ho creato degli esempi.\u201d<\/p>\n

\u201cPoi 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<\/a>. E volevo farlo, non solo perch\u00e9 era interessante e a me piace giocare con le cose interessanti, ma perch\u00e9 volevo che arrivasse l\u00e0 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.\u201d<\/p>\n<\/div>\n

\n

L’evoluzione della specifica<\/h2>\n

La bozza della specifica che Cupp present\u00f2 al W3C e che il suo team ha inserito in IE10 non \u00e8 la la specifica Grid Layout che abbiamo oggi<\/a>. \u00c8 stato un passo nella giusta direzione ma era ben lungi dall’essere perfetta.<\/p>\n

\u201cQuella [che Phil Cupp aveva presentato] era un sistema pesantemente basato sulle track\u201d, ricorda Elika Etemad, un’Invited Expert al W3C e un’Editor del CSS Grid Layout Module. \u201cC’era solo un sistema di addressing numerico, non c’erano i nomi di riga, non c’erano i template, nulla di tutto ci\u00f2. Ma aveva un algoritmo di layout che \u2026 erano sicuri avrebbe funzionato perch\u00e9 ne avevano fatte delle implementazioni sperimentali.\u201d<\/p>\n

\u201cLa griglia originale che Bert [Bos] si era inventato \u2026 era davvero la ragione per cui mi sono unito al CSS Working Group\u201d, ricorda Tab Atkins di Google, un altro Editor del CSS Grid Layout Module. \u201cA quell’epoca, stavo imparando tutti i terribili hack di layout e vedere la possibilit\u00e0 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 \u2026 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.\u201d<\/p>\n

Si trattava inoltre di un’opzione convincente (efficace) perch\u00e9, a differenza delle proposte precedenti, che specificavano layout rigidi, questa proposta era per un grid system responsive.<\/p>\n

\u201cSi pu\u00f2 essere espliciti riguardo alla dimensione di un grid item\u201d, spiegava Etemad. \u201cMa potete anche dire, La tua dimensione sar\u00e0 quella occupata dal tuo contenuto<\/em>. E questo \u00e8 quello di cui avevamo bisogno per progredire.\u201d<\/p>\n

Tuttavia, la draft spec non era cos\u00ec accessibile come tanti nel CSS Working Group volevano che fosse. Quindi il gruppo cerc\u00f2 di portare delle idee da alcune delle sue esplorazioni antecedenti.<\/p>\n

\u201cQuello 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\u201d, dice Etemad. \u201c\u00c8 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\u00f9 semplice vedere quello che si stava facendo.\u201d<\/p>\n

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

\u201cQuando all’inizio stavamo ragionando su CSS Grid, pensavamo ad esso come a un modello molto app-centrico\u201d, ricorda Rossen Atanassov di Microsoft, un altro Editor della spec. \u201cMa la griglia non \u00e8 nulla di nuovo. Voglio dire, il concetto di griglia c’\u00e8 da molto tempo e quel tipo tradizionale di griglia si \u00e8 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, \u00e8 stato uno di quei momenti rivelatori che mi hanno davvero ispirato a continuare a lavorare su Grid.\u201d<\/p>\n

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.<\/p>\n

Ovviamente, arrivarci non \u00e8 stato semplice.<\/p>\n<\/div>\n

\n

Perfezionare, ripetere<\/h2>\n

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 \u00e8 stato un semplice copia-incolla: c’erano molti aspetti critici e casi limite che dovevano essere gestiti.<\/p>\n

\u201cPenso che alcune delle cose pi\u00f9 delicate all’inizio fossero prendere tutti i vari aspetti delle \u2026 tre proposte che stavamo cercando di combinare insieme e trovare un sistema che fosse sufficientemente coerente da accettare in maniera garbata tutti quegli input\u201d, dice Etemad.<\/p>\n

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 \u201csubgrid\u201d e non arriv\u00f2 in CSS Grid Layout 1.0.<\/p>\n

\u201cSubgrid \u00e8 stata una di quelle cose che \u00e8 stata segnalata immediatamente\u201d, dice Atanassov. \u201cE questa \u00e8 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. \u2026 Ma si tratta anche di una delle feature per cui sono pi\u00f9 eccitato che si proceda coi lavori. E so che risolveremo la questione e sar\u00e0 grandiosa. Ci vorr\u00e0 solo un po’ pi\u00f9 di tempo.\u201d<\/p>\n

In maniera simile, c’erano due opzione per gestire il contenuto mappato alle linee della griglia. Da un lato, \u00e8 possibile lasciare che la griglia stessa abbia track di dimensioni fisse e aggiustare quale linea di griglia finale \u00e8 mappata al contenuto in overflow, in base a quanto \u00e8 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\u00e9 avrebbe potuto creare una dipendenza circolare, quindi il gruppo ha deciso di mettere in pausa l’idea dello spezzare la griglia.<\/p>\n

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:<\/p>\n

    \n
  1. potente:<\/strong> volevano che CSS Grid permettesse ai designer di esprimere i propri desideri in un modo che \u201crendesse semplici le cose facili e complesse le cose possibili\u201d, come ha detto Etemad;<\/li>\n
  2. robusta:<\/strong> 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;<\/li>\n
  3. e performante:<\/strong> 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.<\/li>\n<\/ol>\n

    \u201cQuesto \u00e8 il motivo per cui ci vuole molto tempo per progettare un nuovo sistema di layout per CSS,\u201d dice Etemad. \u201cCi vuole molto tempo, molto lavoro e molto amore da parte delle persone che ci lavorano.\u201d<\/p>\n<\/div>\n

    \n

    Dove la teoria incontra la pratica (o il momento della verit\u00e0)<\/h2>\n

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

    CSS Regions offriva un modo per far scorrere il contenuto attraverso una serie di \u201cregioni\u201d 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\u00ec come Chrome (che all’epoca girava ancora su WebKit). Ma poi Google l’ha tolto da Chrome. Firefox si \u00e8 opposto alla specifica e non l’ha mai implementato. Quindi l’idea attualmente \u00e8 in un limbo. Anche Safari eliminer\u00e0 il suo supporto sperimentale per CSS Regions nella sua prossima release<\/a>. Basta dire che Microsoft voleva essere sicura che Grid non subisse la stessa sorte di Regions prima di impegnare pi\u00f9 risorse di ingegneria su essa.<\/p>\n

    \u201cC’erano degli implementers che hanno detto immediatamente: \u2018Wow, \u00e8 grandioso, dovremmo assolutamente farlo,\u2019\u201d ricorda Atanassov di Grid. \u201cMa una cosa \u00e8 dire: \u2018S\u00ec, grande! Dovremmo farlo!\u2019 e poi c’\u00e8 il passo successivo in cui aggiungere risorse e pagare gli sviluppatori perch\u00e9 effettivamente lo implementino.\u201d<\/p>\n

    \u201cC’era il desiderio da parte di altri implementer: uno degli editor della spec \u00e8 di Google, ma c’era ancora dell’esitazione a creare effettivamente del codice,\u201d ricorda Greg Whitworth di Microsoft, un membro del CSS Working Group. \u201cE \u2026 rilasciare codice \u00e8 quello che conta.\u201d<\/p>\n

    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.<\/p>\n

    \u201cNel 2013 \u2026 siamo stati contattati da Bloomberg \u2026 perch\u00e9 avevano dei bisogno molto specifici di definire e utilizzare strutture simili a griglie,\u201d ricorda Sergio Villar Senin, software engineer in e partner di Igalia. \u201cPraticamente, ci hanno chiesto di aiutarli nello sviluppo della specifica di CSS Grid layout e anche di implementarla per Blink and WebKit.\u201d<\/p>\n

    \u201cIl lavoro di Igalia \u00e8 stato di enorme aiuto perch\u00e9 allora i developer hanno potuto vederlo come possibilmente qualcosa che avrebbero potuto effettivamente usare durante lo sviluppo dei loro siti,\u201d 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\u00e9 un rendering engine \u00e8 open source non significa che i suoi steward accettino qualunque patch. E anche se lo facessero, come \u00e8 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\u00e9 la implementassero.<\/p>\n

    \u201cC’\u00e8 stato un cambiamento epocale con CSS Grid\u201d, dice Whitworth. \u201c\u00c8 cominciato con Rachel Andrew che \u00e8 entrata e ha creato una tonnellata di demo ed eccitamento attorno a CSS Grid con Grid by Example<\/a> 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.\u201d<\/p>\n

    \u201cPoi, poco dopo, Jen Simmons [Designer Advocate in Mozilla] ha creato qualcosa chiamato Labs<\/a> 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.\u201d<\/p>\n

    <\/p>\n

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

    Con leader di pensiero come Andrew e Simmons che dimostrano attivamente il potere e la versatilit\u00e0 di CSS Grid, la community di web design \u00e8 sempre pi\u00f9 esaltata. Si \u00e8 cominciato a sperimentare su siti quali CodePen<\/a>, 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.<\/p>\n

    \u201cPossiamo scrivere una spec, possiamo implementare delle cose, ma se non c’\u00e8 domanda da parte dei developer o uso delle feature, non importa davvero quanto ci facciamo,\u201d ha detto Whitworth.<\/p>\n

    Sfortunatamente, con spec ambiziose come Grid, il costo dell’implementazione spesso pu\u00f2 dissuadere un browser vendor dall’impegno. Senza un’implementazione in un browser che permetta ai developer di sperimentare, \u00e8 difficile creare entusiasmo. Senza l’entusiasmo dei developer, i browser vendor sono riluttanti all’idea di spendere soldi per vedere se l’idea diventer\u00e0 popolare. Sono sicuro che possiamo vedere dove stia il problema qui. In effetti, questo \u00e8 in parte quello che ha condannato Regions\u2014la performance sui chipset mobile \u00e8 stata un’altra ragione citata<\/a>\u2014almeno per ora.<\/p>\n

    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.<\/p>\n

    Ironicamente, l’ultima azienda a rilasciare CSS Grid \u00e8 stata Microsoft. Ma ha rilasciato la sua implementazione in Edge all’inizio di questa settimana.<\/p>\n

    \u201cCon le feature nella piattaforma web \u2026 si aspetta il momento giusto,\u201d dice Whitworth, proprio prima del rilascio di Grid in Edge. \u201cSi 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\u00f2 \u00e8 successo. Abbiamo aggiornato la nostra implementazione e siamo entusiasti di rilasciarla.\u201d<\/p>\n

    \u201cNon 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\u00e0 interoperabile perch\u00e9 l’abbiamo implementata behind flags, testata, faremo i cambiamenti futuri behind flags e poi, quando sar\u00e0 stabile, tutti i browser l’avranno rilasciata nativamente.\u201d<\/p>\n

    \u201cVisto che tutti hanno rilasciato pi\u00f9 o meno allo stesso momento,\u201d sostiene Atkins, \u201c[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. \u2026 [\u00c8 stato] pi\u00f9 veloce di quello che mi aspettassi.\u201d<\/p>\n<\/div>\n

    \n

    Il significato di Grid per CSS<\/h2>\n

    Ora che il supporto di Grid non \u00e8 pi\u00f9 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, \u00e8 che CSS Grid richiede un modo completamente nuovo di pensare al layout.<\/p>\n

    \u201cNon si tratta solo di attaccare i margin e le propriet\u00e0 ad ogni elemento individuale e piazzarlo\u201d, dice Bos. \u201cAdesso 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.\u201d<\/p>\n

    \u201c\u00c8 il pi\u00f9 potente tool di layout che abbiamo inventato finora per CSS,\u201d sostiene Atkins. \u201cRende cos\u00ec incredibilmente facili i layout di pagina. \u2026 La gente ha sempre chiesto layout migliori. Solo per ragioni di possibilit\u00e0 di modifica e perch\u00e9 gli hack che stavamo impiegando non erano cos\u00ec 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\u00f9 terribile per la semantica. E Grid vi rid\u00e0 potere e molto pi\u00f9, che \u00e8 piuttosto fantastico.\u201d<\/p>\n

    \u201cCSS Grid prende tutte quelle cose complicate che dovevamo fare per ottenere dei layout di base e le rende completamente inutili,\u201d dice Etemad. \u201cPotete parlare direttamente con l’engine CSS, voi stessi, senza un interprete di mezzo.\u201d<\/p>\n

    CSS Grid offre molto potere che molti di noi stanno solo cominciando a comprendere. Sar\u00e0 interessante vedere come si evolver\u00e0.<\/p>\n

    \u201cPenso che trasformer\u00e0 le cose,\u201d dice Etemad. \u201cPorter\u00e0 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.\u201d<\/p>\n

    \u201cSono entusiasta riguardo al futuro di CSS layout,\u201d sostiene Whitworth. \u201cCSS Grid non \u00e8 la fine: \u00e8 in realt\u00e0 solo l’inizio. In IE 10 \u2026 [abbiamo rilasciato] CSS Regions cos\u00ec come CSS Exclusions<\/a>. Penso che man mano che i web designer cominceranno ad utilizzare sempre di pi\u00f9 CSS Grid, realizzeranno perch\u00e9<\/em> 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\u00ec che la community sia esaltata riguardo ad essi e spinga il layout sul web ancora pi\u00f9 lontano.\u201d<\/p>\n

    \u201cPenso che adesso che abbiamo Grid, abbia assolutamente senso avere Exclusions,\u201d sostiene Andrew. \u201cCi d\u00e0 un modo per piazzare qualcosa in una griglia e farlo avvolgere dal testo, e non c’\u00e8 alcun altro modo per farlo. \u2026 E poi cose come Regions \u2026 Mi piacerebbe vedere che progredisce perch\u00e9 \u2026 una volta che possiamo costruire una bella struttura a griglia, potremmo volere che il contenuto vi scorra. Non c’\u00e8 un modo per farlo.\u201d<\/p>\n

    \u201cPer quel che mi riguarda, non finisce qui: questo \u00e8 solo l’inizio.\u201d<\/p>\n<\/div>\n

    \n

    Entrare nella griglia<\/h2>\n