Se sono ormai anni che realizzate siti web, sarete sicuramente molto legati alla proprietà float dei CSS. Da quando sono state fortunatamente abolite le tabelle per realizzare siti web, la proprietà float è stata la scelta più corretta.
Ma lo è ancora?

Nonostante abbiano salvato le vite di molti designer, i float ne hanno distrutte altrettante a causa degli elementi allineati a sinistra non dichiarati. Un problema arginabile all’interno di progetti dalle dimensioni ridotte, ma causa di grosse difficoltà nei progetti più grossi, dove per esempio i contenuti si generano in maniera dinamica.

Un’ottima alternativa

Anche se usati correttamente i float cambiano il normale flusso del documento, aumentando cosi il rischio di problemi inaspettati. Con il responsive design, dove le dimensioni sono dinamiche, il float non da il massimo delle prestazioni. E se ci fosse qualcosa di meglio?

Flexbox è il futuro dei web layouts, ma per quelli di noi che supportano il cross-browser, si tratta ancora di un sogno distante. In compenso, la proprietà display, possiede il completo supporto e può provvedere a praticamente tutte le funzionalità dei float senza gli svantaggi.

Inline-Block all’arrembaggio

La proprietà display, combinata con float e position, determinano il tipo di contenitore o contenitori che sono generati per un elemento. Per spiegare meglio gli elementi block si espandono per tutta la larghezza del loro contenitore, forzando gli altri elementi a spostarsi sotto su una nuova linea, a differenza degli elementi inline che invece si espandono solo per la larghezza del loro contenuto, permettendo cosi ad altri elementi inline di affiancarsi.

Applicando display: inline-block a un elemento si genera un contenitore block inline-level. Pensate al testo dentro a un tag. Sono tutti “inline” l’uno con l’altro mentre il tag stesso è un contenitore block-level. Capendo tutto ciò possiamo usare la proprietà display per allineare gli elementi uno all’altro. Tutti gli elementi restano all’interno del normale flusso del documento, senza avere problematiche successive. Una soluzione più pulita per ottenere gli stessi risultati.

La tecnica

Questo metodo funziona ovunque si potrebbero usare i float. Diamo un occhiata alla classica struttura di contenuto/sidebar. Per l’HTML abbiamo un contenitore padre con 2 elementi figli:

Ed il CSS:

La direzione del “float” è determinata dall’allineamento del testo del div wrapper. Dato che l’allineamento di default è sinistra non dobbiamo fare nulla. In ogni caso potete tranquillamente allineare al centro o destra a seconda delle vostre esigenze.

Avete notato il commento “no spazi” nell’HTML? Questo è importantissimo, e ora vi spiegherò perchè.

Quel maledetto spazietto

Se avete provato a usare degli elementi display:inline-block invece dei float senza approfondirne l’utilizzo, vi sarà sicuramente capitato che nonostante il vostro CSS sia corretto, l’ultimo elemento finisca sotto in un nuova riga. Perchè?

La risposta è semplice. A differenza dei float, in questo caso gli spazi bianchi influenzano la disposizione degli elementi, venendo considerati nell’allineamento. Per fortuna disponiamo di diverse soluzioni:

  • font-size: 0. Lo spazio con cui ci stiamo scontrando è comunque un carattere, impostarne la grandezza del font a 0 lo eliminerà. L’unico problema è che poi dovete impostare la dimensione del font degli elementi figli, inoltre ogni font-size impostato con “em” verrà ignorato. Non è la soluzione migliore.
  • Rimuovere fisicamente gli spazi dall’HTML elimina gli spazi ma rende difficile la lettura del codice. Dovrete eliminare anche gli invii a capo, mettendo tutto in linea.
  • Aggiungere un commento tra gli elementi come fatto nell’esempio. Questa è la mia soluzione preferita. Potrete mantenere l’indentazione del codice, e inoltre nella maggior parte degli editor codice e commenti sono identificati in colori diversi.

So usarlo bene il float, perchè devo cambiare?

Potresti pensare “Ok, tutto bello, ma perchè devo cambiare qualcosa che funziona bene?”.
Anche se siete dei maestri del float, ci sono alcune cose che non possono fare:

  • I cosidetti “float centrati“, fattibili, certo, con codice HTML e CSS aggiuntivo. Con il metodo display basta usare text-align: center!
  • Il grandissimo vantaggio dell’allimeamento verticale. Non sarete più obbligati a usare margini negativi o la proprietà translate. Con vertical-align sarete in grado di centrare i vostri contenuti o disporli come meglio credete.

Per concludere

Ci sono indubbiamente vantaggi nell’utilizzo del metodo display, ma ciò non significa eliminare del tutto i float. Io stesso continuo ad usarli in alcune situazioni perchè risultano essere la soluzione migliore. Bisogna solo saper trovare il giusto compromesso.

16 consigli per aumentare il traffico e le visite al tuo Sito Web

LASCIA UN COMMENTO