Guida CSS3 : 5 tecniche utili

I CSS sono spesso considerati una grande seccatura da molti sviluppatori web.

Non si tratta del tipico linguaggio di programmazione e può essere un po' ostico (o noioso) da implementare. Tuttavia, è possibile imparare alcune comuni tecniche di layout CSS per rendere l'esperienza molto più facile.

In questo articolo, tratterò cinque tecniche CSS che i principianti (e anche gli sviluppatori relativamente più esperti) dovrebbero conoscere quando costruiscono il loro layout web.

Tecnica CSS 1: Come centrare il contenuto in un div

Questa è una delle domande più comuni che ci rivolgono i nostri studenti (si, diamo anche corsi ;-) ) quando iniziano ad addentrasti nel mondo del web design. Un tempo era abbastanza complicato, perché si avevano a disposizione solo testi allineati o margini per centrare il contenuto in un contenitore. Tuttavia, dall'avvento di CSS Flexbox e CSS Grid, tutto è diventato molto più facile.

Supponendo di avere un codice HTML come questo:

<div class="container">    
<div class="content">      
Centriamo questo contenuto 
</div>  
</div>

avremmo bisogno del seguente CSS per centrare tutto ciò che è contenuto nel div :

.container {    
display: grid;    
place-items: center;    
height: 100vh;  
}

A cosa serve questo? Beh, semplicemente converte il contenitore in una griglia con un solo elemento (il nostro contenuto).

place-items è una proprietà che indica l'allineamento sia sull'asse orizzontale che su quello verticale. Impostando il valore a center , stiamo posizionando il nostro contenuto al centro.

Perché è utile sapere questo? Perché così possiamo allineare un oggetto in un asse quando ne abbiamo bisogno. Per esempio, possiamo usare i valori start center per allineare il contenuto solo orizzontalmente.

Un modo per ottenere questo risultato è quello di assicurarsi di avere un'altezza specifica per il contenitore, nel nostro caso, l'altezza del viewport (100vh)

Tecnica CSS 2: Come impaginare i contenuti in una riga (row).

Per impostazione predefinita, ogni qualvolta si aggiunge un div al codice HTML, questo viene ordinato dall'alto verso il basso in uno schema a colonne. Ma spesso ci sono almeno alcuni elementi nel vostro progetto che dovranno essere disposti in fila.
Come si gestiscono questi layout? Ci sono diversi modi per farlo, ma il modo migliore, secondo me, è quello di usare CSS Flexbox. Flexbox garantisce molta potenza e flessibilità (gioco di parole voluto) per disporre gli elementi in un'unica dimensione - riga o colonna.

Immaginiamo di voler costruire un elenco di schede/ articoli.

Avremo bisogno di un markup HTML simile al seguente.

<div class="card">
<img class="image-box" src="https://ma-no.org/miaimmagine.webp" 
/>
<div class="description-box">
<h2>Pink flower</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et arcu quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>

Per convertire la nostra " card " dall'HTML sopra citato in un layout a righe, tutto quello che dobbiamo fare è aggiungere display: flex al nostro contenitore di layout che, in questo caso, è il selettore CSS della card.

.card {
display: flex;
background: lightgray;
padding: 16px;
border-radius: 10px;
}

Abbiamo anche aggiunto un pizzico di stile per renderlo più completo. Per impostazione predefinita, la direzione del contenitore flex è impostata sula row , quindi non è necessario fare molto altro in questo caso. Tutti i nostri elementi annidati saranno ora disposti in fila.
Ma la caratteristica più interessante di Flexbox è il modo in cui possiamo controllare le dimensioni degli elementi nella nostra fila. Un'opzione possibile, quando abbiamo solo bisogno di una dimensione fissa è semplicemente quella di impostare la larghezza in modo esplicito. Nel nostro caso, vogliamo che il box immagine sia di larghezza fissa.

.image-box {
width: 150px;
height: 150px;
margin-right: 16px;
}

