Avere una certa confidenza con il linguaggio CSS è fondamentale se si aspira a diventare sviluppatore front end. Questo linguaggio possiede una serie di proprietà e regole che, se padroneggiate, permettono di personalizzare in maniera molto dettagliata e personale il proprio sito web.
CSS, cos è?
Cascading Style-Sheets, identifica il linguaggio di markup per realizzare i nostri fogli di stile. CSS, insieme al linguaggio HTML e al linguaggio Javascript rappresenta uno degli strumenti fondamentali per il web development. Interagisce prevalentemente con l’HTML e consente allo sviluppatore di specificare le caratteristiche degli elementi della pagina web (font, layout, immagini…) tutto attraverso specifiche regole e proprietà.
In questo articolo parleremo proprio della proprietà overflow CSS. Una delle più importanti di questo linguaggio, in quanto permette di controllare ciò che accade quando il contenuto di un elemento è troppo grande per entrare in un'area. Quando ciò accade, il contenuto "trabocca" in un'altra area, orizzontalmente (asse X) o verticalmente (asse Y). I principali valori della proprietà overflow sono i seguenti:
- Visible: Questo è il valore predefinito che assume la proprietà overflow se non ne viene specificato alcuno. Con questa proprietà, possiamo vedere chiaramente il nostro contenuto quando inonda in un'altra area della pagina web. Vediamo insieme un esempio.
<div>
<p>
Aulab Hackademy è il Corso di Coding Online per Diventare Sviluppatore Web in 3 mesi. Lezioni
in diretta live streaming, esercitazioni pratiche seguite dai tutor e materiale didattico su
piattaforma online.
</p>
</div>
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
In questo caso il testo si trova comodamente nel contenitore bianco senza oltrepassare il bordo del contenitore su entrambi gli assi. Ma non è sempre così.
Potresti lavorare a un progetto e poi renderti conto che un pezzo di testo attraversa il confine. Qualcosa come questo:
<div>
<p>
Aulab Hackademy è il Corso di Coding Online per Diventare Sviluppatore Web in 3 mesi. Lezioni
in diretta live streaming, esercitazioni pratiche seguite dai tutor e materiale didattico su
piattaforma online. Aulab Hackademy è il Corso di Coding Online per Diventare Sviluppatore
Web in 3 mesi. Lezioni in diretta live streaming, esercitazioni pratiche seguite dai tutor e
materiale didattico su piattaforma online. Aulab Hackademy è il Corso di Coding Online per
Diventare Sviluppatore Web in 3 mesi. Lezioni in diretta live streaming, esercitazioni
pratiche seguite dai tutor e materiale didattico su piattaforma online.
</p>
</div>
Lo stile CSS rimane lo stesso. Ma il testo sforerà dalle dimensioni del contenitore bianco che lo contiene. In un progetto di vita reale, questo sarebbe ancora più fastidioso perché avresti questo testo sovrapposto ad altri elementi della pagina. Siamo in grado di vedere l'overflow del testo in un'altra area (che non sia il suo contenitore), perché il valore predefinito qui è visible anche se non lo abbiamo specificato.
Aggiungiamolo al codice CSS in modo da poter vedere la proprietà applicata:
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
overflow: visible;
}
p{
color: green;
}
Anche dopo aver specificato la proprietà overflow a visible, il risultato rimarrà lo stesso. Serve sfruttare altri valori della proprietà overflow CSS per risolvere questo problema.
- Hidden: Con Hidden la parte del testo che fuoriesce dal proprio contenitore verrà ritagliata, tanto da diventare “invisibile”. Non devi preoccuparti dello spazio occupato dall'overflow. Una volta che il contenuto è stato ritagliato, non si troverà più nell'area in cui è traboccato. Vedremo un esempio prima di parlare del motivo per cui questa non è la soluzione migliore. Aggiungiamo il valore nascosto:
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
overflow: hidden;
}
p{
color: green;
}
Grazie al valore hidden risolviamo il problema di avere contenuti in un'area in cui non dovrebbero esserci, ma non fornisce un modo per accedere ai contenuti che sono stati tagliati.
- Scroll: Quindi sappiamo che il valore hidden taglia e nasconde il che inonda elementi che non lo contengono. Ma il valore scroll taglia anche il testo e fornisce una barra di scorrimento in modo che possiamo scorrere e vedere la parte del testo che è stata tagliata.
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
overflow: scroll;
}
p{
color: green;
}
Ora abbiamo le barre di scorrimento su entrambi gli assi. Il testo risulterà visibile nella sua totalità e non inonderà gli elementi circostanti.
- Auto: Assegnando il valore auto la barra di scorrimento appare solo verticalmente. Questo valore rileva la posizione dell'overflow del testo e aggiunge una barra di scorrimento in quella direzione.
Nessuna barra di scorrimento è stata aggiunta orizzontalmente perché non abbiamo overflow del contenuto in quell'asse.
- overflow-x e overflow-y: specificano ciò che accade orizzontalmente e verticalmente. Vuol dire che posso usare i valori appena elencati solo in una direzione, a seconda dell’asse scelto.
Attraverso questo tutorial potrai imparare il controllo dell’overflow di un contenuto all’interno di una pagina web, che non sia obbligatoriamente un testo. Per approfondire e migliorare la tua abilità con il linguaggio CSS, consulta il nostro articolo sugli esercizi CSS e la nostra guida html e css in italiano!
