Box-sizing CSS3

Di cosa parliamo? Oggi voglio parlarti di questa proprietà CSS appartenente al livello 3 delle specifiche che consente di “ridisegnare” […]
Box-sizing CSS3

Di cosa parliamo?

Oggi voglio parlarti di questa proprietà CSS appartenente al livello 3 delle specifiche che consente di “ridisegnare” il box-model a cui siamo solitamente abituati. Se non sai proprio di cosa sto parlando, prima di continuare la lettura, ti consiglio di dare uno sguardo a questo e quest’altro mio vecchio articolo, in caso contrario, prosegui pure.

Un tuffo nel passato

La proprietà in questione consente di ricalcolare il valore della larghezza o dell’altezza di un qualsiasi elemento. Le specidiche ufficiali W3C, che trovi a questo indirizzo, ci illustrano due possibili valori che questa proprietà può assumere:

Content-box

E’ il valore di defalut della width di un elemento cosi come illustrato dal W3C nelle specifiche 2.1. Il valore di width ottenuto utilizzando tale valore corrisponde all’area di contenuto dell’elemento, in linea quindi con il box-model nel quale, vi ricordo, che il riquadro elemento è il risultato della somma delle 7 proprietà orizzontali (o verticali) dello stesso e la width (l’area di contenuto) è una di esse.

Border-box

Il discorso cambia radicalmente se utilizzi “border-box” come valore di tale proprietà. Non ho scritto “un tuffo nel passato” casualmente. Il risultato della width (dell’area di contenuto di un elemento) è identico a quello che si otterrebbe se usassimo Internet Explorer 5. Il valore della width (dell’area di contenuto) in questo caso include anche padding e bordi!!!

Padding-box

Stesso discorso di prima solo che in questo caso i bordi sono esclusi dal ricalcolo. Attenzione che questo valore è rischioso da utilizzare. “Note: The ‘padding-box’ value is at risk.”

2 calcoli al volo!

Vediamo nel concreto, con un esempio molto banale come potrebbe essere reinterpretato il box-model e la relativa area di contenuto di un elemento dal browser. Ogni valore che segue, partendo da sinistra a destra corrisponde rispettivamente a margin-left / border-left / padding-left / width / padding-right / border-right / margin-right che non sono altro che le sette proprietà della formattazione orizzontale.
(I caso :: Content-box) => 0 + 1 + 15 + 300 + 0 + 0 + 0 => La width è 300px
(II caso :: Border-box) => 0 + 1 + 15 + 284 + 0 + 0 + 0 => La width è 284px(+16px) = 300

…ahh se l’avessi scoperta prima!

Ti stai ripetendo questa frase mentre ripensi a tutti i progetti in cui poteva risultarti utile? …potrebbe darsi che invece non ti venga in mente nulla! Non preoccuparti, ti do io qualche spunto su come utilizzarla.

Layout liquidi

Un’applicazione pratica può trovare riscrontro nella costruzione di layout liquidi. Nel mobile, in cui regnano sovrani il motore webkit e i layout fluidi, ci potrebbero essere le giuste condizioni per mettere in pratica tale proprietà!

<div class="element">Elemento 1</div>
.element{
    width:100%; /* ...e fin qui tutto ok */
    padding: 0 20px; /* adesso come la metti nome? */
    border:1px solid red; /* E' la fine! */
}

Voglio ulteriormente spiegarmi per coloro che non sono molto skillati sulla materia. La larghezza del mio elemento, deve essere esattamente pari al 100% dell’area di contenuto del suo parent, che sia il body o qualsiasi altro elemento che lo contiene. Finchè impostiamo la width pari al 100%, non c’è alcun tipo di problema. Cosa succede invece quando aggiungiamo anche altre proprietà i cui valori sono in pixel (bordi e padding) alla già citata proprietà? Il layout si rompe poichè alla larghezza impostata al 100% andiamo ad aggiungere 2px di bordo e 40px di padding. Grazie al box-sizing impostato su Border-box, il box model viene ridisegnato e la larghezza dell’elemento sarà sempre pari al 100%, qualsiasi valore in pixel di padding o bordi deciderai di assegnare.

.element{
    width:100%; /* ...e fin qui tutto ok */
    padding: 0 20px; /* adesso come la metti nome? */
    border:1px solid red; /* E' la fine! */
    box-sizing: border-box; /* Siamo salvi! */
}

Compatibilità su browser moderni?

Come possiamo vedere dalla tabella di compatibilità, la proprietà in questione è largamente supportata. Consiglio comunque di utilizzare i vendor-prefix, soprattutto per Firefox, che non supporta ancora la versione senza il suffisso. Come al solito, quando dobbiamo ricorrere ai vendor, ricordatevi sempre di inserire nell’ordine giusto le regole cosi che la versione standard senza prefissi si trovi in ultima posizione e verrà utilizzata quella nel momento in cui i browser accoglieranno tale regola.

.element{
    width:100%;
    padding: 0 20px;
    border:1px solid red;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Internet Explorer?

Per quanto riguarda invece IE7 e a questo punto anche IE6, il supporto c’è ma zoppica un pò. Puoi ricorrere a questa soluzione che si approssima a quella che otterresti con un bowser moderno…

.element{
    float:left;
    width:100%;
    *width:99%; /* Hack per IE7 e precedenti*/
    padding: 0 20px;
    border:1px solid red;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

…in alternativa, si può ricorrere al behavior specifico per il box-sizing, soluzione in javascript che va a rimodellare il box-model proprio come se IE7 interpretasse la regola CSS in questione. Tale soluzione va sempre inserita tramite hack cosi che solo le versioni di internet explorer in questione prenderanno in consegna la richiesta. Come recita il creatore dello script javascript… “Il behavior funziona solo se tutti i valori sono espressi utilizzando come unità i pixel. Questo perché Internet Explorer non è in grado di lavorare con diverse unità di misura. I valori percentuali sono, in teoria, possibili da utilizzare, ma ho deciso di non includerli fin dall’inizio. Se vi è una richiesta per i valori in percentuale, questa feature potrebbe essere aggiunta.”

.element{
    width:100%;
    padding: 0 20px;
    border:1px solid red;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    *behavior:url(boxsizing.htc); /* Inserire il percorso corretto */
}

Conclusioni

Sono aperto ad altre soluzioni e suggerimenti per rendere questa proprietà retrocompatibile al “100%” 🙂 . Puoi segnalarmi suggerimenti o quan’altro qui di seguito nel commenti o sulla bacheca facebook della fanpage ufficiale di LaboratorioCSS. Alla prossima ciao!

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github