Nonostante Microsoft abbia sfornato ben due successori e nonostante, addirittura, campagne virali per scoraggiarne l'uso, IE6 è ancora tra noi, con i suoi problemi, le sue incongruenze e i mal di testa degli sviluppatori che intendono o sono costretti a garantire la compatibilità con un browser che può a ragione definirsi vetusto. In questo articolo, a beneficio soprattutto di chi si avvicina solo ora allo sviluppo di pagine web, abbiamo elencato 5 problemi noti del software di Microsoft e le relative soluzioni. Un breve vademecum da portare sotto l'ombrellone.
Box Model
Il bug più comune, più conosciuto e più mal digerito da ogni sviluppatore e designer. Immaginiamo di avere un box di questo tipo:
div#box {
width: 100px;
border: 2px solid black;
padding: 10px;
}
IE6 calcolerà la larghezza complessiva del box in 100px, mentre tutti i browser moderni la calcoleranno in 124px, poichè alla width di 100px sommiamo 10px di padding sinistro, 10px di padding destro e 4px totali di bordi laterali.
Per ovviare a questo bug utilizziamo dichiarazioni specifiche per i browser:
div#box {
width: 100px;
_width: 124px;
border: 2px solid black;
padding: 10px;
}
Scrivendo _width: 124px specifichiamo solo per il browser IE6 il valore di width che l'oggetto dovrà avere.
Il bug del doppio margine
Prendiamo come esempio il solito div#box visto in precedenza, ma questa volta applichiamo la dichiarazione float:right:
div#box {
float: right;
margin-right: 20px;
}
Il bug del margine doppio è causato da un errato calcolo dei margini da parte del browser IE quando l'elemento stesso è contemporaneamente dichiarato float. Di conseguenza il layout risulta compromesso. Quale soluzione? Il fix più comune consiste nell'aggiungere al div la seguente dichiarazione:
display:inline
Questo fix può però comportare nuovi problemi se, ad esempio, vorremmo applicare una dimensione fissa all'elemento cui è applicato, in quanto il valore inline non lo permette.
Centrare un elemento con i CSS
Centrare un elemento nel layout di una pagina web è una delle attività che viene svolta con maggiore frequenza. Per i neofiti del linguaggio CSS però rappresenta un problema, sopratutto se abituati a layout basati esclusivamente su tabelle.
Vediamo come ottenere l'effetto desiderato.
Creiamo il nostro div da centrare:
<body>
<div id="maincontent">DIV da centrare</div>
</body>
Ora lavoriamo con i CSS:
body {
background: #fff;
color: #000;
font: 0.7em/160% “Lucida Grande”, Verdana, sans-serif;
margin: 0;
padding: 0;
}
#maincontent {
background: #dded86;
width: 400px;
margin: 0 auto;
}
La proprietà margin: 0 auto indica che il l'elemento #maincontent avrà margini superiore ed inferiore pari a zero e margini laterali in automatico. Dichiarando quindi il valore di larghezza (width: 400px) il nostro div si posizionerà centralmente rispetto all'elemento padre, in questo caso l'intera pagina (body).
Per ottenere lo stesso funzionamento su IE bisognerà aggiungere la dichiarazione text-align: center; su body e text-aling: left; su #maincontent per ripristinare l'allineamento a sinistra del testo, come di default.
Un uso corretto di overflow
Vediamo in quali casi la proprietà overflow è utile per lo sviluppo del nostro layout. Analizziamo i diversi casi:
Visible: se non viene dichiarato, il valore di default è visibile. Non c'è la necessità quindi di dichiararlo, a meno che non si stia sovrascrivendo un'altra dichiarazione (override).
Hidden: nasconde il qualunque tipologia di contenuto in eccesso rispetto alle dimensioni (larghezza ed altezza) di un elemento.
Scroll: in questo caso il contenuto sarà nascosto ma potremo utilizzare le barre di scorrimento per visualizzare la parte non visibile.
Auto: un valore simile a scroll. Da non utilizzare.
Un uso comune della proprietà overflow viene fatto per il Float Clearing, ovvero il contenimento di elementi dichiarati float. Sarebbe più corretto definirlo self-clear poichè in questo caso applichiamo l'overflow all'elemento parent.
Vediamo un esempio:
<div id="parent">
<div id="box1"></div>
<div id="box2"></div>
</div>
#parent {
overflow: auto;
}
#box1 {
float: left;
width: 500px;
height 200px
}
#box2 {
float: right;
width: 300px;
height 200px
}
L'elemento #parent con proprietà overflow:auto si estenderà in altezza fino a contenere l'elemento con height maggiore (in questo caso 200px, entrambi #box1 e #box2 sono alti uguali).
IE e Firefox, poi, renderizzano in maniera diversa le barre di scorrimento.
Mentre il browser di casa Microsoft le visualizza all'interno di un elemento, Firefox invece si comporta esattamente nella maniera opposta, ovvero all'esterno dello stesso elemento. Teniamo in considerazione questo piccolo problema cross-browser quando progettiamo il nostro layout prevedendo di ricorrere a soluzioni di questo tipo.
Usare PNG trasparenti su IE con i CSS
Capita spesso di voler utilizzare file .png per simulare ombre, trasparenze e altri effetti grafici per layout complessi. Il problema, molto noto, è che molte correzioni basate su Javascript non funzionano con le immagini caricate tramite CSS, ma solo con le immagini caricate direttamente tramite il tag HTML img.
Come dunque affrontare quasto problema? Vediamo un esempio:
#logo {
background: url('logo.png');
width:150px;
height:55px;
}
* html #logo{
background:none;
float:left;
width:150px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png', sizingMethod='scale');
}
Il div #logo crea lo spazio vuoto necessario per caricare e visualizzare l'immagine. Perchè due diverse dichiarazioni? La prima per tutti i browser recenti che supportano le trasparenze png (IE7 compreso). La seconda è invece di maggior interesse poichè tramite la prorietà filter sarà caricata nuovamente l'immagine di background per IE6 con i filtri per le trasparenze necessari al browser di casa Microsoft. Notiamo che abbiamo resettato la proprietà background:none altrimenti il fix non funziona.
