Abbiamo usato i float per il layout praticamente da quando abbiamo lasciato i tavoli alle spalle. È una soluzione bizzarra che può spesso causare problemi, ma se sai cosa stai facendo, funziona.
Un'alternativa interessante ai fluttuanti che la gente sta diventando sempre più ultimamente è quella di impostare il display valore di un elemento a inline-block. Cosa fa esattamente questo? Com'è un galleggiante? Com'è diverso? Entriamo e vediamo cosa possiamo scoprire.
La proprietà di visualizzazione
I browser Web rendono diversi elementi in modi diversi. Alcuni elementi sono a livello di blocco, ovvero il loro valore predefinito display il valore è impostato su bloccare. Gli elementi a livello di blocco hanno una larghezza e altezza definibili e creano automaticamente una nuova riga nel layout man mano che vengono creati.
Un esempio di un elemento a livello di blocco è un paragrafo. Se lancio due paragrafi in un documento HTML, si impilano l'uno sull'altro anziché apparire uno accanto all'altro. Ho molta libertà sulle loro dimensioni e posso davvero considerarle come elementi di base individuali da modellare come mi pare.
Altri elementi hanno il loro display valore impostato su in linea per impostazione predefinita. Ciò significa che non hanno un'altezza e una larghezza definibili e non creeranno nuove righe in un layout (quindi appaiono? Inline?). Gli elementi incorporati sono generalmente il tipo di cosa che si istituisce all'interno di un paragrafo o di un altro elemento a livello di blocco: strong, em, anchor, ecc.
Ecco cosa succede se lancio una serie di tag di ancoraggio in un documento HTML. A differenza dei paragrafi precedenti, che si impilano automaticamente, questi elementi vengono creati fianco a fianco. La loro larghezza e altezza sono determinate dal contenuto che contengono e non possono essere sovrascritte manualmente come con gli elementi a livello di blocco.
Ce ne sono altri di base display valori predefiniti con cui probabilmente hai familiarità. Ad esempio, articoli nel capo la parte ha una proprietà display di nessuna.
Impostazione del proprio valore di visualizzazione
Una caratteristica davvero interessante dei CSS è la possibilità di modificare il comportamento di visualizzazione predefinito degli elementi. Anche se un comportamento standard è già impostato per un dato elemento, possiamo sovrascriverlo per i nostri scopi.
Ad esempio, possiamo facilmente prendere quei tag di ancoraggio in linea dal secondo esempio sopra e renderli più simili ai paragrafi a livello di blocco del primo esempio. Lo facciamo impostando la proprietà display bloccare nel nostro CSS.
Ora i nostri tag di ancoraggio si comportano come elementi a livello di blocco, quindi ognuno crea una nuova riga e può applicare un valore altezza / larghezza personalizzato.
Come puoi immaginare, è più difficile lavorare con il contrario di questo esempio prendendo un elemento a livello di blocco e impostando il display valore a in linea. Istintivamente, potresti usare display: in linea per cercare di rendere i due paragrafi sopra visualizzati uno accanto all'altro, ma quando lo fai, il risultato è invece che i due fluiscono insieme in un singolo paragrafo.
Ora abbiamo perso ogni possibilità di impostare la larghezza e l'altezza in modo che i due paragrafi siano inesorabilmente integrati, il che non è affatto quello che stavamo cercando.
Elementi fluttuanti
Quindi, cosa succede se vogliamo che i due paragrafi precedenti rimangano distinti, ma appaiono affiancati come singole colonne anziché impilate in righe? La tipica risposta a cui molti di noi si sono rivolti per anni è il galleggiamento. Applicando? Float: a sinistra? ai paragrafi, possiamo mantenere funzionalità a livello di blocco durante la creazione di più colonne di contenuti.
I galleggianti hanno un comportamento interessante. Ad esempio, gli oggetti fluttuati tendono a comprimere il loro contenitore genitore, causando tutti i tipi di problemi disordinati se stai applicando i colori oi bordi dello sfondo. Per aggirare questo, abbiamo alcuni trucchi. Possiamo cancellare i float su un nuovo elemento (in questi giorni è spesso uno pseudo-elemento) alla fine del contenitore o usare overflow: auto sul genitore. Entrambe le correzioni hanno i loro avvertimenti, ma se sai come sfruttare ciascuna di esse correttamente puoi tipicamente estrarre qualsiasi impresa di layout senza troppi problemi.
display: blocco in linea
Ci sono un sacco di valori per la proprietà display oltre a ciò che abbiamo già menzionato, alcuni dei quali sono utili, altri che dubito che tu abbia mai usato. L'argomento della discussione di oggi è di gran lunga uno dei più interessanti e utili del gruppo: inline-block.
Guarda cosa succede quando prendiamo i nostri due paragrafi dell'esempio originale sopra e applichiamo a display valore di inline-block.
Sembra molto simile a un galleggiante? Quindi cosa succede se aggiungiamo un contenitore genitore? Ha il problema collasso che abbiamo visto con i float? No! Tutto funziona esattamente come ci aspettiamo.
Quello che sta accadendo qui è che stiamo dicendo al browser di visualizzare i paragrafi in linea, ma permettiamo loro di mantenere le loro caratteristiche a livello di blocco. Ciò significa che siamo in grado di impostare manualmente larghezza e altezza e che i due elementi rimangano distinti, ma che siano anche visualizzati uno accanto all'altro nel flusso del documento. Piuttosto lucido!
Il problema di allineamento
Sulla superficie, inline-block può sembrare il salvatore di layout che stavate aspettando. Chi vuole pasticciare con gli hack disordinati quando è possibile saltare completamente con questo metodo? Si scopre però che i float non sono l'unico metodo di layout con stranezze, inline-block ha anche qualche strana funzionalità che devi avvolgere la tua mente.
Una delle prime cose che fluttuerai e blocco in linea apparirà molto diverso quando avrai diversi elementi con altezze variabili. Ad esempio, ecco cosa succede quando si sposta un gruppo di paragrafi a sinistra:
Ora ecco cosa succede quando usi il blocco in linea per estrarre la stessa cosa. Si noti che i bordi inferiori dei paragrafi sono allineati anziché in alto come nell'immagine precedente.
Fortunatamente, questo non è un problema enorme. Per risolvere il problema, assicurati di aver impostato il file vertical-align proprietà a superiore.
Il problema dello spazio bianco
C'è un altro aspetto importante del fatto che il comportamento del blocco in linea differisce dai float. Trovo bizzarro che qualsiasi cosa in HTML e CSS possa essere a conoscenza dello spazio bianco quando si tratta di layout, ma questo è esattamente ciò che troviamo qui. Considera i seguenti esempi.
Qui possiamo vedere che quando un gruppo di oggetti della lista è flottato, si scontrano l'uno contro l'altro come ci aspetteremmo, permettendoci di impostare manualmente il gap senza spazi extra inaspettati. Tuttavia, quando facciamo lo stesso con il blocco inline, c'è un po 'di spazio predefinito che non andrà nemmeno via se impostiamo i nostri margini su 0.
Come puoi vedere, una soluzione è quella di eliminare gli spazi bianchi nel nostro codice HTML e spingere gli elementi uno contro l'altro. Ancora una volta, trovo questo piuttosto confuso ma funziona. Una soluzione alternativa che produce lo stesso risultato senza rovinare la gerarchia visiva nel tuo codice HTML è applicare un margine di -4px sugli elementi della lista.
Supporto del browser
Ora che sappiamo cos'è inline-block e come funziona diversamente da float, è il momento di discutere l'argomento preferito di tutti: il supporto del browser. Quali atrocità dovremo intraprendere per assicurarci che questa tecnica funzioni effettivamente su tutta la linea?
Quando ci fermiamo su CanIUse.com per vedere la risposta, i risultati sono probabilmente molto migliori di quanto ci si sarebbe aspettati.
Qui possiamo vedere che abbiamo almeno un supporto parziale su tutta la linea e pieno supporto per tutto tranne IE7 e precedenti (finto shock e soggezione). La nota in fondo ci informa che il blocco in linea è supportato solo in IE6 e IE7 su elementi con una visualizzazione 'in linea' di default. Ciò significa che gli esempi di paragrafo che abbiamo utilizzato in tutto questo articolo sono fuori.
Fortunatamente, il blog di Mozilla ha pubblicato alcune correzioni per questo modo nel 2009. Per far sì che IE funzioni bene, dobbiamo solo attivare hasLayout con la proprietà zoom e quindi usare lo star hack per scegliere IE6 / 7 e impostare la visualizzazione in linea . Ciò consente di trattare in modo funzionale gli elementi in linea come se fossero elementi di blocco in linea. Non è certamente carino, ma ha il compito di fare.
Ulteriori letture
Se vuoi saperne di più sul blocco in linea, ecco alcuni articoli che ho trovato particolarmente utili nella mia ricerca.
- Float vs. Inline-Block
- Che cos'è Inline-Block?
- blocco in linea: un sacco di esempi
- Inline-Block cross-browser
Una soluzione migliore?
Ad essere onesti, non ho mai giocato molto con il blocco in linea troppo prima di oggi, ma ho visto sempre più suggerimenti nei commenti che ho esplorato questo metodo come alternativa ai float quindi ho pensato di prendere il Consiglio. Speravo che fosse davvero un po 'magico, un modo per aggirare i galleggianti, ma in realtà non lo è. Ci sono ancora diversi comportamenti imprevisti che devi conoscere e rispondere, risultando in qualche codice hacky molto simile a quello che vediamo spesso con correzioni di clear float.
Per essere onesti però, è in effetti un modo abbastanza semplice per realizzare layout simili a quelli di un float. Ancora più importante, il CSS che devi implementare per assicurarti che sia compatibile con i browser incrociati è più breve di persino il popolare hack microblocco di Nicolas Gallagher. Questo potrebbe renderlo un modo migliore di andare per molti progetti.
In definitiva, penso che in effetti inizierò ad aggiungere questo metodo al mio bagaglio di trucchi. Ho il sospetto che sorgano determinati momenti in cui i float non sono ideali (ad esempio: right float rende tutto al contrario) e questa sarà un'ottima alternativa per avere in quelle situazioni.
Cosa pensi? Il blocco in linea è una buona alternativa ai galleggianti? In quali situazioni riesci a pensare dove c'è chiaramente un vantaggio rispetto all'altro?