Il segreto per progettare layout di siti Web senza CSS Float

Se hai progettato per il Web nell'ultimo decennio, conosci indubbiamente la proprietà float CSS. Dal momento che l'industria (per fortuna) ha adottato il principio dei layout senza tablatura, i float sono stati l'arma preferita dalla maggior parte di noi per disporre le nostre pagine Web, ma è la scelta migliore?

Nonostante la popolarità di questo metodo è regolarmente causa di frustrazione e confusione per i nuovi designer e diventa un problema quando gli elementi flottanti rimangono "non chiariti". Questi galleggianti non liquidati possono causare più problemi che vanno dall'estetica scadente alla completa inaccessibilità. Con un piccolo progetto è piuttosto semplice creare problemi con il float, ma quando si lavora su una grande app web con contenuti dinamici può essere un po 'più complicato, consumare tempo prezioso e costare denaro.

Un'alternativa migliore

Anche se usati correttamente, i float cambiano il flusso normale di un documento che può causare comportamenti imprevisti e limitare le opzioni di stile. Dato che un float non si trova nel "flusso normale", le caselle di blocco non posizionate create prima e dopo la scatola fluttuante si spostano verticalmente come se il float non esistesse. Con un design reattivo, dove le dimensioni sono dinamiche e fluiscono per riempire lo spazio disponibile, questo è tutt'altro che ideale. E se ci fosse un modo migliore?

Flexbox è l'eccitante futuro dei layout web ma, per quelli di noi che devono supportare i browser legacy, questo è ancora un sogno lontano. La proprietà display , d'altra parte, ha pieno supporto e può fornire quasi tutte le funzionalità di layout di un float senza gli svantaggi.

blocco in linea per il salvataggio

La proprietà display , in combinazione con float e position , determina il tipo di box o box che sono generati per un elemento. In poche parole, gli elementi a livello di blocco coprono l'intera larghezza del contenitore forzando tutti gli elementi successivi alla riga successiva mentre gli elementi a livello di linea si estendono solo sulla larghezza del loro contenuto, consentendo a qualsiasi elemento di livello inline di scorrere accanto ad esso sullo stesso linea.

Applicazione della visualizzazione: il blocco in linea di un elemento genera un contenitore di blocchi a livello di linea. Pensa al testo all'interno di un tag. Sono tutti "in linea" l'uno con l'altro mentre il tag stesso è un contenitore a livello di blocco. Comprendendo questo comportamento possiamo usare la proprietà display per allineare i nostri contenuti l'uno accanto all'altro. Poiché tutti i nostri elementi rimangono nel flusso normale, non abbiamo problemi con un elemento genitore compresso. A mio avviso questa è una soluzione molto più pulita che raggiunge comunque il risultato desiderato.

Vedi la penna Blocco in linea su galleggianti di davidicus su CodePen.

La tecnica

Questo metodo funziona praticamente ovunque tu applichi normalmente il float. Diamo un'occhiata al classico layout main / sidebar. Per l'HTML abbiamo un elemento wrapper con due elementi figlio all'interno in questo modo:

Il nostro CSS:

        .wrapper,.mainContent,.sideBar {//change the box model for simplicity-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.wrapper {font-size: 1em;padding: 1.5em;width: 100%;}.mainContent,.sideBar {display: inline-block;vertical-align: top;width: 100%;}@media (min-width: 700px) {.mainContent {margin-right: 5%;width: 60%;}.sideBar { width: 35%; }}

Proprio così abbiamo il contenuto principale e la barra laterale esposta.

La direzione del "float" è determinata dall'allineamento del testo del div wrapper. Dato che l'allineamento di default è rimasto, non dovevamo fare nulla. Tuttavia, potresti facilmente impostarlo al centro o a destra per ottenere alcuni layout che non sono nemmeno possibili con i float (ne parleremo più avanti). Notare il commento "senza spazi" inserito tra le due div child del contenitore .wrapper . Questo è importante da notare, e la ragione per farlo è l'unico "con" su questo metodo.

Spazio bianco

Torniamo all'esempio del tag. Quando scrivi testo in html, tutto lo spazio bianco viene avvolto in un singolo carattere di spazio bianco, indipendentemente dalla quantità di spazi che hai nel documento HTML. Quindi, eventuali spazi vuoti tra i tuoi elementi "fluttuanti" nel markup verranno effettivamente registrati come uno spazio tra loro nel browser, proprio come il nostro testo paragrafo. Ciò farà sì che i calcoli delle dimensioni non riescano a spostare l'ultimo elemento verso il livello successivo della pagina. No bueno! Fortunatamente per noi ci sono diverse soluzioni per risolvere questo piccolo problema. Ad esempio:

• Imposta la dimensione del carattere: 0; . Lo spazio con cui abbiamo a che fare è uno spazio per i caratteri, quindi impostare la dimensione del font su zero rende anche la dimensione dello spazio zero. Il problema con questo è che è necessario eseguire il dump delle dimensioni dei caratteri degli elementi figlio e il dimensionamento di tutti gli em si spegne completamente dalla finestra. Questo potrebbe diventare un po 'macchinoso per essere sempre aggiornato, quindi in questo modo non è l'ideale.

• Rimuovi lo spazio tra i tuoi elementi nel tuo HTML, rimuovendo così lo spazio dall'equazione. L'ho fatto per un po ', ma sembrava solo sciatto e reso più difficile da leggere.

• L'aggiunta di un commento HTML tra i tuoi elementi rimuoverà anche il carattere dello spazio come nel nostro esempio. Questa è la mia soluzione preferita . L'evidenziazione del testo nella maggior parte degli editor di testo è tale che il contrasto tra la nota e gli elementi è sufficiente per migliorare significativamente la leggibilità del markup. Ciò consentirà inoltre di mantenere il corretto rientro dell'elemento stesso.

I galleggianti funzionano per me, perché cambiare?

Potresti pensare: "Questo è buono e tutto, ma perché dovrei cambiare un metodo che funziona bene per me?" Beh, anche se sei un maestro di fluttuazione, ci sono alcune cose che semplicemente non possono fare. Per esempio:

• L'elusivo "movimento centrato", che è spesso desiderabile, richiede un ulteriore markup e molteplici proprietà CSS da raggiungere. Con il metodo di visualizzazione questo viene fatto semplicemente applicando text-align: center al wrapper.

• Il più grande vantaggio di scegliere il metodo di visualizzazione è la possibilità di allineare verticalmente il contenuto. Quante volte hai voluto centrare un elemento a suo fratello? Potresti usare il posizionamento con il margine negativo / tradurre il trucco ma, di nuovo, con un ambiente dinamico e reattivo, questo non è preferibile. Invece applicando allineamento verticale: medio; centrerà perfettamente i tuoi elementi ogni volta senza alcun lavoro aggiuntivo da parte tua. (Vedi la penna Blocco in linea su galleggianti di davidicus su CodePen.)

Per concludere

In realtà non esiste una "taglia unica" per quanto riguarda il web design e si riduce in realtà alle preferenze personali. Uso ancora i float in determinate situazioni ea volte è davvero lo strumento migliore per il lavoro. Tuttavia, ritengo che vi sia un netto vantaggio nell'utilizzare il metodo di visualizzazione. Dalla mia esperienza, ho trovato che è il metodo migliore, il meno incline agli errori per trattare i layout. Per quelli di voi che vorrebbero esplorare di più questo metodo, ho creato una griglia "Just Say No To Floats": Griglia a blocchi in linea con SASS su CodePen.

Immagine in primo piano / miniatura, muro crollato via Chris Cotterman