Guida introduttiva al layout CSS

Negli ultimi due anni, CSS Layout è cambiato radicalmente così come il modo in cui sviluppiamo il front-end dei nostri siti. Ora abbiamo una vera scelta in termini di metodi di layout che utilizziamo nei CSS per sviluppare i nostri siti, il che significa che spesso dobbiamo scegliere quale approccio adottare. In questo articolo, illustrerò i vari metodi di layout che hai a disposizione, spiegando le basi di come vengono utilizzati e per cosa vengono utilizzati.

Questa guida è per te se sei abbastanza nuovo nei CSS e ti stai chiedendo quale sia il modo migliore per avvicinarsi al layout, ma anche se sei uno sviluppatore esperto di altre parti dello stack che vuole assicurarsi che la tua comprensione del layout oggi sia aggiornata . Non ho provato a documentare completamente ogni metodo di layout qui, poiché ciò avrebbe creato un libro e non un articolo. Invece, sto dando una panoramica di ciò che è a tua disposizione, con molti link per saperne di più.

Flusso normale

Se prendi una pagina Web HTML a cui non è applicato CSS per modificare il layout, gli elementi verranno visualizzati nel flusso normale . Nel flusso normale, le caselle vengono visualizzate una dopo l'altra in base alla modalità di scrittura del documento. Ciò significa che se hai una modalità di scrittura orizzontale, una in cui le frasi vanno da sinistra a destra o da destra a sinistra, il flusso normale visualizzerà le caselle degli elementi a livello di blocco una dopo l'altra verticalmente lungo la pagina.

Se sei in una modalità di scrittura verticale, le frasi scorrono verticalmente in modo che il flusso normale disponga i blocchi orizzontalmente.

Il flusso normale è il punto in cui inizi con qualsiasi layout: quando crei un layout CSS, prendi i blocchi e fai in modo che facciano qualcosa di diverso dal flusso normale.

Struttura il tuo documento per sfruttare il flusso normale

Puoi sfruttare il flusso normale assicurandoti che il tuo documento inizi in modo ben strutturato. Immagina se, invece di questo concetto di flusso normale, il browser ammucchiasse tutte le tue scatole nell'angolo una sopra l'altra fino a creare un layout. Ciò significherebbe che dovresti posizionare ogni singola cosa sulla pagina. Invece, il browser mostra i nostri contenuti in modo immediatamente leggibile.

Se il tuo CSS non viene caricato, l'utente può comunque leggere il contenuto e gli utenti che non ottengono affatto CSS (ad esempio qualcuno che utilizza uno screen reader) riceveranno il contenuto nell'ordine in cui si trova nel documento. Questo rende importante da un punto di vista dell'accessibilità che il tuo documento HTML inizi la sua vita in un buon ordine; tuttavia, ti semplificherà anche la vita come sviluppatore web. Se il tuo contenuto è nell'ordine in cui un utente si aspetterebbe di leggerlo, non dovrai apportare modifiche sostanziali al layout per metterlo nel posto giusto. Con i metodi di layout più recenti potresti essere sorpreso di quanto poco devi fare.

Pertanto, prima di pensare al layout, pensa alla struttura del documento e all'ordine in cui desideri che il tuo contenuto venga letto dall'alto verso il basso.

Allontanarsi dal flusso normale

Una volta che abbiamo un documento ben strutturato, dobbiamo decidere come prenderlo e trasformarlo nel layout desiderato. Ciò comporterà l'allontanamento dal flusso normale, per parti del nostro documento. Abbiamo tutta una serie di metodi di layout da utilizzare. Il primo metodo che daremo un'occhiata è float , poiché i float sono un'eccellente dimostrazione di cosa significhi togliere un elemento dal flusso normale.

Galleggia

I float vengono utilizzati per spostare una casella a sinistra oa destra, consentendo la visualizzazione del contenuto avvolto attorno ad essa.

Per rendere mobile un elemento, usa la proprietà CSS float e un valore di sinistra o di destra. Il valore predefinito di float è nessuno.

 .item { float: left; }

Vale la pena notare che quando si sposta un elemento e il testo lo avvolge, ciò che accade è che le caselle di riga di quel contenuto vengono accorciate. Se fai fluttuare un elemento e la casella seguente contenente il tuo testo ha un colore di sfondo applicato, puoi vedere che questo colore di sfondo verrà quindi eseguito sotto l'elemento mobile.

