Capire il box model
di: Alessandro Fulciniti 12 Dicembre 2003
Il box model errato di IE5.x e il box model hack
Se state visualizzando questa pagina con Internet Explorer 5 o Internet Explorer 5.5 sicuramente il rettangolo giallo dell' esempio sopra non sarà largo 200 pixel, ma esattamente 170 pixel. Questo perchè Internet Explorer include erroneamente nelle dimensioni dichiarate bordi e padding. Negli altri browsers come Internet Explorer 6, Opera e Mozilla il box giallo sarà giustamente largo 200 pixel. Ora, lo scopo fondamentale dei css è curare la presentazione dei contenuti e, in teoria, di essere un standard per tutti i browsers. Quando si realizza una pagina html e la si correda di un foglio di stile, quello che si vorrebbe è che la pagina renda uguale su tutti i browsers. Nella realtà ci si scontra sempre con le diversità di interpretazione dei css sui vari browsers. Ma in quanto al box model, si sono trovate diverse soluzioni per risolvere l' errata interpretazione di IE 5.x. Vi elencherò le due più note:
Una trattazione esauriente dei box model hack richiederebbe non poche righe e esula dallo scopo di questo articolo, vi rimando quindi agli articoli originali in lingua inglese. Ma ci tengo comunque a mostrarvi come sia possibile specificare via css un box con css 'width' effettiva pari a 200 pixel su tutti i browsers. La regola css in entrambi i casi non può essere specificata tramite uno stile in linea ma in un css incorporato nella sezione head un css esterno, e specificato via html così:
<body>
<div id="box200">Duecento pixel reali di contenuto</div>
</body>
Box Model hack di Tantek:
div#box200{
border: 5px solid #000;
padding:10px;
width: 170px;
background-color: #ccc;
voice-family: "\"}\"";
voice-family:inherit;
width: 200px;
}
body>div#box200{
width: 200px
}
Simplified Box Model hack:
div#box200{
border: 5px solid #000;
padding:10px;
width: 170px;
background-color: #ccc;
}
div#box200{
\width: 200px;
w\idth: 170px;
}
Variante condensata del Simplified Box Model hack:
div#box200{
border: 5px solid #000;
padding:10px;
width: 170px; \width: 200px; w\idth: 170px;
background-color: #ccc;
}
La proprietà display
La proprietà display serve per controllare via css come (e se) un elemento viene reso dal browser. Una trattazione approfondita di questa proprietà si può trovare sulla Reference del W3C. Il mio consiglio è di usare con parsimonia la proprietà display, soprattutto nel cambiare la natura visuale degli elementi in una pagina html.I tre valori fondamentali che la proprietà display può assumere sono:
- display: none;
- Dichiarando un elemento 'display: none' stiamo dicendo al browser di non generare nessun box per il suo contenuto. Quindi nè il testo nè tutti gli elementi contenuti all' interno verranno resi visivamente, proprio come se non ci fossero nell' html.
- display: block;
- In questo caso si forza un elemento a diventare block-level. Viene usato comunemente nei link per creare 'link a tutto campo' in cui la regione cliccabile è l' intera area utile del contenitore block-level generato e non solo il testo.
- display: inline;
- Dichiarando in questo modo un elemento, questo viene reso in un contenitore inline.
Un uso comune e diffuso della proprietà display è dichiarare 'display: block' i link, cioè i collegamenti ipertestuali delle pagine web espressi tramite il tag <a>. Questo consente di attribuire ad un elemento per sua natura inline, una presentazione come block-level element, e quindi attribuire dimensioni ed estendere l' area cliccabile del link all' intero box e non solo al testo.
Guide CSS
Responsive Desing, la guidaProgettare siti da fruire su dispositivi diversi è imprescindibile... |
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
Newsletter @CSS
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |