Internet Explorer 8 supporta parzialmente il box-sizing nelle tabelle

Non molto tempo fa, nel periodo oscuro in cui i browser erano sprovvisti di developer tools nativi, ed Internet Explorer 6 dominava indisturbato il panorama del web imponendo dolore e sofferenza a tutti gli sviluppatori Front End del mondo, la proprietà fondamentale dei CSS ovvero il box model, la formula che determina lo sviluppo delle grandezze in larghezza e altezza degli elementi sulla pagina, per Micro$oft prevedeva uno sviluppo verso l’interno dell’elemento.

Dunque impostando height e/o width per esempio a 100px, borders a 10px e padding a 20px, l’ingombro complessivo sulla pagina resta 100px, tuttavia nel modello previsto dalle specifiche CSS l’ingombro complessivo diventa 130px.

Legacy of Kain: Soul Reaver, Raziel passa da border-box a content-box

Le specifiche CSS prevedevano, appunto, che gli ingombri di bordi e padding si sviluppassero all’esterno dell’elemento, aggiungendosi alle dimensioni esistenti. Dal momento che l’uno o l’altro comportamento possono risultare preferibili in situazioni diverse, e ormai la frittata era fatta, si optò di seguire come modello predefinito nei browser quello a sviluppo esterno, ma lasciare potere decisionale agli sviluppatori donando la proprietà CSS  box-sizing.

Questa proprietà CSS3 è stata supportata fin dalle prime versioni di tutti i browser moderni, incluso Internet Explorer 8, con un paio di eccezioni note su stack overflow e caniuse.

Tabelle e padding percentuali sono un brutto mix

Un caso in cui torna utile il vecchio modello, dove le dimensioni dell’elemento partono dai bordi (border-box), è ad esempio quando abbiamo due o più contenitori allineati a larghezza dinamica, così che quando la dimensione della finestra cambia l’elemento si allunga o accorcia mantenendo le proporzioni tra i suoi contenitori, ed i contenuti nei singoli contenitori si adattano ad essi, usando una <table> e delle celle in una riga si ottiene facilmente questo effetto.

In questo esempio il contenuto della cella di sinistra ha una larghezza di 100% così che si espanda dentro il contenitore ed un padding a destra percentuale cosi che lasci del respiro quando i contenuti stanno per andare a ridosso della cella adiacente, ma dall’ispezione risulta che quel padding-right: 1.5% non viene aggiunto all’interno bensì all’esterno ignorando la direttiva box-sizing restituendo una larghezza del 101.5%.

Incuriosito dal risultato ho prodotto uno snippet che mette alla prova il box-sizing in tre contesti:

  1. contenitore e contenuto <div> con padding in unità percentuale
  2. contenitore <table> e contenuto  <div> con padding in unità percentuale
  3. contenitore <table> e contenuto  <div> con padding in unità fissa

Eseguito su un browser moderno, tutti e tre gli esempi hanno la stessa larghezza, mentre su IE8 nel secondo esempio il contenuto viene buttato fuori dal suo contenitore, per cui è bene evitare di usare padding percentuali se il contenitore è una tabella e il contenuto deve rispondere a border-box.

 

https://sresc.io/tLx

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.