Poiché si accorciano le caselle di riga per creare spazio tra il float e il testo di ritorno a capo, è necessario impostare un margine sull'elemento float. Un margine sul testo sposterebbe semplicemente il testo dal bordo del contenitore. Per un'immagine fluttuante a sinistra, dovresti aggiungere un margine a destra e in basso supponendo che tu voglia che l'immagine sia allineata con la parte superiore e sinistra del contenitore.

Cancellazione dei galleggianti

Dopo aver spostato un elemento, tutti i seguenti elementi si avvolgeranno attorno a quell'elemento mobile finché non si avvolgono al di sotto e il flusso normale continua. Se vuoi evitarlo, devi cancellare il galleggiante.

Sull'elemento che vuoi iniziare a visualizzare dopo il float, aggiungi la proprietà clear con un valore di sinistra per indicare che un elemento è stato spostato a sinistra, a destra per eliminare un elemento che è stato spostato a destra o entrambi per eliminare eventuali float.

 .clear { clear: both; }

Il metodo sopra funziona se vuoi che un elemento inizi dopo un float. Non sarà di aiuto se ti trovi in ​​una situazione in cui hai un oggetto fluttuante all'interno di una scatola, con del testo a fianco. Se il testo è più corto dell'elemento float, la casella verrà disegnata sotto il contenuto e ignorerà il float. Come abbiamo già appreso, i float accorciano le caselle di linea, il resto del layout continua nel flusso normale.

Per prevenire questa situazione, dobbiamo cancellare qualcosa all'interno della scatola. Potremmo aggiungere un elemento vuoto e impostarlo per cancellare tutto. Ciò comporta l'inserimento di div vuoti nel nostro documento, il che non è l'ideale e potrebbe non essere possibile se la tua pagina è generata da un CMS. Quindi, invece, il tipico metodo di clearing floats è quello che è noto come clear fix hack. Questo metodo funziona aggiungendo contenuto generato CSS e impostandolo per cancellare entrambi.

Il contesto di formattazione dei blocchi

Un altro modo per cancellare i float all'interno di una casella consiste nell'invocare un Block Formatting Context (BFC) sul contenitore. Un contesto di formattazione a blocchi contiene tutto al suo interno, che includerebbe elementi mobili che non possono più sporgere dal fondo della scatola. Esistono alcuni modi per forzare un BFC, il più comune quando si cancellano i float è impostare la proprietà di overflow in modo che abbia un valore diverso da quello predefinito visibile.

 .container { overflow: auto; }

L'uso dell'overflow in questo modo generalmente funziona, tuttavia, in determinate situazioni potresti ritrovarti con ombre ritagliate o barre di scorrimento indesiderate sull'elemento. Può anche sembrare un po' confuso nel tuo foglio di stile: hai impostato l'overflow perché volevi le barre di scorrimento o semplicemente per ottenere questa capacità di cancellazione?

Per rendere più chiaro l'intento ed evitare che la creazione di un BFC causi effetti collaterali indesiderati, è possibile utilizzare flow-root come valore della proprietà display . L'unica cosa che display: flow-root fa è creare un BFC, cancellando così i tuoi float senza altri problemi causati.

 .container { display: flow-root; }

Uso legacy dei galleggianti

Fino all'arrivo di nuovi metodi di layout, i float sono stati utilizzati per creare layout di colonne, questa tecnica funzionava dando una larghezza a un insieme di elementi e impostandoli in modo che fluttuassero uno accanto all'altro. Un'attenta gestione della dimensione percentuale di queste caselle mobili potrebbe creare un effetto griglia.

Non suggerirei di iniziare un nuovo design ora e di utilizzare questo metodo. Tuttavia, rimarrà nei siti esistenti per molti anni a venire. Pertanto, se ti imbatti in un design in cui quasi tutto sembra fluttuare, questa è la tecnica in uso.

Risorse e ulteriori letture sui galleggianti e sulla compensazione dei galleggianti

• "The Clearfix: forza un elemento ad auto-cancellare i suoi figli", Chris Coyier, CSS-Tricks
• " float ", CSS: fogli di stile a cascata, documenti Web MDN
• " clear " CSS: fogli di stile a cascata, documenti Web MDN
• "Capire il layout CSS e il contesto di formattazione a blocchi", Rachel Andrew, Smashing Magazine

Posizionamento

Per rimuovere un elemento dal flusso normale o spostarlo dalla sua posizione nel flusso normale, puoi utilizzare la proprietà position in CSS. Quando sono in flusso normale, gli elementi hanno una position static . Gli elementi vengono visualizzati uno dopo l'altro nella dimensione Blocco e se si scorre la pagina scorrono con essa.

