Web Design: CSS3 e l’allineamento verticale di testo ed elementi

Probabilmente, chi ha iniziato a masticare il Web poco meno di un decennio fa ricorda quanto fosse ostico riuscire a rendere un layout armonioso, mantenendo allo stesso tempo la flessibilità e la leggerezza richiesta da un mondo, quello responsive, che man mano avanzava.
Barra Servizi

Un classico: l’allineamento verticale nell’epoca a.C. ( avanti CSS3 )

Questo articolo non vuole essere blasfemo, ma chi ha attraversato entrambi i periodi del Web Design può capire benissimo quali erano i limiti di allora e quali sono i vantaggi di oggi.

Prima dell’avvento del CSS3, alcune operazioni apparentemente semplici, come può sembrare un allineamento verticale, risultavano piuttosto rognose. Un esempio classico era quello di avere diverse colonne corredate ognuna da immagine e didascalia in sovraimpressione. Ecco, qui veniva il bello: non sempre il testo era della stessa lunghezza degli altri all’interno del proprio contenitore, quindi in linea generale le didascalie non occupavano gli spazi tutte allo stesso modo e ciò rendeva il layout poco armonioso agli occhi dell’utente. 

In un contenitore, per centrare orizzontalmente il testo bastava un text-align:center, ma per centrare lo stesso testo verticalmente, beh, si doveva sbattere un pò la testa. Talvolta, si usava ricorrere alle care vecchie tabelle (perdendo di flessibilità), altre volte a degli escamotage CSS incompatibili con determinati browser, altre ancora, invece, ricorrendo addirittura a dei calcoli JavaScript (perdendoci leggermente in performance e tempo).

L’allineamento verticale nell’epoca d.C. ( dopo CSS3 )

Fortunatamente, hanno pensato bene di portare ad un altro livello tutti gli strumenti utili ad un Web Designer introducendo il CSS3 e indicando ai vari browser la giusta direzione verso le nuove tecnologie. Il CSS3 per uno sviluppatore è come un nuovo set di pennelli in legno per un pittore, una tavolozza piena di nuovi colori e una nuova tela su cui dipingere, insomma, un upgrade vero e proprio. 

Non voglio annoiarvi nell’elencare tutte le innovazioni che ha portato il CSS3, per questo c’è già abbondante materiale online. Passiamo subito all’atto pratico e centriamo verticalmente il nostro testo all’interno del suo contenitore.

Definendo un contenitore con id #container, ci bastano poche semplici regole: 

#container {
   height: 350px;
   display: flex;
   align-items: center;
   justify-content: center;
}

Ecco, il gioco è fatto. La regola justify-content viene utilizzata per centrare il testo anche orizzontalmente, poiché con il display:flex, altro strumento utilissimo, il text-align:center applicato direttamente sul contenitore non ha effetto, ma questo è un altro discorso.

Conclusioni e considerazioni

Il mondo del Web va veloce e cresce la necessità di avere delle soluzioni rapide per ovviare alle continue richieste di un mondo responsive fatto di dispositivi diversi, display diversi e risoluzioni diverse. Per quanto mi riguarda, questo è un esempio molto banale dei vantaggi del CSS3 e potremmo star qui ad elencarne altri centinaia. Da anni ormai i Web Designer sfruttano tutto il potenziale messo a disposizione da questa tecnologia ed è giusto che lo facciano anche a scapito di browser obsoleti perchè, alla fin dei conti, i principali browser si aggiornano di continuo permettendoci una compatibilità cross-browser non da poco, mentre, noi sviluppatori di certo non vogliamo star qui a scrivere del CSS compatibile con Internet Explorer 8 😁.

Link Utili

Display Flex: https://www.w3schools.com/css/css3_flexbox.asp

Align Items: https://www.w3schools.com/cssref/css3_pr_align-items.asp

 

 

Valentino Orlando

Leggi anche questi articoli

Facebook e Instagram a pagamento: cosa c’è di vero?

A riportare la notizia è stato il sito web The Verge: Facebook e Instagram a pagamento per arginare una perdita di utili avvenuta nell’ultimo anno. ...
Federico Petracca

Anche il web inquina: ecco come

Non c’è dubbio che Internet renda molte attività quotidiane apparentemente più sostenibili per il nostro Pianeta. Ma c’è una cattiva ...
Angelo Pignatelli

Come gestire i commenti negativi su Facebook

Commenti negativi su Facebook? Purtroppo bisogna mettere in conto che potrebbero arrivare. Ma come gestirli? ...
Giulia Chiffi
CHIAMA SCRIVICI