Il design reattivo spesso richiede l'impostazione delle larghezze usando le percentuali. Questo è abbastanza facile da realizzare, cioè fino a quando non inizi a gettare i bordi nel mix. Se le colonne e la larghezza totale sono impostate utilizzando le percentuali, una dimensione di bordo statica provoca il caos sul layout.
Oggi esamineremo un paio di modi diversi per superare questo problema. Imparerai come creare un layout completamente fluido che non dispiaccia confini extra o padding un po '.
Il design reattivo è facile? In teoria
Il design reattivo è attualmente la nostra migliore risposta per offrire contenuti ottimizzati alla ricchezza di diversi dispositivi e dimensioni dello schermo che oggi accedono al web. Con alcune query di base sui media possiamo prendere rapidamente e facilmente un design statico e trasformarlo in qualcosa che si evolve in base alle esigenze specifiche dell'utente. Quanto è incredibile?
? La codifica del mondo reale ti sorprende?In teoria, questo mi sembra carino e semplice. Ho passato molto tempo a leggere e scrivere sul responsive design, quindi conosco sia la teoria che le pratiche abbastanza bene da non dover mai incontrare ostacoli importanti. Tuttavia, la codifica del mondo reale ti sorprende. Non importa quanto tu pensi di essere preparato, quando arriva il momento di dare vita al tuo progetto, alcuni ostacoli importanti sono destinati a presentarsi. Soprattutto quando ti stai avvicinando a layout complessi in CSS.
Ci sono un milione di problemi che sorgono in situazioni come questa, ma oggi voglio concentrarmi su uno che mi ha gettato in modo specifico una palla curva: i confini. Quando si progettano layout reattivi, questi tocchi apparentemente innocenti possono avere l'effetto di rovinare tutto!
Matematica reattiva
Quando si codifica un sito responsivo completo, si consiglia di utilizzare larghezze basate sulla percentuale sul contenuto. Certo, puoi combinare le query multimediali con le larghezze statiche, ma il tuo layout non è così adattivo come potrebbe essere. Se questo è l'obiettivo finale, perché non andare fino in fondo?
La combinazione di più layout di colonne con larghezze basate su percentuali comporta un po 'di matematica, ma è in realtà super base e può essere gestita da chiunque con competenze di addizione e moltiplicazione di base (abbiamo eseguito questo prossimo bit nel tutorial della nostra galleria di miniature reattive).
Diciamo che vogliamo un layout a cinque colonne. La prima cosa che mi piace fare è pensare ai margini. Se vogliamo i margini del 4% tra le nostre colonne, il 4% delle volte 5 colonne equivale al 20% della nostra larghezza riservata ai margini. Quindi sottraiamo il 20% dalla larghezza totale (100%) per ottenere l'80% rimanente per le colonne effettive. L'80% diviso per cinque colonne equivale a una larghezza del 16% su ogni colonna. Ecco una grafica per rendere tutto un po 'più chiaro:
Mettere a frutto questa matematica nel nostro CSS sembrerebbe qualcosa di simile al seguente. Abbastanza facile vero?
Il problema del confine
Non così in fretta. Diciamo che vogliamo aggiungere un bordo al nostro design. Come lo facciamo? Normalmente dovremmo semplicemente aggiungere un bordo alla classe della colonna, ma abbiamo già rappresentato il 100% della larghezza nel layout in alto. L'aggiunta di bordi completamente rovina il nostro layout. Qui abbiamo cinque colonne distribuite tramite il CSS sopra:
Ed ecco cosa succede quando aggiungiamo un bordo di dire, 2px a una colonna:
La soluzione, naturalmente, sarebbe quella di spiegare il confine nella nostra precedente matematica, ma come andiamo su questo? Risulta che non possiamo impostare la dimensione del bordo come percentuale, ma solo un valore statico. Questo è problematico perché se usiamo percentuali per tutto il resto, la quantità di spazio che lasceremo per il bordo sarà un valore variabile, il che significa che cambierà con il variare della larghezza della pagina. Questo rende quasi impossibile decidere su una larghezza per i nostri confini! Quindi cosa facciamo? Dovremmo rinunciare e rottamare l'idea del confine?
CSS Outline to The Rescue
Ovviamente, ciò di cui abbiamo bisogno è un modo per applicare un bordo a una colonna senza avvitare la sua larghezza. Come sa bene qualsiasi trickster CSS, esiste una proprietà che fa proprio questo: outline. Usando il seguente codice, possiamo lasciare la nostra matematica esattamente come abbiamo capito prima e ancora uscire da un effetto simile a un bordo che non infrange il nostro layout.
Questo funziona alla grande per il nostro test, le colonne scorrono piacevolmente e si adattano perfettamente allo spazio fornito nonostante il contorno:
Mal di testa
Abbiamo trovato la nostra soluzione, diamo una pacca sulla spalla e chiamiamola un giorno! Sfortunatamente, c'è sempre un avvertimento. In questo caso, ce ne sono diversi.
Compatibilità del browser
Il primo problema che si presenta con l'utilizzo della proprietà outline CSS è ovviamente la compatibilità del browser. Per essere onesti, la situazione qui potrebbe essere peggiore. Abbiamo un grande supporto a tutti i livelli nei browser moderni: Safari, Chrome, Opera, persino IE! Sfortunatamente, il supporto IE torna solo a IE8 con IE6 e 7 con supporto zero.
Molti sviluppatori hanno deciso solo recentemente di eliminare il supporto IE6, quindi so che molti non saranno ancora disposti a fare lo stesso per IE7. Tuttavia, la buona notizia è che si tratta di un tocco estetico puramente sottile e sicuramente non rovinerà la mia giornata se tutti vedranno il contorno tranne gli utenti di IE7.
Firefox Box-Shadow Problem
Anche se Firefox supporta pienamente la proprietà del profilo CSS, devi essere molto attento a come lo usi. In particolare, si incontrano problemi se si combina un contorno con un'ombra di riquadri. Per vedere cosa intendo con questo, ecco un contorno e un box-shadow renderizzati in Safari (nel senso buono):
Ora ecco lo stesso codice reso in Firefox (il modo incasinato):
Come puoi vedere, per qualche strana ragione, Firefox posiziona il contorno all'esterno dell'ombra anziché sul vero bordo della nostra colonna. Ciò si traduce in bruttezza inaccettabile!
Tutto o niente
Un'ultima cosa da ricordare sui contorni CSS: non è possibile applicarli in modo selettivo. Con i bordi, puoi usare border-right, border-top, ecc. Ma con un contorno sei costretto ad accettare l'idea che sarà uniforme intorno al bordo dell'oggetto.
Un'altra soluzione: il dimensionamento della scatola
Lo schema CSS ha un sacco di bagagli! Risolve il nostro problema ma viene fornito con un set di istruzioni piuttosto pesante che potrebbe non interessarti. Se solo c'è un modo per utilizzare la proprietà del bordo di gran lunga superiore, ma regolare il modello di box CSS per i nostri dispositivi. Bene, sei fortunato, perché in effetti c'è solo una proprietà del genere: il dimensionamento delle scatole.
Questa proprietà magica ci permette di modificare quel modello di scatola che è sempre stato confuso. Il valore predefinito del dimensionamento della scatola è? Content-box ?, che è essenzialmente il modello di scatola che conosciamo e amiamo. I valori di larghezza e altezza determinano la dimensione del contenuto e qualsiasi padding o bordo vengono disegnati al di fuori di esso e quindi si aggiungono alla larghezza. Quindi un div ampio 200px con un bordo 2px consuma tecnicamente 204px di spazio.
border-box
L'altro valore possibile per il dimensionamento della casella è "border-box", che in realtà posiziona qualsiasi padding e bordi all'interno dell'altezza e della larghezza specificate. Ciò significa che un div ampio 200px con un bordo 2px è ancora solo 200px! Ecco come appare questo se applichiamo le nostre colonne:
Con questo codice, le nostre colonne fluiscono perfettamente nonostante abbiano i bordi applicati:
Possiamo anche fare un ulteriore passo avanti e aggiungere un po 'di padding all'equazione senza rovinare nulla. Finché la proprietà di ridimensionamento della casella è impostata su border-box, non è necessaria alcuna matematica aggiuntiva. Aggiungi tutti i bordi e le imbottiture che ti piacciono e tutto funziona ancora:
Compatibilità del browser
È interessante notare che la compatibilità del browser qui è la stessa di outline, il che significa che funziona praticamente su tutto tranne IE6 e IE7. La tua preoccupazione principale qui però è che, a differenza del contorno, il layout fallirà nei browser che non supportano questa proprietà.
Quale metodo è il migliore?
La proprietà outline è sicuramente la soluzione più semplice, funziona in molte situazioni e se fallisce, non succede niente di male al tuo layout. Tuttavia, penso che il metodo di dimensionamento delle scatole sia molto meglio. Posso combinarlo con un'ombra senza problemi seri, il supporto del browser in realtà non è male e posso ancora godermi tutta la bontà dei confini. Il fatto che l'imbottitura possa essere gettata nel mix è la ciliegina sulla torta e porta così avanti alla competizione nella mia mente. Se sei preoccupato per IE7, puoi sempre montare un foglio di stile condizionale rapido che risolve il problema.
dimostrazione
Se vuoi vedere il ridimensionamento della scatola in azione, passa a Dabblet per vedere la demo live dell'esempio sopra.
Conclusione
Outline e box-sizing rappresentano due possibili soluzioni al nostro problema di combinare i bordi con larghezze percentuali nei layout CSS. Nessuna delle due soluzioni è perfetta, ma finché sai cosa stai facendo, entrambe possono essere utilizzate per risolvere con successo i problemi del layout.
Ora che hai visto le mie soluzioni per questo problema, è giunto il momento per te di intervenire. Come gestisci il problema dei bordi nei layout reattivi? Hai una soluzione diversa non elencata sopra?