Quando si modifica il valore della posizione, in genere si utilizzano anche i valori di offset per spostare la casella da un particolare punto di riferimento. Il punto di riferimento utilizzato dipende dal valore della posizione che si sta utilizzando.

Posizionamento relativo

Se un elemento ha position: relative , il punto di riferimento è il punto in cui si troverebbe normalmente nel flusso normale. È quindi possibile utilizzare i valori di offset per le proprietà top , left , bottom e right per spostare la casella da dove verrebbe normalmente visualizzata.

 .item { position: relative; bottom: 50px; }

Nota che altri elementi nella pagina non rispondono alla nuova posizione del tuo elemento. Il posto in cui è stato posizionato in flusso normale è riservato, quindi è necessario gestire personalmente eventuali sovrapposizioni.

Posizionamento assoluto

position: absolute su un articolo e verrà rimosso completamente dal flusso normale. Lo spazio che è stato lasciato per esso verrà rimosso. L'elemento verrà quindi posizionato rispetto al suo blocco contenitore che, a meno che non sia nidificato all'interno di un altro elemento posizionato, sarà la finestra.

Pertanto, la prima cosa che accadrà se imposti la position: absolute su un elemento è che in genere finisce bloccato in alto e a sinistra della finestra. È quindi possibile utilizzare i valori di offset per le proprietà top , left , bottom e right per spostare la casella da quella posizione a dove si desidera che sia.

 .item { position: absolute; top: 20px; right: 20px; }

Spesso non si vuole che il box sia posizionato in base alla vista, ma in riferimento ad un elemento contenitore, è all'interno. In tal caso è necessario assegnare all'elemento contenitore un valore di posizione diverso da quello statico predefinito.

Come position: relative non rimuove l'articolo dal flusso normale, questa è la scelta abituale. Assegna l'elemento genitore a cui desideri impostare gli offset dalla position: relative e quindi sposta il blocco posizionato in modo assoluto dai confini di quell'elemento.

Posizionamento fisso

Qualcosa con position: fixed sarà posizionato nella maggior parte dei casi rispetto al viewport e rimosso dal flusso di documenti in modo che nessuno spazio sia riservato per esso. Quando la pagina viene fatta scorrere, l'elemento fisso rimane in posizione rispetto al viewport mentre il resto del contenuto nel flusso normale scorre come al solito.

 .item { position: fixed; top: 20px; left: 100px; }

Questo può essere utile per abilitare un pannello di navigazione fisso che rimane sullo schermo, ad esempio mentre il contenuto scorre. Come con altri valori di posizionamento, potresti causare sovrapposizioni durante questa operazione, quindi dovresti fare attenzione che tutto il contenuto possa essere letto e non finisca dietro un elemento fisso.

Per posizionare un elemento fisso diverso da quello relativo alla finestra, è necessario disporre di un elemento contenitore con una delle proprietà transform , perspective o filter impostata su un valore diverso dal valore predefinito none . In questo caso, quell'elemento diventerà il blocco contenitore e i tuoi offset si riferiscono a quel blocco piuttosto che alla finestra.

Posizionamento appiccicoso

position: sticky su un elemento farà scorrere l'elemento con il documento proprio come farebbe in un flusso normale, tuttavia, una volta raggiunto un certo punto rispetto alla finestra (usando i consueti offset) "si attacca" e inizia a agire come position: fixed . Questo è un valore più recente ed è meno ben supportato nei browser rispetto ad altri metodi, tuttavia, si ripiega semplicemente a scorrere con la pagina os è un valore ben utilizzato come miglioramento senza causare problemi se non è supportato.

 .item { position: sticky; top: 0; }

Ecco come creare l'effetto popolare di una barra di navigazione che scorre con il contenuto e poi si ferma nella parte superiore della finestra per rimanere sullo schermo mentre scorri il contenuto.

Risorse e ulteriori letture sul posizionamento

• "Posizionamento", Area di apprendimento MDN, documenti Web MDN, Mozilla
• “ position: sticky; ,” Chris Coyier, CSS-Tricks
• "Posizione CSS: appiccicosa", Informazioni di supporto del browser per il posizionamento appiccicoso, caniuse

Disposizione flessibile

Flexible Box Layout (Flexbox) è un metodo di layout progettato per il layout unidimensionale. Unidimensionale significa che desideri disporre i tuoi contenuti in una riga o come una colonna. Per trasformare il tuo elemento in un layout flessibile, usi la proprietà display con un valore di flex .

 .container { display: flex; }

I figli diretti di quell'elemento diventano elementi flessibili, verranno disposti come una riga, allineati al bordo iniziale nella direzione inline.

