I float sono uno degli strumenti più basilari per strutturare una pagina web usando i CSS. Sono entrambi una delle primissime cose che apprendiamo e una delle ultime cose che padroneggiamo veramente.
L'articolo di oggi esamina alcuni dei motivi per cui i float sono piuttosto zoppi e dà un'occhiata a una serie di sistemi di layout alternativi, alcuni dei quali sono ancora in fase di sviluppo, ma potrebbero un giorno rappresentare lo standard per il layout basato su CSS.
Una favola di tavoli
C'era una volta, i web designer utilizzavano tabelle HTML per realizzare layout di pagina complessi. Sebbene si trattasse di un processo disordinato, non semantico, ha cercato di sfruttare al meglio la tecnologia disponibile per creare progetti migliori.
Per i neofiti, quando dico "non-semantico"? Voglio dire che il layout basato su tabelle è una bastardizzazione dell'elemento table. È pensato per contenere tabelle di informazioni reali all'interno di una pagina, non per fungere da struttura per la pagina stessa.
Galleggianti: i nuovi tavoli?
Oggi prendiamo in giro questa pratica. Che modo stupido di stendere un sito web! I CSS sono venuti in nostro soccorso e ci hanno fornito numerosi strumenti per creare molti più layout semantici che possono facilmente ottenere tutto ciò che è stato creato con un tavolo.
Oggi uno dei principali modi in cui abbiamo sostituito i nostri modi dipendenti dalla tabella è l'uso dei float per il layout. Per impostazione predefinita, gli elementi HTML sequenziali appariranno in pila verticalmente. I float servono da sistema per allineare gli elementi orizzontalmente. Fai scorrere un elenco di elementi li sulla sinistra e hai un buon menu di navigazione orizzontale.
Sebbene molti di noi si siano semplicemente abituati a usarli, i galleggianti sono tutt'altro che ideali. Sono scomodi, buggy e difficili da imparare. Se ripensi a quando hai iniziato a utilizzare il layout basato su CSS, la cosa che ti ha graffiato la testa e la risoluzione dei problemi per ore è stata probabilmente un errore irreparabile.
Il Clearfix Band-Aid
La rovina dei layout basati sul float (a parte gli incubi del margine IE6) è ovviamente il fatto che semplicemente non giocano bene con i loro elementi del contenitore. Per far apparire l'elemento genitore come se contenga elementi fluttuanti, in genere inseriamo un elemento cancellato per ultimo nel contenitore usando? Clear: both ?.
La creazione di un contenitore vuoto per incidere un layout rotto è una buona pratica? Probabilmente no. Funziona? Scommetti.
A Better Clearfix
I pensatori avanzati hanno deciso che questa attività di aggiunta di marcatori HTML aggiuntivi non è buona. L'attuale modo preferito per cancellare un float è invece inserire il nuovo elemento usando il CSS?: Dopo? pseudo classe.
Ancora una volta, questo è accettabile a causa di quanto siamo abituati a fare scherzi con i galleggianti per piegarli alla nostra volontà. Tuttavia, prova a fare un passo indietro e davvero a guardare cosa sta succedendo qui. Questo è un casino! Stiamo usando i CSS per inserire un elemento invisibile nell'HTML in modo che i nostri problemi di layout scompaiano magicamente mentre rabbrividiamo al pensiero di utilizzare i layout basati su tabelle perché non sono semantici.
Non sto difendendo il layout basato su tabelle, è morto e deve rimanere in questo modo, ma non posso fare a meno di chiedermi se i futuri web designer rideranno del nostro uso dei float come ora ridiamo al pensiero di un web pagina costruita su un tavolo.
Il futuro
Devi ammettere, se ci pensi veramente, i float sono un modo piuttosto complicato e complicato per gestire il layout della pagina. Non vedo i float andare via in qualsiasi momento presto, probabilmente saranno comunque utili anche se tutti accettassimo un nuovo processo di layout.
Tuttavia, all'orizzonte ci sono diversi strumenti di layout interessanti che potrebbero benissimo sostituire i float come modo principale per strutturare le pagine web. Diamo un'occhiata ad alcune di queste idee e costrutti e vediamo se possiamo dare uno sguardo a come sarà il futuro del layout CSS.
Inline-block
Prima di immergerci in futuristiche tecniche di layout sperimentale, vale la pena discutere inline-block come alternativa interessante ai layout basati su float. Considera il frammento di seguito:
Questo in effetti farà sì che i nostri elementi della lista appaiano in linea pur mantenendo i loro attributi di blocco, il che è davvero incredibile! Otteniamo il meglio da entrambi i mondi.
Cadute di Inline-Block
Andrew Tetlaw di Sitepoint ha recentemente pubblicato un articolo fantastico che elogia molto usando inline-block sopra galleggianti. Giustamente sottolinea che questo metodo funziona in modo efficace su tutti i browser moderni, incluso IE8 e versioni successive, che è praticamente lo stesso che ci si può aspettare dal clearfix pseudo-classe dall'alto.
Sfortunatamente, come sottolinea Robert Nyman in un articolo simile, questo metodo non è privo di problemi.
Oltre ai problemi di IE (ha un trucco intelligente per ottenere supporto in IE7), Nyman mostra di usare inline-block fa sì che il tuo layout sia in qualche modo dipendente da spazi vuoti quando si tratta del tuo codice HTML. L'esempio che usa è il seguente elenco non ordinato:
Che ci crediate o no, la linea restituisce automaticamente un leggero margine da aggiungere agli elementi della lista! L'unico modo per risolverlo è metterli sulla stessa linea:
Certo, è una soluzione abbastanza semplice, ma se sei un fan del codice ben organizzato, questo potrebbe farti rabbrividire. Nel complesso, rispetto ai problemi che affrontiamo nell'usare i float, Tetlaw ha affermato che questa potrebbe essere una soluzione migliore che è possibile utilizzare attualmente con una quantità accettabile di supporto per i browser.
Flexbox
Uno dei nuovi modi in cui CSS3 sta cambiando le pratiche di layout è attraverso il Flexible Box Module, o Flexbox in breve. Ecco una citazione dall'estratto di Flexbox w3.
[Flexbox] fornisce un sistema di layout aggiuntivo accanto a quelli già in CSS. [CSS21] In questo nuovo modello di riquadro, i figli di una scatola sono disposti orizzontalmente o verticalmente, e lo spazio inutilizzato può essere assegnato a un particolare bambino o distribuito tra i bambini per incarico di? Flex? ai bambini che dovrebbero espandersi. L'annidamento di queste caselle (orizzontale all'interno verticale o verticale all'interno orizzontale) può essere utilizzato per creare layout in due dimensioni.
Flexbox rappresenta un modo completamente nuovo di impaginare i siti web. Probabilmente ne hai sentito parlare di recente, ma la sintassi sta cambiando leggermente, quindi assicurati di tenere d'occhio le specifiche di lavoro per rimanere aggiornato (credo che la casella cambierà in "flex" o "flexbox" nella maggior parte dei casi) . La sintassi CSS attualmente funzionante per l'applicazione di flexbox è la seguente:
Per vedere come funziona, facciamo un esempio. Fondamentalmente, una volta che si applica casella di visualizzazione all'elemento padre, i bambini possono essere ridistribuiti automaticamente in base al dimensionamento relativo semplice.
Immagina di avere tre tag di paragrafo (che serviranno da colonne) all'interno di un contenitore genitore con casella di visualizzazione applicato e vogliamo che la colonna centrale sia il doppio della larghezza degli altri due. Ecco cosa facciamo:
Con quel poco di codice (oltre a uno stile visivo superfluo), possiamo ottenere il seguente risultato.
Si noti che il valore predefinito è? 0? per box-flex. Cambiare la seconda casella in? 2? ha attivato il comando per riempire la larghezza mentre si ingrandiva la seconda casella rispetto alle altre due. Prendiamo in considerazione alcuni altri esempi in modo da poter davvero avere un'idea di come funziona.
Come puoi vedere, Flexbox ha implicazioni drammatiche sul modo in cui strutturiamo i siti web con i CSS. Non solo ha il potenziale per risolvere i problemi associati ai float, ma rende i layout basati su griglia multi-colonna infinitamente più facili!
Scava più a fondo
Questo articolo è semplicemente inteso come introduzione a nuovi metodi di layout e non è in alcun modo esaustivo. Ho appena graffiato la superficie di ciò che può fare Flexbox. Ad esempio, puoi realizzare la stessa cosa che abbiamo fatto sopra con elementi sovrapposti verticalmente e riorganizzare completamente le scatole usando solo CSS.
Per ulteriori informazioni su cosa può essere fatto con Flexbox, I altamente consiglia di giocare con Flexie, The Flexbox Playground. Ciò ti darà un'esperienza pratica con il nuovo sistema di layout e ti consentirà di provare ogni impostazione per ottenere un'idea del risultato.
Il modulo di layout del modello
Un'altra idea proposta per il layout CSS è il modulo Layout modello. Ecco una citazione dalle specifiche ufficiali.
? Le proprietà in questa specifica funzionano associando una politica di layout con un elemento. Invece di lasciare che un elemento esponga i suoi discendenti nel loro normale ordine come testo in linea o come blocchi di testo (le policy disponibili nel livello 1 del CSS), la politica definita in questo modulo, chiamata posizionamento basato su modello, fornisce a un elemento una griglia invisibile per allineare gli elementi discendenti.?
Il modulo di layout del modello usa una sintassi bizzarra ma semplice che rende il layout un gioco da ragazzi. La prima cosa che devi fare è creare un contenitore con alcuni elementi figlio. Per ogni elemento figlio, si assegna una lettera arbitraria (non importa quale lettera, solo assicurarsi che siano univoci).
Successivamente, si applica un valore di visualizzazione all'elemento padre utilizzando queste lettere per definire le proporzioni. Ad esempio, per creare tre colonne uguali, digitarle tutte in fila:
Questo ti darà il seguente risultato:
Se vuoi riordinare le scatole, semplicemente riorganizza le lettere nel tuo CSS. Invece di digitare? Abc ?, prova a digitare? Bca ?.
Per creare una nuova riga, crea una nuova serie di virgolette. È possibile ripetere le lettere per impostare un senso di proporzione. Ad esempio, qui impostiamo la prima riga in? Ab? e il secondo a? cc ?, che significa? c? sarà il doppio della larghezza di? a? o? b ?.
Ogni sezione (a, b, c) viene definita "slot". Per creare uno slot vuoto, usa semplicemente un punto:? A.b.c? creerà due spazi vuoti nella nostra fila. Per scegliere come target uno slot per lo styling aggiuntivo, utilizzare lo pseudo elemento slot:
Scava più a fondo
Come con l'esempio precedente, c'è molto di più che può essere fatto qui come impostare altezze e larghezze usando dimensioni o percentuali precise. Al momento nessuno di questi è pronto per l'uso in qualsiasi browser, ma è possibile installare un plug-in jQuery per testarlo! Consulta le pagine dimostrative del plugin per alcuni fantastici esempi in codice su come creare qualsiasi layout che desideri utilizzando il modulo Layout modello.
Torna alle tabelle?
L'articolo di Andrew Tetlaw Sitepoint che ho menzionato prima presenta un'altra opzione interessante per il layout.
Abbastanza interessante, l'impostazione del? Display? proprietà a? tavolo? ci consente di strutturare il nostro layout come se fossero tabelle. Subito so che questo farà impazzire molte persone. Tornando al layout basato su tabella !? Sei pazzo? La parte pazzesca è che si tratta in effetti di una pratica completamente diversa rispetto a quella che utilizza letteralmente un elemento tabella. Qui stai semplicemente dicendo al CSS di posizionare gli elementi allo stesso modo al modo in cui sono posizionate le celle e le righe della tabella.
Personalmente, mi piacciono ancora i nuovi fantasiosi metodi CSS3 che abbiamo appena trattato molto meglio e abbiamo davvero difficoltà a immaginare questo ottenendo un'accettazione generalizzata, ma vale comunque la pena di dare un'occhiata e di discuterne. Se sei interessato, assicurati di controllare la spiegazione di Tetlaw.
Conclusione
Il punto di questo articolo è stato quello di farti riflettere su come i float potrebbero non essere necessariamente il modo migliore per strutturare i siti web. Sebbene siano una delle migliori soluzioni che possiamo attualmente utilizzare nei progetti live client, rappresentano un sistema piuttosto sciatto e rotto che è ben lungi dall'essere ideale.
Ci sono diversi modi in cui puoi affrontare le cadute dei galleggianti. Per ora, puoi controllare? Display: inline-block? come una sola opzione o addirittura esaminare? display: table? se sei particolarmente coraggioso.
I maghi che fanno funzionare tutta questa tecnologia riconoscono che il sistema è rotto e stanno lavorando sodo per risolvere i problemi con i moduli di layout che potrebbero rivelarsi estremamente utili in futuro. Aspettatevi di sentire molto di più sui moduli Flexbox e Template Layout in futuro. Chissà, uno o entrambi potrebbero essere il modo standard con cui i futuri sviluppatori creano layout web!
Lascia un commento e facci sapere i tuoi pensieri su tutto questo. Pensi che i galleggianti rappresentino un sistema di layout imperfetto? Qualcuno dei moduli di layout proposti sembra una soluzione solida per questi problemi?