Principio generale
Il c.d. box-model indica il modo in cui, nei CSS o Cascading Style Sheets, vengono interpretate le principali proprietà dimensionali assegnate ad un certo box contenitore in larghezza e/o altezza, tenendo presente che quasi sempre le problematicità si presentano con riferimento alla larghezza (essendo lo scrolling operazione comune nella fruizione dei siti web).
Facendo dunque riferimento alla larghezza, in sintesi il box-model è il seguente:
LARGHEZZA EFFETTIVA DI UN BOX = width + padding orizzontale + bordi sui lati sx e dx
quindi un box definito dalle seguenti dichiarazioni:
#box { width:600px; padding-right:20px; padding-left:20px; border: 2px solid #333; … }
avrà larghezza effettiva pari a 600 +20 + 20 + 2 + 2 = 644px
In maniera analoga, con riferimento all’altezza, avremo invece:
ALTEZZA EFFETTIVA DI UN BOX = height + padding verticale + bordi sui lati superiore ed inferiore
Perché abbiamo detto che il problema si presenta di solito con riferimento alla larghezza?
Per il semplice motivo che segue: se l’altezza di un contenitore si rivela maggiore del previsto, si tratterà per l’utente di effettuare uno scrolling maggiore verso il basso senza altre conseguenze problematiche; se invece è la larghezza ad essere maggiore, può accadere che la disposizione degli elementi ne risenta negativamente come ad esempio nel caso di due colonne flottanti affiancate (la seconda, non trovando sufficiente spazio, si posiziona sotto alla prima invece che di fianco determinando la “rottura” del layout).
Il problema nelle vecchie versioni di Internet Explorer
Tutto facile dunque? Macchè! Nelle vecchie – vecchissime … diciamo pure preistoriche – versioni di Internet Explorer, la 5.5 e precedenti, l’interpretazione del box-model era completamente invertita giacché la larghezza dichiarata con la proprietà width era quella effettiva, comprensiva di padding e bordi (nell’esempio di cui sopra: 600px).
Il fatto che IE fosse praticamente l’unico browser presente sul mercato, eccezion fatta per Netscape Navigator – che avrebbe a sua volta inciampato nella famigerata versione 4 così difettosa da comprometterne un futuro stabile e duraturo – pose agli sviluppatori di fronte a due scelte:
- interpretare il box-model così come definito in Internet Explorer,
- aggirare il problema in questo modo: assegnare la sola proprietà width al box contenitore e crearne un altro al suo interno a cui attribuire il padding.
La soluzione 2. comportava un appesantimento – peraltro modesto – del markup nel senso che là dove sarebbe stato possibile avere solo un elemento, ce n’erano in definitiva due ma appariva un prezzo da pagare più che ragionevole per applicare correttamente le regole del box-model ed ottenere un risultato appropriato anche in IE.
La fase di transizione
Con l’arrivo della versione 6 di IE (comunque disastrosa a causa dei numerosi e rilevanti bug), l’interpretazione del box-model divenne corretta e allineata agli altri browser che si stavano sviluppando, in particolare Firefox cioè il dichiarato erede di Netscape Navigator.
Il problema non era però sparito perché le versioni precedenti di IE continuavano a girare su numerose macchine.
Non dimentichiamo che eravamo ancora nell’era dei modem analogici quindi gli aggiornamenti non erano così facili, inoltre in molti li vedevano come pericolosi per via dei primi virus mascherati e il passaggio ad altri browser non era frequente per la sfiducia istintiva nei confronti di tutto ciò che non fosse firmato Microsoft (quanto sono cambiate le cose da allora!).
Per potere creare layout idonei a tutti i browser, quindi, diventava indispensabile adottare la soluzione 2. esplicitata nel paragrafo precedente oppure ricorrere ai cosiddetti commenti condizionali che portassero alla lettura ed esecuzione di regole CSS sostitutive e/o aggiuntive qualora venisse impiegato un browser caratterizzato da bug.
Ecco un esempio di commento condizionale inserito nella sezione <head> del file HTML, dopo il collegamento al foglio di stile di base:
<link href=”css/miosito.css” rel=”stylesheet” type=”text/css” />
<!–[if lt IE 6]>
<link href=”css/miosito-ie.css” rel=”stylesheet” type=”text/css” />
<![endif]–>
dove la prima riga carica lo stylesheet di base e il commento condizionale successivo carica il foglio speciale con le regole sostitutive qualora il browser sia una versione precedente a IE6.
Gli operatori dei commenti condizionali erano:
[if IE] … I.E. qualsiasi versione
[if IE 6] … I.E. versione 6
[if lte IE 6] … I.E. versione 6 o inferiore
[if lt IE 6] … I.E. versione inferiore a 6 (esclusa quest’ultima)
Questa soluzione era evidentemente piuttosto noiosa ma sarebbe stata applicata anche dopo l’arrivo di IE6 e IE7, per rettificare alcuni bachi tanto stupidi quanto fastidiosi.
C’era un altro approccio possibile, inaccettabile nell’ottica di chi scrive: rinunciare del tutto a garantire compatibilità con le versioni via via superate di IE dando per scontato che chi non avesse proceduto ad aggiornamenti e non utilizzasse gli altri browser disponibili (il già citato Firefox, sempre più forte nel tempo fino all’avvento di Chrome) non meritasse di fruire di un sito correttamente visualizzato.
Approccio impossibile da condividere, come si diceva, perché l’obiettivo di uno sviluppatore professionista è quello di assicurare la visibilità del sito ad una platea più ampia possibile di fruitori, non di “educare” gli stessi ad abbandonare IE.
Ovviamente, restando nei limiti del ragionevole: se ancora qualcuno là fuori impiega Windows XP con IE7, beh … a questo punto, peggio per lui!
La situazione attuale: la proprietà box-sizing
Oggi, tutti i browser in circolazione forniscono una corretta interpretazione del box-model.
Internet Explorer ha perso da tempo la sua posizione preminente tra gli utilizzatori dei PC a favore di Chrome e Firefox ed è sparita la sua versione destinata ai sistemi Mac, su cui girano Safari, Firefox e Chrome.
Con la versione 3 dei CSS è stata introdotta una nuova proprietà: box-sizing che stabilisce cosa sia incluso nelle proprietà dimensionali di un contenitore (width e height).
I valori consentiti per la proprietà in esame sono i seguenti:
- content-box (default): le proprietà width e height includono solo il contenuto mentre padding e bordi non sono compresi
- border-box: le proprietà width e height includono contenuto, padding e bordi
- initial: riporta la proprietà al suo valore iniziale
- inherit: fa sì che il valore di questa proprietà sia ereditato dall’elemento parent
Nota: quanto sopra si applica non solo alle proprietà width/height ma anche alle relative proprietà min/max
Il valore di default implica dunque il normale comportamento previsto dal box-model mentre il valore border-box permette di modificarlo, ottenendo un migliore controllo sul dimensionamento degli elementi anche nell’ottica della responsiveness o reattività.
Ecco un esempio interattivo pubblicato sul sito w3schools.com con due colonne flottanti dimensionate al 50% l’una e con un bordo: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-sizing2
In definitiva, grazie ai CSS3, è possibile optare per il mantenimento del normale comportamento del box-model oppure alterarlo tramite la proprietà esaminata, in generale (per tutti i box del layout) o caso per caso.
• la proprietà box-sizing sul sito w3schools.com: https://www.w3schools.com/cssref/css3_pr_box-sizing.asp