Gli assi di Flexbox

Nell'esempio sopra, ho descritto gli elementi come disposti allineati al bordo iniziale della nostra riga nella direzione in linea, piuttosto che descriverli come allineati a sinistra. I nostri elementi sono disposti in una riga perché il valore predefinito della proprietà flex-direction è row , questo crea una riga nella direzione inline, la direzione lungo la quale scorrono le frasi. Poiché stiamo lavorando in inglese, una lingua da sinistra a destra, l'inizio di una riga è a sinistra e quindi i nostri articoli iniziano da lì. Il valore di flex-direction definisce quindi l' asse principale di Flexbox.

L'asse trasversale, quindi, corre attraverso l'asse principale ad angolo retto. Se la tua direzione flessibile è row e i tuoi oggetti sono visualizzati nella direzione in linea, l'asse trasversale corre nella direzione del blocco. Se la tua flex-direction è column quindi gli elementi corrono nella direzione Blocco, l'asse trasversale è lungo la riga.

Se ti abitui a pensare in termini di asse principale e trasversale quando lavori con Flexbox, renderà molte cose più facili.

Direzione e ordine

Flexbox ti dà la possibilità di cambiare la direzione degli elementi sull'asse principale usando un valore di flex-direction di row-reverse o column-reverse .

Puoi anche modificare l'ordine di singoli articoli flessibili con la proprietà order . Tuttavia, dovresti prestare molta attenzione quando lo fai in quanto ciò può causare un problema a qualsiasi utente che naviga utilizzando la tastiera anziché il mouse o il touchscreen poiché l'ordine di tabulazione del documento seguirà l'ordine in cui si trova il contenuto nel sorgente. Per maggiori dettagli, vedere la sezione seguente sull'ordine visivo e dei documenti.

Le proprietà flessibili

Le proprietà flessibili sono come controllare i rapporti degli elementi flessibili lungo l'asse principale. Le tre proprietà sono:

• flex-grow
• flex-shrink
• flex-basis

Questi sono solitamente usati nella loro forma abbreviata della proprietà flex , il primo valore è flex-grow , il secondo flex-shrink e il terzo flex-basis .

 .item { flex: 1 1 200px; }

Il valore di flex-basis fornisce una dimensione che l'articolo avrà prima che si verifichi qualsiasi crescita o restringimento. Nell'esempio sopra, quella dimensione è di 200 pixel, quindi daremmo a ciascun elemento 200 pixel di spazio. È improbabile che il nostro contenitore si divida nettamente per 200 pixel e quindi ci sarà spazio residuo o non abbastanza spazio per tutti gli elementi se ciascuno ha 200 pixel. Le proprietà flex-grow e flex-shrink ci consentono di controllare cosa succede agli articoli se c'è troppo o non abbastanza spazio per loro.

Se flex-grow è impostato su un valore positivo, l'elemento può crescere per occupare spazio. Pertanto, nel nostro esempio sopra, dopo aver assegnato a ciascun elemento 200 pixel, l'eventuale spazio aggiuntivo verrà ripartito tra gli elementi.

Se flex-shrink è impostato su un valore positivo, l'articolo può ridursi nella situazione in cui si verificherebbe un overflow se a tutti gli articoli fosse assegnata la flex-basis . Se non c'era abbastanza spazio nel contenitore nel nostro esempio, ogni articolo si ridurrebbe di un importo uguale per ridurlo fino a quando tutti gli articoli non si adatterebbero al contenitore.

I valori flex-grow e flex-shrink possono essere qualsiasi valore positivo. Un articolo con un valore flex-grow maggiore riceverà più spazio disponibile in proporzione durante la crescita e con un valore flex-shrink maggiore verrà rimosso di più durante il restringimento.

Comprendere il modo in cui funzionano queste proprietà flessibili è davvero la chiave per comprendere Flexbox e le risorse elencate di seguito ti forniranno tutti i dettagli. Tuttavia, considera l'utilizzo di Flexbox quando hai un sacco di cose che vuoi allungare e schiacciare in un contenitore in una dimensione. Se ti ritrovi a cercare di allineare le cose in righe e colonne, vuoi una griglia, e in tal caso Flexbox probabilmente non è lo strumento per il lavoro.

Risorse e ulteriori letture per il layout flessibile

• "CSS Flexible Box Layout", una guida completa alle specifiche, documenti Web MDN, Mozilla
• "Una guida completa a Flexbox", Chris Coyier, CSS-Tricks
• "Flexbox Froggy", Un gioco per imparare Flexbox
• "Flexbugs", Un elenco curato dalla community di bug del browser relativi a Flexbox

