Podcast su CSS - 009: Layout
Immagina di lavorare come sviluppatore e un collega designer ti consegna il design di un sito web completamente nuovo. Il design presenta tutti i tipi di layout e composizioni interessanti: layout bidimensionali che tengono conto della larghezza e dell'altezza dell'area visibile, nonché dei layout che devono essere fluidi e flessibili. Come fai a decidere il modo migliore per applicare uno stile a questi elementi con CSS?
Il CSS ci offre vari modi per risolvere problemi di layout su un asse orizzontale, su un asse verticale o persino su entrambi. Scegliere il metodo di layout giusto per un determinato contesto può essere difficile e spesso potresti aver bisogno di più di un metodo di layout per risolvere il problema. A questo scopo, nei seguenti moduli scoprirai le caratteristiche uniche di ciascun meccanismo di layout CSS per prendere decisioni in merito.
Layout: una breve cronologia
Agli albori del web,
i progetti più complessi di un semplice documento erano disposti con elementi <table>.
La separazione dell'HTML dagli stili visivi è stata semplificata con l'adozione generale di CSS dai browser alla fine degli anni '90.
Il CSS ha aperto le porte agli sviluppatori in grado di modificare completamente l'aspetto e il design di un sito web senza mai toccare l'HTML.
Questa nuova funzionalità ha ispirato progetti come The CSS Zen Garden, creato per dimostrare l'efficacia del CSS e incoraggiare un maggior numero di sviluppatori a impararlo.
Il CSS si è evoluto di pari passo con l'evoluzione delle nostre esigenze di web design e della tecnologia dei browser. Puoi leggere l'evoluzione nel tempo del layout CSS e del nostro approccio al layout in questo articolo di Rachel Andrew.
Layout: presente e futuro
Il CSS moderno dispone di strumenti di layout eccezionalmente potenti. Abbiamo sistemi dedicati per il layout e esamineremo il funzionamento generale di ciò che abbiamo a disposizione, prima di approfondire ulteriormente Flexbox e Grid nei prossimi moduli.
Informazioni sulla proprietà display
La proprietà display esegue due operazioni.
La prima cosa che fa è determinare se la casella a cui è applicata agisce come in linea o a blocchi.
.my-element {
display: inline;
}
Gli elementi incorporati si comportano come le parole di una frase.
Si trovano uno accanto all'altro, in direzione in linea.
Elementi come <span> e <strong>,
che in genere vengono utilizzati per applicare uno stile a parti di testo all'interno di elementi che contengono elementi come <p> (paragrafo),
sono incorporati per impostazione predefinita.
Mantiene inoltre lo spazio vuoto circostante.
Non puoi impostare larghezza e altezza esplicite per gli elementi in linea. Eventuali margini e spaziatura interna a livello di blocco verranno ignorati dagli elementi circostanti.
.my-element {
display: block;
}
Gli elementi blocco non sono affiancati. Creano una nuova linea personale. A meno che non venga modificato da un altro codice CSS, un elemento blocco si espande fino a raggiungere le dimensioni della dimensione in linea, coprendo quindi l'intera larghezza in modalità di scrittura orizzontale. Il margine su tutti i lati di un elemento blocco verrà rispettato.
.my-element {
display: flex;
}
La proprietà display determina anche il comportamento degli elementi secondari di un elemento.
Ad esempio,
l'impostazione della proprietà display su display: flex rende la casella una casella a livello di blocco
e converte anche i relativi elementi secondari in elementi flessibili.
Ciò attiva le proprietà flessibili che controllano allineamento, ordinamento e flusso.
Flexbox e griglia
Esistono due meccanismi principali di layout che creano regole di layout per più elementi: flexbox e grid. Condividono delle somiglianze, ma sono progettati per risolvere diversi problemi di layout.
Flexbox
.my-element {
display: flex;
}
Flexbox è un meccanismo di layout per layout unidimensionali. Layout su un unico asse, orizzontalmente o verticalmente. Per impostazione predefinita, flexbox allinea gli elementi secondari dell'elemento uno accanto all'altro, in direzione in linea, e li allunga nella direzione del blocco in modo che abbiano tutti la stessa altezza.
Gli elementi rimarranno sullo stesso asse e non andranno a capo quando esauriscono lo spazio disponibile.
Provano invece a schiacciarsi sulla stessa linea l'uno sull'altro.
Questo comportamento può essere modificato utilizzando le proprietà align-items, justify-content e flex-wrap.
Flexbox converte anche gli elementi secondari in elementi flessibili, il che significa che puoi scrivere regole sul loro comportamento all'interno di un container flessibile.
Puoi modificare l'allineamento, l'ordine e la giustificazione per un singolo elemento.
Puoi anche modificare le modalità di riduzione o crescita utilizzando la proprietà flex.
.my-element div {
flex: 1 0 auto;
}
La proprietà flex è un'abbreviazione per flex-grow, flex-shrink e flex-basis.
Puoi espandere l'esempio riportato sopra in questo modo:
.my-element div {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}
Gli sviluppatori forniscono queste regole di basso livello per suggerire a un browser come dovrebbe comportarsi il layout quando è richiesto dalle dimensioni dei contenuti e dell'area visibile. Questo lo rende un meccanismo molto utile per il Responsive Web Design.
Griglia
.my-element {
display: grid;
}
La griglia è simile sotto molti aspetti a flexbox, ma è progettata per controllare i layout multiasse anziché i layout a un asse (spazio verticale o orizzontale).
La griglia consente di scrivere regole di layout su un elemento che ha display: grid e introduce alcune nuove primitive per lo stile del layout, come le funzioni repeat() e minmax().
Un'unità della griglia utile è l'unità fr, che corrisponde a una frazione dello spazio rimanente. Puoi creare griglie tradizionali a 12 colonne, con uno spazio separato tra ciascun elemento, con 3 proprietà CSS:
.my-element {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
L'esempio riportato sopra mostra un layout ad asse singolo. Mentre flexbox considera principalmente gli elementi come gruppo, griglia ti offre un controllo preciso sul loro posizionamento in due dimensioni. Potremmo definire che il primo elemento in questa griglia occupi 2 righe e 3 colonne:
.my-element :first-child {
grid-row: 1/3;
grid-column: 1/4;
}
Le proprietà grid-row e grid-column indicano al primo elemento della griglia di estendersi fino all'inizio della quarta colonna,
dalla prima colonna e poi alla terza riga, a partire dalla prima riga.
Layout flusso
Se non usi griglia o flexbox, gli elementi vengono visualizzati nel flusso normale. Esistono diversi metodi di layout che puoi utilizzare per regolare il comportamento e la posizione degli elementi durante il flusso normale.
Blocco incorporato
Ricordi perché gli elementi circostanti non rispettano il margine del blocco e la spaziatura interna in un elemento in linea?
Con inline-block puoi causare questa situazione.
p span {
display: inline-block;
}
L'uso di inline-block ti fornisce un riquadro che ha alcune delle caratteristiche di un elemento a livello di blocco, ma che scorre comunque in linea con il testo.
p span {
margin-top: 0.5rem;
}
Float
Se hai un'immagine che si trova all'interno di un paragrafo di testo, non sarebbe comodo che quel testo avvolgasse l'immagine come si potrebbe vedere su un giornale? Puoi eseguire questa operazione con i numeri in virgola mobile.
img {
float: left;
margin-right: 1em;
}
La proprietà float indica a un elemento di "fluttuare" nella direzione specificata.
All'immagine in questo esempio viene indicato di fluttuare in alto verso sinistra per poter "avvolgere" gli elementi di pari livello.
Puoi indicare a un elemento di galleggiare left, right o inherit.
Layout a più colonne
Se l'elenco di elementi è molto lungo, ad esempio un elenco di tutti i paesi del mondo, l'utente potrebbe perdere molto scorrimento e tempo. Potrebbe anche creare spazio vuoto in eccesso sulla pagina. Con il CSS multicolonna, puoi suddividerlo in più colonne per risolvere entrambi i problemi.
<h1>All countries</h1>
<ul class="countries">
<li>Argentina</li>
<li>Aland Islands</li>
<li>Albania</li>
<li>Algeria</li>
<li>American Samoa</li>
<li>Andorra</li>
…
</ul>
.countries {
column-count: 2;
column-gap: 1em;
}
In questo modo, il lungo elenco viene diviso automaticamente in due colonne e viene aggiunto uno spazio tra le due colonne.
.countries {
width: 100%;
column-width: 260px;
column-gap: 1em;
}
Anziché impostare il numero di colonne in cui sono suddivisi i contenuti, puoi anche definire la larghezza minima desiderata utilizzando column-width.
Man mano che diventa disponibile più spazio nell'area visibile, verranno create automaticamente altre colonne e, man mano che lo spazio si riduce, anche le colonne diminuiranno.
Questa funzionalità è molto utile in contesti di web design reattivo.
Posizionamento della
L'ultima panoramica dei meccanismi di layout è il posizionamento.
La proprietà position modifica il comportamento di un elemento nel normale flusso del documento e la relazione con altri elementi.
Le opzioni disponibili sono relative, absolute, fixed e sticky. Il valore predefinito è static.
.my-element {
position: relative;
top: 10px;
}
Questo elemento viene spostato di 10 px verso il basso in base alla sua posizione corrente nel documento,
poiché è posizionato rispetto a se stesso.
L'aggiunta di position: relative a un elemento lo rende anche il blocco contenitore di tutti gli elementi secondari con position: absolute.
Ciò significa che l'elemento figlio verrà ora riposizionato in questo particolare elemento,
anziché nell'elemento padre relativo più in alto, quando gli è applicata una posizione assoluta.
.my-element {
position: relative;
width: 100px;
height: 100px;
}
.another-element {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
}
Quando imposti position su absolute,
l'elemento viene rimosso dal flusso di documenti corrente.
Ciò significa due cose:
- Puoi posizionare questo elemento dove preferisci utilizzando
top,right,bottomeleftnel relativo elemento principale più vicino. - Tutti i contenuti che circondano un elemento assoluto fanno scorrere il flusso per riempire lo spazio rimanente lasciato da quell'elemento.
Un elemento con un valore position di fixed si comporta in modo simile a absolute,
in cui l'elemento principale è l'elemento <html> principale.
Gli elementi con posizione fissa rimangono ancorati dall'angolo in alto a sinistra in base ai valori top, right, bottom e left che hai impostato.
Puoi ottenere gli aspetti ancorati e fissi di fixed e gli aspetti più prevedibili che rispettano il flusso dei documenti di relative utilizzando sticky.
Con questo valore, quando l'area visibile scorre oltre l'elemento,
rimane ancorato ai valori top, right, bottom e left che hai impostato.
Conclusione
Il layout CSS offre molta scelta e flessibilità. Per approfondire l'efficacia di CSS Flexbox e Grid, continua nei prossimi moduli.
Verifica la tua comprensione
Verifica le tue conoscenze sul layout
Quali sono le due attività della proprietà display?
inline, block o none.overflow.Per inserire più paragrafi in colonne, qual è la proprietà CSS più adatta per questa attività?
display: gridcolumn-countdisplay: flexfloatChe cosa significa se un blocco è fuori flusso?
top o left.position: absolute, ad esempio, viene ora posizionato con le coordinate X e Y in base al blocco che lo contiene e non al suo ordine rispetto ad altri elementi di pari livello.Flexbox e Grid eseguono l'aggregazione dei figli per impostazione predefinita?
flex-wrap: wrap o repeat(auto-fit, 30ch).