Larghezze flessibili in CSS Flexbox

Tuttavia, spesso vogliamo rendere le larghezze flessibili in modo che siano in grado di crescere e restringersi secondo le necessità. A tale scopo, CSS Flexbox fornisce tre proprietà che possiamo impostare: flex-grow, flex-shrink e flex-basis.

Tuttavia, spesso abbiamo bisogno di rendere flessibili le larghezze in modo che siano in grado di espandersi e restringersi secondo le necessità. A tale scopo, CSS Flexbox fornisce tre proprietà che possiamo impostare: flex-grow , flex-shrink e flex-basis .

Una spiegazione completa di queste tre proprietà non rientra nell'ambito di questo post, ma una rapida panoramica è di dovere per poter fornire un quadro d'insieme.

Quindi flex-basis è inteso come la larghezza di partenza del vostro elemento. Questa può essere in pixel, percentuali, o qualsiasi unità valida per i CSS.

Flex-grow e flex-shrink sono quindi intesi per specificare se l'elemento può espandersi o contrarsi da quella larghezza quando c'è spazio per farlo.

Queste tre proprietà possono essere condensate in una più conveniente proprietà flex che si presenta sotto forma di flex-grow flex-shrink flex-basis.

Nel nostro caso, abbiamo solo bisogno del box di descrizione per espandere l'area in questione, quindi ci limiteremo a specificare il flex: 1 , il che significa semplicemente che vogliamo che il div cresca o si restringa man mano che trova (o no) dello spazio. Semplice, giusto?

.description-box {
flex: 1;
}

"flex: 1" è un altro modo di dire "flex: 1 1 1 0" cioè flex-grow è 1, flex-shrink è 1 e flex-basis è 0. Per maggiori informazioni i documenti MDN sono molto utili!

Tecnica CSS 3: Come dare una posizione assoluta ad un elemento

A volte, ci sono piccoli frammenti di informazioni o elementi che devono essere posizionati in modo molto preciso da qualche parte e che non si adattano al design basato sul layout come abbiamo discusso sopra. Oppure non vogliamo che tali elementi siano legati al layout del resto del contenuto e preferiamo tenerli separati.

In questi casi, il posizionamento assoluto è una delle tecniche di layout CSS da non perdere. Per impostazione predefinita, la posizione di tutti gli elementi è impostata su : static . Poi c'è anche la relative . Entrambi funzionano molto bene con elementi che fanno parte del flusso del contenuto del nostro layout.

Per dare ai nostri elementi una posizione arbitraria, dobbiamo impostare la proprietà di visualizzazione dell'elemento su absolute . Possiamo anche impostarla su fixed , ma ciò significherebbe che il nostro elemento sarà posizionato rispetto alla vista del browser (in modo simile a alle barre degli strumenti sticky/adesive).

Un esempio di posizionamento assoluto CSS

Guardiamo un esempio seguendo quello mostrato in precedenza e aggiungiamo alcuni elementi posizionati in modo assoluto.

La prima domanda da porsi quando si posiziona un oggetto in modo assoluto è quale contenitore si intende utilizzare come punto di riferimento per la posizione.

In altre parole, quale contenitore volete come padre?

Dobbiamo impostare la posizione del padre in relativo o assoluto. Altrimenti il posizionamento assoluto non funzionerà come previsto e l'elemento sarà posizionato rispetto al contenuto del corpo/body.

Se non impostate correttamente la proprietà della posizione del genitore, non sarete in grado di posizionare gli elementi in modo preciso (la posizione sarà molto diversa da quella che vi aspettavate).

Nel nostro caso, la card è il genitore, quindi imposteremo la sua posizione in questo modo:

.card {
display: flex;
background: lightgray;
padding: 16px;
border-radius: 10px;
position: relative;
}

Dobbiamo anche aggiungere al markup HTML i nostri elementi posizionati in modo assoluto. Questo può trovarsi ovunque all'interno del contenitore della carta.