Layout della griglia

CSS Grid Layout è stato progettato come metodo di layout bidimensionale. Bidimensionale significa che desideri disporre i tuoi contenuti in righe e colonne. Come con Flexbox, Grid Layout è un valore di display e quindi per iniziare a utilizzare Grid dovresti iniziare con display: grid sul tuo contenitore, quindi impostare alcune colonne e/o righe usando grid-template-columns e grid-template-rows proprietà delle grid-template-rows .

 .container { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 200px 200px; }

Il CSS sopra creerebbe una griglia di dimensioni fisse, con colonne e tracce di riga completamente fisse. Questo probabilmente non è quello che vuoi sul web e Grid ti copre bene. L'impostazione predefinita per qualsiasi traccia è auto , che generalmente può essere considerata "abbastanza grande per il contenuto". Se non avessimo creato tracce di riga, le righe sarebbero state create per consentirci di prendere qualsiasi contenuto aggiunto e queste sarebbero state ridimensionate auto . Un modello comune consiste nello specificare le tracce delle colonne ma consentire a Grid di creare righe come richiesto.

Mentre puoi impostare le tracce di colonne e righe utilizzando qualsiasi unità di lunghezza o percentuale, puoi anche utilizzare la nuova unità fr , un'unità creata per Grid Layout. L'unità fr è un'unità flessibile e denota una quota dello spazio disponibile nel contenitore della griglia.

La griglia può distribuire lo spazio per te; non è necessario calcolare le percentuali per assicurarsi che le cose si adattino a un contenitore. Nell'esempio seguente, stiamo creando colonne utilizzando l'unità fr e consentendo la creazione automatica delle tracce. Stiamo anche usando grid-gap per distanziare le nostre tracce (vedi la sezione sull'allineamento dei box per maggiori dettagli sugli spazi vuoti e sul layout della griglia).

Come con Flexbox e flex-grow o flex-shrink , l'unità fr si occupa della condivisione dello spazio disponibile. Un valore fr più alto per una traccia significa che ottiene più spazio disponibile in proporzione. Puoi anche mescolare unità fr e lunghezze assolute. Lo spazio necessario per le lunghezze verrà sottratto dallo spazio disponibile prima di elaborare le unità fr .

Terminologia della griglia

Una griglia ha sempre due assi: l'asse in linea corre nella direzione in cui le parole sono disposte sulla pagina e l'asse in blocco nella direzione in cui sono disposti i blocchi.

Il Grid Container è l'elemento su cui hai impostato display: grid on. Quindi hai Grid Lines, create dalle tracce di colonna e riga che hai specificato quando usi grid-template-columns e grid-template-rows . L'unità più piccola sulla griglia (tra quattro linee che si intersecano) è nota come cella della griglia, mentre un insieme di celle della griglia che costituiscono un rettangolo completo è chiamato Area della griglia.

Posizionamento automatico della griglia

Non appena crei una Griglia, i figli diretti del tuo contenitore della griglia iniziano a disporsi, uno in ciascuna cella della griglia. Lo fanno in base alle regole di posizionamento automatico della griglia. Queste regole assicurano che ogni elemento venga posizionato in una cella vuota evitando che gli elementi si sovrappongano.

Qualsiasi figlio diretto del contenitore della griglia a cui non hai assegnato una posizione verrà posizionato in base alle regole di posizionamento automatico. Nell'esempio seguente, ho fatto sì che ogni terzo elemento si estendesse su tracce a due righe, pur essendo ancora posizionato automaticamente in termini di linea di partenza.

Posizionamento di base basato sulla linea

Il modo più semplice per posizionare gli elementi sulla griglia è con il posizionamento basato sulla riga, dando all'elemento regole per dirgli di estendersi da una riga all'altra della griglia. Ad esempio, se ho una griglia con tre tracce di colonna e tracce di due righe, posso posizionare un elemento dalla riga di colonna 1 alla riga di colonna 3 e dalla riga di riga 1 alla riga di riga 3. Coprirà quindi quattro celle della griglia in totale , che copre due tracce di colonne e due righe di colonne.

 .item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }

Queste proprietà possono essere rappresentate come un'abbreviazione, grid-column grid-row della griglia con il primo valore iniziale e il secondo fine .

 .item { grid-column: 1 / 3; grid-row: 1 / 3; }

