Oggi ho scoperto un piccolo trucco di cui ignoravo assolutamente l’esistenza.
Si tratta di un espediente per calcolare le dimensioni di un box, in presenza di padding/bordi espressi in una differente unità di misura.
Se io ho due div annidiate:
<div class="padre">
<div class="figlio"></div>
</div>
con .padre a dimensione fissa, e .figlio con dimensione 100%:
div.padre { width: 500px; }
div.figlio { width: 100%; }
Volendo aggiungere un padding, o un bordo, di dimensione fissa a .figlio, in questo modo:
div.figlio { width: 100%; padding: 10px; }
Si violerebbe la lunghezza a 100% (del padre) di 20px (per lato, dovuti al padding). Di solito, in questo caso in cui le dimensioni date sono sia elastiche che fisse, per risolvere si converte la misura elastica in fissa:
div.figlio { width: 480px; padding: 10px; }
Questo è corretto, ma esistono dei casi in cui convertire la dimensione elastica in fissa può creare dei problemi: ad esempio nei layout in cui si affida il controllo della dimensione del layout all’utente. In quel caso un piccolo javascript agisce sulla dimensione del wrapper che fa da contenitore al resto del layout (dimensionato in percentuale).
Come risolvere? Così:
div.figlio { width: 100% - 20px; padding: 10px; }
Facendo due prove, si possono mettere tutti e 4 gli operatori matematici (- + * /), ma funzioneranno tutti come una sottrazione.
L’ho testato su Firefox 2. Ovviamente però funziona anche su Internet Explorer (ho provato con il 7), perché interpreta male il boxmodel e ignora l’operatore matematico (grazie Sid di avermelo fatto notare). Al momento non ho a disposizione Safari, quindi se vi capita di fare un test lasciate un commento così aggiorno il post.
Ah, ovviamente il CSS non sarà validato.
3 Commenti & 0 Trackbacks
Funziona perfettamente… questo perchè in realtà explorer lo ignora. In questo caso però la modifica la devi inserire per favorire firefox/opera.
Uno dei rarissimi casi in cui l’ ignoranza di IE è un vantaggio ;)
ps. non conoscevo il tuo blog… hai un lettore in più :D
Ciao Sid!
Benvenuto e grazie del commento :)
Si, è vero, ho scritto male, rileggendo sembra che sia un trucco universale, in realtà IE si comporta come sempre. Ora modifico a dovere.
Neanche io conoscevo il tuo, quindi, vale lo stesso per te :)