<div class="card">
...
<i class="fa fa-2x fa-chevron-circle-down more-icon" aria-hidden="true"></i>
<span class="date">12th July, 2020</span>
</div>

Successivamente, dobbiamo impostare la posizione del nostro elemento in assoluto e specificare anche la posizione stessa. Per questo, abbiamo quattro proprietà in alto, in basso, a sinistra e a destra. In pratica, abbiamo bisogno solo di due, una per ogni orientamento, come in alto a sinistra, in basso a destra, ecc.

.more-icon {
position: absolute;
right: 10px;
top: 10px;
}
.date {
position: absolute;
bottom: 10px;
right: 10px;
color: gray;
font-size: 0.9rem;
}

Un bel dettaglio per la nostra card, vero? Questo può essere usato per dare all'utente un menu flottante e non deve necessariamente far parte del nostro layout nella row principale.

Tecnica CSS 4: Come sovrapporre gli elementi?

Ci sono molte situazioni in cui è necessario sovrapporre elementi nel nostro layout. Pensate ai dialoghi popup, alle barre di progresso, agli spinner e ad elementi simili. Non possiamo metterli nei nostri contenitori flexbox, perché devono essere in cima a tutto ciò che si visualizza. Quindi, quella che vi presentiamo, è una delle tecniche di layout CSS più utili per posizionare questo tipo di elementi.

Utilizziamo semplicemente il posizionamento assoluto o fisso in combinazione con la proprietà z-index .
Aggiungiamo un semplice popup div che si sovrappone alla nostra lista :

In primo luogo, occupiamoci del markup HTML. Il div deve essere al di fuori di qualsiasi altro contenitore se vogliamo che appaia su tutti i contenuti dello schermo.

<div class="popup">
Questo è un popup che 
si sovrappone alla card.
</div>

Poi lo posizioniamo in absolute , impostiamo la proprietá z-index , e aggiungiamo un po' di stile. Se lo si desidera, è possibile impostare le proprietà left, right, top o bottom.

.popup {
position: absolute;
padding: 16px;
display: grid;
place-items: center;
width: 200px;
height: 200px;
border: 2px solid gray;
border-radius: 10px;
box-shadow: 3px 4px 23px 0px rgba(0,0,0,0.75);
background: white;
z-index: 1000;
}

Questo popup apparirà ora in cima a tutti gli elementi con z-index inferiore a 1000. Per cose come i popup, di solito li manteniamo ad un valore abbastanza alto, in modo che nessun altro elemento si posizioni in cima.

Tecnica CSS 5: Come adattare un'immagine ad una dimensione specifica

Working with images in CSS can be a bit frustrating. For instance, if you’re designing a UI element that needs to have a consistent layout (e.g. a square image area) but the images that you get are of various dimensions, it is not going to look very good. Often, we don’t really know which dimensions our images are in, so we need some CSS layout techniques to handle this for us.

Uno dei modi per gestire la situazione, è quello di non usare un elemento img, ma di usare invece un div con una proprietà CSS di background-image.

Tuttavia, non è semanticamente corretto, poiché un'immagine dovrebbe essere rappresentata da un elemento img. Fortunatamente, abbiamo una simpatica proprietà anche per gli elementi img:

.image-box {
width: 150px;
height: 150px;
margin-right: 16px;
object-fit: cover; 
}

La proprietá object-fit è utilissima in questo caso

Conclusione

I CSS possono essere impegnativi a volte, ma con alcuni semplici trucchi si possono realizzare ottimi layout in poco tempo. Non abbiate paura di rimettervi a studiare le basi, se necessario. Anche gli sviluppatori esperti lo fanno spesso!
Spero che questo articolo vi abbia aiutato ad approfondire un po' le vostre conoscenze su come realizzare layout complessi con solo HTML e CSS. Non è affatto un elenco esaustivo, è solo una raccolta di quelli che considero i problemi di layout più comuni in cui vi imbatterete.

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 9 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products.