Gli elementi della griglia possono occupare le stesse celle, consentendo la creazione di design con contenuto sovrapposto. Gli elementi si accumulano nel solito modo in cui i contenuti si accumulano sul Web, con gli elementi che abbassano la fonte che appaiono in cima agli altri elementi. Tuttavia, puoi usare z-index per controllarlo.

Posizionamento con aree denominate

Puoi anche posizionare gli elementi sulla griglia utilizzando le aree con nome. Per utilizzare questo metodo, assegna un nome a ciascun elemento, quindi descrivi il layout come il valore della proprietà grid-template-areas .

 .item1 { grid-area: a; } .item2 { grid-area: b; } .item3 { grid-area: c; } .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "aabb" "aacc"; }

Ci sono alcune regole da ricordare quando si utilizza questo metodo. Se vuoi che un elemento si estenda su più celle, dovresti ripetere il nome. Le aree devono formare un rettangolo completo, non sono ammessi pezzi a forma di L o Tetris! La griglia deve essere completa: ogni cella deve essere riempita. Se vuoi lasciare uno spazio bianco, riempi quella cella con un . . Ad esempio, nel CSS sottostante lascio vuoto l'angolo in basso a destra.

 .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "aabb" "aac ."; }

Questo è un bel modo di lavorare poiché chiunque guardi il CSS può vedere esattamente come funzionerà il layout.

Risorse e ulteriori letture per il layout della griglia

C'è molto di più in CSS Grid Layout di quanto questa rapida panoramica abbia condiviso e le risorse seguenti ti aiuteranno ad apprendere le specifiche. I componenti e il layout della pagina intera possono essere allo stesso modo griglie, scegli Layout griglia se hai un layout bidimensionale da creare, non importa quanto grande o piccolo.

• "CSS Grid Layout", tecnologia Web per sviluppatori, documenti Web MDN, Mozilla
• "Grid by Example", Tutto ciò di cui hai bisogno per imparare CSS Grid Layout, Rachel Andrew
• "Grid Garden", un divertente gioco interattivo per testare e migliorare le tue abilità CSS
• "Layout Land", Jen Simmons, YouTube

Ho anche scritto una serie di articoli qui su Smashing Magazine che possono aiutarti a scavare in vari concetti di Grid:

• "Migliori pratiche con il layout della griglia CSS"
• "Styling celle vuote con contenuto generato e layout della griglia CSS"
• "Utilizzo della griglia CSS: supporto dei browser senza griglia"
• "CSS Grid Gotchas e ostacoli"
• "Denominare le cose nel layout della griglia CSS"

Ordine visivo e documentale

All'inizio di questo articolo, ti ho suggerito di iniziare con il tuo documento in un ordine che abbia senso leggere dall'alto verso il basso, poiché ciò sarebbe utile sia per l'accessibilità che in termini di funzionamento del layout CSS. Dalla nostra breve introduzione a Flexbox e CSS Grid, puoi vedere che sarebbe possibile spostare le cose in modo abbastanza drammatico lontano da quell'ordine. Questo ha il potenziale per causare un problema.

I browser seguiranno l'origine del documento per qualsiasi uso non visivo del documento. Pertanto, un'utilità per la lettura dello schermo leggerà l'ordine del documento e chiunque utilizzi una tastiera per navigare, scorrerà il documento nell'ordine in cui si trova nell'origine e non nell'ordine di visualizzazione. Molti utenti di utilità per la lettura dello schermo non sono completamente ciechi e quindi potrebbero utilizzare l'utilità per la lettura dello schermo oltre a poter vedere dove si trovano nel documento. Per entrambi i casi, un display confuso rispetto alla sorgente potrebbe creare davvero una situazione molto confusa.

Sii molto consapevole quando sposti gli elementi dall'ordine in cui sono nella fonte. Se ti ritrovi a riorganizzare l'ordine degli elementi in CSS, dovresti davvero tornare indietro e riorganizzare il tuo documento? Prova per vedere se riesci ancora a scorrere il tuo documento e l'ordine visivo ha senso.

Risorse e ulteriori letture per l'ordine visivo e dei documenti

• "Layout e accessibilità della griglia CSS", tecnologia Web per sviluppatori, documenti Web MDN, Mozilla
• "Ordine sorgente HTML vs ordine di visualizzazione CSS", Adrian Roselli
• "Flexbox e la navigazione della tastiera si disconnettono", Code Things, Tink
• "Il conflitto di ordini reattivi per il focus della tastiera", Alastair Campbell

Generazione di scatole

Tutto ciò che inserisci in una pagina Web crea una casella e tutto in questo articolo descrive come puoi utilizzare i CSS per disporre quelle scatole nel tuo progetto, tuttavia, in determinate circostanze potresti non voler creare affatto una scatola. Ci sono due valori della proprietà display che si occupano di situazioni in cui non vuoi riquadri.

