Dopo molto tempo, Microsoft ha deciso di lavorare a un nuovo browser: Internet Explorer 7, di cui a marzo è stata resa disponibile per il download la seconda versione della beta 2. Si tratta di una versione non ancora ufficiale, ma come dichiarato da Microsoft stessa, si tratta di una versione layout complete.
Questo vuol dire che la versione beta di Internet Explorer 7 non avrà sostanziali modifiche per quanto riguarda il supporto e l'implementazione dei CSS rispetto alla versione stabile e definitiva.
Il 29 Giugno 2006 su IEblog è stata annunciata la beta 3 di IE7, ultima edizione beta prima dell'uscita la versione stabile e definitiva, la cui uscita è prevista nella seconda metà del 2006. Se avete ancora installata la beta 2, il consiglio è di installare la beta 3: basterà disinstallare la precedente beta prima di procedere.
Sono diversi gli interventi sul nostro blog riguardanti IE7 e qui sul HTML.it è stato presentato un articolo su I CSS in Internet Explorer 7 in febbraio riguardante la prima versione della beta 2. Mi è parso necessario presentare un articolo che costitutisse un breve riepilogo sulle strategie di sviluppo su Internet Explorer 7.
Gli appassionati e gli esperti di web standards e CSS noteranno che in realtà si tratta di consigli di ampio respiro, e di buone pratiche di sviluppo valide indipendentemente da IE7. Che sia una minaccia o una risorsa, dipende solo dall'approccio con cui ciascun sviluppatore lo accoglierà. Ma non indugiamo oltre e iniziamo subito.
1. È tempo di testare
Ne ho già parlato sul blog: per i siti di nuova creazione È bene effettuare i test anche su IE7. Anche se ad oggi non c'è un modo stabile per far coesistere la versione 7 di Internet Explorer con le precedenti, comunque IE7 si disintalla facilmente, rivelando quindi la versione precedente di IE installata (tipicamente la 6). Una procedura non troppo pratica, ma indispensabile per evitare doppio lavoro quando la versione stabile e definitiva verrà resa disponibile.
2. Non affannarsi, ma prepararsi
Un approccio leggermente più soft può essere usato per i siti già esistenti: in questo caso c'è tempo fino all'uscita della versione 7 stabile per sistemare le cose nel caso si riscontrino problemi di resa. Imperativo non allarmarsi, e abituarsi da subito a buone pratiche di sviluppo adeguate per IE7 cosÏ da essere preparati e poter risolvere agilmente.
3. Validare il codice
Il primo passo fondamentale, e spesso trascurato, nelle creazione di pagine web è la validazione dell'HTML e del CSS. Questo ci garantisce che markup e foglio di stile siano ben scritti e vengano quindi letti allo stesso modo da tutti i browser. Vorrei però sfatare un mito comune soprattutto a chi si è avvicinato da poco allo sviluppo con HTML e CSS: la validazione non ci garantisce che questi vengano interpretati allo stesso modo da tutti i browser. Ma senza dubbio è un buon inizio.
4. Più semplice, meno problemi
In generale, quando si sviluppa, la tendenza è quella di trovare una soluzione che sia pratica e veloce e la si accetta per buona. Una delle arti del web design a parer mio sta invece nel trovare la soluzione più semplice e logica: ci vorrà un po' più di tempo, ma molto probabilmente si rivelerà la più robusta.
5. Non dimenticarsi degli altri browser
Internet Explorer 7 ha esteso di molto l'aderenza ai CSS 2 rispetto al suo predecessore, ma si tratta comunque di un browser piuttosto distante dalle recenti versioni di Opera, Firefox e Safari su cui è importantissimo effettuare i test di resa.
6. Non dimenticarsi di IE6 e IE5.5
Anche i predecessori di IE7 non vanno trascurati nella fase di test, soprattutto IE6 e IE5.5. In quanto a IE5, questo browser detiene ormai una percentuale di utilizzo che si attesta intorno al 2-3%, quindi decisamente molto bassa. Non andrà comunque tralasciato in caso di siti a larga fascia di utenza o qualora le statistiche dei visitatori rivelassero una significativa percentuale di utenti.
7.Dimenticare gli hack, viva il commento condizionale!
Il messaggio proviene dal team di sviluppo di IE stesso, che in The demise of CSS hacks suggerisce di abbandonare l'uso di hack CSS. L'argomento È stato ripreso anche da Dave Shea in Stop hacking or be stopped. Questo approccio alla risoluzione dei problemi di resa, seppur pratico e veloce, si rivela spesso privo di logica e potenzialmente dannoso. Anzi, la logica nell'uso degli hack c'è: ma si tratta della logica del browser e non quella dei CSS.
I lettori sapranno che nei molti articoli ed esempi che ho presentato difficilmente (anzi forse quasi mai) ho usato hack CSS. Si trova quasi sempre una soluzione alternativa e pulita all'uso di hack... ma nel caso non si dovesse trovare, il commento condizionale è la strada da preferire.
Grazie al commento condizionale siamo in grado di includere regole specifiche per Internet Explorer. Se la versione 5.5 ha dei problemi di interpretazione del box model, è comunque IE6, pur essendo più recente, il browser problematico. Ecco un possibile approccio: basterà preparare due file CSS dal nome "ie5x.css" e "ie6.css" e linkarli inserendo come ultime righe della sezione head della pagina le seguenti:
<!--[if lte IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie5x.CSS">
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.CSS">
<![endif]-->
8. Il box model hack
Il box model hack, nato per sistemare problemi di implementazione del box model di IE5 e IE5.5 è forse uno dei pochi hack che si può ancora utilizzare con relativa sicurezza. Un approccio da seguire in generale è evitare di specificare padding e/o bordi ad elementi con larghezza impostata; ma se proprio non se ne può fare a meno si può ricorrere al commento condizionale o il simplified box model hack (di cui ho parlato qui sul blog) tra le diverse implementazioni del box model hack è quella da preferire.
Ecco una regola che renderà un div con id="box" di larghezza totale di 200 pixels, inclusi 10px di padding sui lati, sia su IE5.x che tutti gli altri browser:
div#box{
width: 180px !important;
width /**/: 200px;
padding: 0 10px}
9. Imparare ad osare: position:fixed e PNG
Due novità importanti di IE7 sono il supporto delle immagini PNG con trasparenza e il position:fixed che consente di posizionare elementi rispetto alla finestra del browser. Due caratteristiche già supportate da molto tempo in browser quali Opera, Firefox e Safari. È tempo di iniziare ad osare, assicurandoci però una graceful degradation per IE5.x e IE6 che non le supportano.
La seguente regola servirà un'immagine PNG ai browser capaci, incluso IE7, mentre mostrerà una gif di sfondo alle versioni precedenti:
div#box{
background: url(shadow.png) !important;
background: url(shadow.gif)
}
Mentre la seguente regola renderà un box fisso in alto a destra della finestra sui browser capaci, sarà invece posizionato assolutamente rispetto alla pagina in IE5.x e IE6:
div#box{
position: fixed !important;
position: absolute;
top: 20px; left: 20px;
width: 200px;
}
10. min-width e max-width anche per IE5.5 e IE6
Un'altra caratteristica notevole in IE7 è il supporto per le proprietà min-width e max-width, utilissime soprattutto in layout liquidi. Nella seguente regola il container principale della pagina ha larghezza variabile compresa tra 700 e 1100 pixel a seconda della larghezza della finestra del browser:
div#containter{
min-width: 700px;
max-width: 1100px;
}
In realtà min-width e max-width si possono emulare anche sulle versioni precedenti Internet Explorer.
Basterà preparare un file, per esempio con nome "widthIE.css" con le seguenti righe:
#container{
width: expression(document.body.clientWidth < 702? "700px" : document.body.clientWidth > 1102? "1100px" : "auto");
}
Ovviamente le larghezze minima e massima si potranno regolare a piacere: da notare lo scarto di due pixel nei numeri indicati prima del punto interrogativo, indispensabile perché altrimenti IE5.x e IE6 vanno in crash. Il file "widthIE.css" verrà linkato poi attraverso il commento condizionale nella sezione head della pagina:
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="widthIE.CSS">
<![endif]-->
Conclusioni
In questo articolo abbiamo visto brevemente alcuni consigli di sviluppo per Internet Explorer 7. Ci vorrà del tempo prima che la versione definitiva venga rilasciata e che soprattutto ottenga una buona diffusione, ma è importante adottare buone pratiche di sviluppo da subito, sia che siate appassionati o sviluppatori per professione. Alla prossima.