Non generare la scatola o il contenuto ( display: none )

Se si desidera che l'elemento e tutto il contenuto di tale elemento, inclusi eventuali elementi figlio, non vengano generati, è possibile utilizzare display: none . L'elemento ora non verrà visualizzato e non verrà riservato spazio per dove sarebbe stato.

 .item { display: none; }

Non generare questo elemento, ma generare qualsiasi elemento figlio ( display: contents )

Viene visualizzato un nuovo valore di display display: contents . Applica display: contents a un elemento e il riquadro per quell'elemento non verranno generati ma eventuali figli verranno generati normalmente. Questo può essere utile se si desidera che gli elementi figlio indiretti diventino parte di un layout flessibile o griglia.

Nell'esempio seguente, il primo elemento flessibile contiene due elementi figlio nidificati, ma come è impostato per la display: contents la sua casella non viene affittata e gli elementi figlio vengono visualizzati come se fossero il figlio diretto e diventano elementi flessibili. Rimuovi display: contents da quell'elemento per vedere come cambia il layout.

Risorse e ulteriori letture per la generazione di scatole

• "Scatole a scomparsa con display: contents ", Rachel Andrew
• Come display: contents; Funziona,” Ire Aderinokun,
• display: contents ,” Informazioni sul supporto del browser, caniuse

Allineamento

L'allineamento è stato un argomento complicato sul Web fino a poco tempo, con modi molto limitati per allineare correttamente gli elementi all'interno delle scatole. Questo sta cambiando con il Box Alignment Module, che attualmente utilizzerai per controllare l'allineamento nei contenitori Grid e Flex. In futuro, anche altri metodi di layout implementeranno queste proprietà di allineamento. L'elenco delle proprietà di allineamento dettagliato nella specifica Box Alignment è il seguente:

• justify-content
• align-content
• place-content
• justify-items
• align-items
• place-items
• justify-self
• align-self
• place-self
• row-gap
• column-gap
• gap

Poiché i modelli di layout hanno caratteristiche diverse, l'allineamento funziona in modo leggermente diverso a seconda del modello di layout in uso. Diamo un'occhiata a come funziona l'allineamento con alcuni semplici layout Grid e Flex.

Le proprietà align-items e justify-items impostano le proprietà align-self e justify-self come un gruppo. Queste proprietà allineano gli elementi all'interno della loro area della griglia.

Le proprietà align-content e justify-content allineano le tracce della griglia, dove c'è più spazio nel contenitore della griglia di quanto sia necessario per visualizzare le tracce.

In Flexbox, align-items e align-self occupano dell'allineamento sull'asse incrociato, mentre justify-content si occupa della distribuzione dello spazio sull'asse principale.

Sull'asse trasversale, puoi utilizzare align-content in cui hai avvolto le linee flessibili e spazio aggiuntivo nel contenitore flessibile.

See the resources for some links that discuss Box Alignment in detail across layout methods. It really is worth spending some time understanding how alignment works, as it will make working with Flexbox, Grid and future layout methods far easier.

Row And Column Gaps

A multiple-column layout has the column-gap property, and the Grid Layout spec had — until recently — the properties grid-column-gap , grid-row-gap , and grid-gap . These have now been removed from the Grid specification and added to Box Alignment. At the same time, the grid- prefixed properties were renamed to column-gap , row-gap , and gap . Browsers will alias the prefixed properties to the new renamed ones so you do not need to worry if you are using the better supported old names in your code right now.

The renaming means that these properties can be also applied to other layout methods, the obvious candidate being Flexbox. While no browser supports gaps in Flexbox at the moment, in future we should be able to use column-gap and row-gap to create space between flex items.

Resources And Further Reading For Alignment

• “CSS Box Alignment,” CSS: Cascading Style Sheets, MDN web docs, Mozilla
• “Box Alignment in Flexbox,” CSS Flexible Box Layout, MDN web docs, Mozilla
• “Box Alignment in CSS Grid Layout,” CSS Grid Layout, MDN web docs, Mozilla
• “The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment,” Rachel Andrew, Smashing Magazine
• “Box Alignment Cheatsheet,” Rachel Andrew

Multi-Column Layout

A multiple-column layout is a layout type that enables the creation of columns, such as you might find in a newspaper. A block is split into columns, and you read down a column in the block direction then return to the top of the next column. While reading content in this way is not always useful in a web context as people don't want to have to scroll up and down to read, it can be a helpful way to display small amounts of content or to collapse down sets of checkboxes or other small UI elements.

A multiple-column layout can also be used to display sets of cards or products which have differing heights.

Setting A Column Width

To set an optimal column width, and instruct the browser to display as many columns as possible at that width use the following CSS:

 .container { column-width: 300px; }

This will create as many as 300 pixel columns as possible, any leftover space is shared between the columns. Therefore, unless your space divides into 300 pixels with no remainder, it is likely that your columns will be slightly wider than 300 pixels.

Setting A Number Of Columns

Instead of setting the width, you could set a number of columns using column-count . In this case, the browser will share the space between the number of columns you have asked for.

 .container { column-count: 3; }

If you add both column-width and column-count , then the column-count property acts as a maximum. In the below code, columns will be added until there are three columns, at which point any extra space will be shared between those three columns even if there was enough space for an additional column.

 .container { column-width: 300px; column-count: 3; }

Gaps And Column Rules

You cannot add margins or padding to individual column boxes, to space out columns use the column-gap property. If you do not specify a column-gap , it will default to 1em to prevent columns bumping up against each other. This is a different behavior to the way column-gap is specified for other layout methods, where it defaults to 0. You can use any length unit for your gap, including 0 if you want no gap at all.

The column-rule property gives you the ability to add a rule between two columns. It is a shorthand for column-rule-width , column-rule-color , and column-rule-style , and acts in the same way as border . Note that a rule does not take up any space of its own. It lays on top of the gap so to increase or decrease space between the rule and the content you need to increase or decrease the column-gap .

Allowing Elements To Span Columns

You can span an element inside the multicol container across all of the columns using the column-span property on that element.

 h3 { column-span: all; }

When a column-span happens, the multicol container essentially stops above the spanning element, therefore, the content forms into columns above the element and then remaining content forms a new set of column boxes below the spanning element.

You can only use column-span: all or column-span: none ; it isn't possible to span some of the columns. At the time of writing, Firefox does not support the column-span property.

Resources And Further Reading For Multiple-Column Layout

• “Using Multi-Column Layouts,” CSS Multi-column Layout, MDN web docs, Mozilla

Fragmentation

Multiple-Column Layout is an example of fragmentation . In this case, the content is broken into columns. It is, however, very similar to the way that content is broken into pages when printing. This process is dealt with by the Fragmentation specification, and this specification contains properties to help control the breaking of content.

For example, if you have laid out a set of cards using multicol and you want to make sure that a card never breaks in half, becoming split between two columns you can use the property break-inside with a value of avoid . Due to browser compatibility reasons, you will also want to use the legacy page-break-inside property as well.

 .card { page-break-inside: avoid; break-inside: avoid; }

If you want to avoid a break directly after a heading, you can use the break-after property.

 .container h2 { page-break-after: avoid; break-after: avoid; }

These properties can be used when preparing a print stylesheet and also in multicol. In the example below, I have three paragraphs in a multicol container that fragments into three columns. I have given break-inside: avoid to the p element meaning that the paragraphs end up one in each column (even if this makes the columns uneven).

Risorse e ulteriori letture per la frammentazione

• "Una guida allo stato dei fogli di stile di stampa nel 2018", Rachel Andrew, Smashing Magazine
• "Interruzioni di colonna", QuirksMode.org

Selezione dei tipi di layout: come scegliere?

La maggior parte delle pagine Web utilizzerà una combinazione di questi tipi di layout e ciascuna specifica definisce esattamente come interagiscono tra loro. Ad esempio, potresti avere un layout griglia in cui alcuni elementi griglia sono anche contenitori flessibili. Alcuni di questi contenitori flessibili potrebbero essere un blocco contenitore per un elemento posizionato o avere un'immagine fluttuante all'interno. Le specifiche sono scritte con l'aspettativa che mescoleremo i modelli di layout, in base a ciò che è meglio per il contenuto che stiamo preparando. In questa guida, ho cercato di fornire una panoramica del modo in cui si comporta ogni tipo di layout, al fine di aiutarti a perfezionare quello che probabilmente sarà il modo migliore per ottenere un effetto particolare.

Tuttavia, non aver paura di giocare con diversi modi per creare il design che hai in mente. Ci sono meno posti di quanto potresti immaginare in cui dovresti preoccuparti che le tue scelte causino problemi reali. Inizia con una buona struttura del documento e fai attenzione a non disconnettere la visualizzazione visiva da quell'ordine. Gran parte del resto è solo un caso per testare che le cose funzionino come ti aspetti nei browser di destinazione.