Dell'argomento ci siamo occupati in altre sezioni (Focus del 3/6/2004 "Il futuro dei browser" e del 15/1/2004 "Il 2004 dei browser") e ad esso si è accennato in diversi articoli di PRO. La notizia è quella del 'congelamento' di Internet Explorer decretato dalla stessa Microsoft qualche mese fa. L'azienda di Redmond ha prima annunciato la fine dello sviluppo per la versione Mac, poi ha fatto sapere che una nuova release per Windows sarebbe stata disponibile solo con l'avvento di Longhorn (l'atteso successore di XP) e che quest'ultima release non sarebbe più stata distribuita come programma stand-alone. Tradotto: se vuoi avere il nuovo Explorer devi avere Longhorn, se non aggiorni il sistema operativo ti tieni la versione 6. Gli unici aggiornamenti previsti sono quelli contenuti nel Service Pack 2 in arrivo per la fine dell'estate e riguardano essenzialmente aspetti legati alla sicurezza, tra cui la possibilità di bloccare le pop-up, cosa peraltro già possibile installando la Google Toolbar. Sul versante che più interessa sviluppatori e webdesigner (miglioramento nel supporto degli standard) il nulla.
Cosa è successo in questi mesi? È successo che i concorrenti si sono dati più che mai da fare. Apple ha regalato ai suoi utenti l'eccellente Safari, divenuto immediatamente il browser di riferimento su Mac OS X. Mozilla e Opera hanno continuato lo sviluppo dei loro progetti sfornando software di qualità assoluta. Sono spuntati programmi come MyIE e NetCaptor basati sul motore di Explorer ma che ne migliorano decisamente l'interfaccia introducendo funzionalità sempre più apprezzate come il tabbed browsing. Certo, i numeri sono ancora tutti per Explorer, ma la sensazione diffusa è che dopo aver stravinto la guerra dei browser Microsoft si trovi più che mai in una posizione di inferiorità tecnologica rispetto agli avversari.
La cosa più rilevante è che a Redmond sembrano aver avvertito il problema. E c'è da dire, ad onore di Microsoft, che in questo caso hanno mostrato un livello di apertura e un'attitudine al confronto raramente riscontrate. Su forum, blog e wiki che fanno diretto riferimento alla società, è in corso una discussione ampia e franca proprio sul futuro di Explorer. La notizia che ha fatto più rumore è stata quella del ritorno nel team di sviluppo di Internet Explorer di Dave Massy, uno degli sviluppatori che ha più contribuito negli anni precedenti alla crescita del browser. Molti hanno interpretato la mossa come un ripensamento della strategia. Stimolata dalla concorrenza, attenta alle richieste di utenti e sviluppatori web, Microsoft potrebbe rilasciare una versione migliorata di Internet Explorer prima dell'arrivo di Longhorn. Ripetiamo: si tratta solo di rumors, ripresi e amplificati, comunque, da siti come cNET.
IE7
Dal punto di vista di chi i siti li costruisce, gli eventuali upgrade di Explorer dovrebbero riguardare prima di tutto il supporto degli standard. Parliamo ovviamente della lunga serie di bug e proprietà non supportate di CSS e altri linguaggi che rendono tanto complicata la vita del webdesigner, costretto a ricorrere ad hack e salti mortali di ogni tipo per garantire la compatibilità rispetto al browser più usato. Senza aspettare Microsoft, qualcuno ha pensato di anticipare i tempi.
Uno sviluppatore inglese, Dean Edwards, sta lavorando da qualche mese ad un progetto chiamato IE7. Nome significativo. L'intento è quello di colmare i buchi nel supporto degli standard, realizzando dunque una sorta di versione 7 del browser.
Come funziona
IE7 non è un plug-in. Non richiede nessun intervento da parte dell'utente. Non modifica nulla del codice e dell'interfaccia di Explorer. È un insieme di complesse librerie (moduli) da collocare sul server su cui risiedono le pagine e che vengono collegate alle pagine stesse con meccanismi simili ai fogli di stile CSS o a Javascript.
Il progetto è Open Source e di recente è stato accettato su SourceForge. Nel momento in cui scriviamo è giunto alla versione 0.6.1 (alpha). Attenzione, dunque: è inevitabile che siano riscontrabili bug e malfunzionamenti e l'autore stesso consiglia di non utilizzarlo per il momento in progetti commerciali.
Non scenderemo in dettagli tecnici. Ci limitiamo a dire che il funzionamento di IE7 poggia sull'integrazione di 3 componenti: CSS, Javascript e behavior DHTML. Quest'ultima è una tecnologia proprietaria di Microsoft, introdotta con Internet Explorer 5.5 e consente l'aggiunta di sofisticati effetti dinamici alle pagine web e agli elementi HTML che le compongono.
Quello che IE7 fa concretamente è una sorta di 'traduzione', a beneficio del browser di Microsoft, di quegli elementi che quest'ultimo non è in grado di capire. Prende, ad esempio, un foglio di stile CSS, effettua il parsing e lo riscrive in una forma che Explorer riesce a interpretare e rendere correttamente. Un processo, va detto, che sacrifica leggermente le prestazioni.
Come si installa
Per testare IE7 è sufficiente scaricare un file zip di appena 48kb. Una volta scompattato, avremo a disposizione una cartella denominata IE7. Basterà copiarla e piazzarla nella root del web server, anche se si testa in locale (localhost).
A questo punto, bisogna rendere la pagine compatibili con IE7. Si dovranno inserire nella sezione <head></head> queste poche righe di codice, badando che precedano qualunque altro foglio di stile:
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<link rel="stylesheet" href="/IE7/ie7-html.css" type="text/css"/>
<![endif]-->
Le parti commentate che racchiudono l'inclusione vera e propria sono esempi di conditional comments, un'altra estensione proprietaria di Microsoft in grado di effettuare una sorta di browser sniffing senza Javascript. Gli altri browser ignoreranno tutta questa sezione.
Compatibilità
A questo punto, si può procedere alla verifica. Sul sito di Dean Edwards sono presenti diversi esempi e una completa serie di test per ciascuna delle funzioni implementate. La lista è lunga, come si vede. E a dominare sono le proprietà CSS non supportate da Explorer, dai selettori complessi a position:fixed, da max-width a pseudoclassi come :first-child e lo stato di :hover su tutti gli elementi. Il consiglio, ovviamente, è di navigare tra quelle pagine con Explorer, magari verificando la compatibilità anche con le versioni 5 e 5.5 (qui l'Tutti gli Explorer insieme su Windows sull'installazione di versioni multiple del browser sulla stessa copia di Windows).
Abbiamo preparato anche una pagina di test in cui sono state implementate quelle che giudichiamo le funzionalità più interessanti. Ecco la versione senza IE7, mentre questa è quella IE7 enabled.
Per prima cosa abbiamo voluto verificare il supporto della proprietà CSS position:fixed. Si tratta di un tipo di Posizionamento degli elementi che consente di fissare un elemento in un punto della pagina sottraendolo al flusso del documento e anche allo scrolling della pagina. È quella proprietà, per intenderci, che consentirebbe di ottenere un effetto frame senza le scomode finestre annidate.
Osservate il div con id="fixed" che fa da testata: scrollando la pagina rimane fisso in alto. Nel CSS lo abbiamo definito così:
#fixed {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 79px;
background: url(img_136.gif) repeat;
border-bottom: 2px solid black;
}
Grazie a IE7 è dunque possibile implementare anche sul browser di Microsoft una caratteristica supportata da tutti gli altri browser standard compliant. A questo punto, la decisione di usare o meno la proprietà dipende da una scelta progettuale e non dai limiti dettati dal supporto di Explorer!
Passando al corpo della pagina, ci siamo limitati ad un semplice esempio. Il primo paragrafo presenta uno sfondo grigio, diverso da quello bianco degli altri. L'effetto è ottenuto grazie all'utilizzo di un I selettori CSS dell'elemento adiacente (adjacent-sibling selector):
#box h2 + p { background: gray; }
Questa regola specifica che avrà lo sfondo grigio solo il paragrafo che nel codice HTML segue immediatamente un elemento h2. Infatti:
<h2>Box principale</h2>
<p>Donec sodales consectetuer nunc. Aenean nec augue. Curabitur commodo, felis at tristique venenatis, nunc pede luctus risus, quis...</p>
Per una panoramica più approfondita sui selettori avanzati non supportati da Explorer, si veda questo Selettori e proprietà avanzate per esempi di Alessandro Fulciniti.
Trasparenza PNG
L'ultimo aspetto su cui vogliamo soffermarci in questo articolo di presentazione non riguarda i CSS, ma è certamente tra i più importanti. IE7 garantisce anche il supporto su Explorer delle immagini PNG con trasparenza alpha. In realtà, non si tratta di un'innovazione di Edwards. Altri prima di lui avevano escogitato metodi basati su Javascript o behavior DHTML. La comodità consiste essenzialmente nel sistema di implementazione.
Nato sull'onda della vicenda relativa al brevetto del formato GIF, PNG è il formato grafico ufficialmente supportato dal W3C. Le caratteristiche che lo differenziano in maniera evidente da GIF sono il supporto di milioni di colori rispetto ai canonici 256 e della trasparenza alpha (detta anche 'variabile'). Questa si distingue da quella binaria tipica di GIF perché per ogni pixel è possibile stabilire un valore di trasparenza compreso tra 0 e 255. Nel caso della trasparenza binaria, invece, ogni pixel può essere o completamente trasparente o completamente opaco. Grazie al canale alpha, siamo in grado di realizzare immagini che si adattano perfettamente a qualunque sfondo (a tinte piatte o a texture), senza effetti di disturbo sui bordi, anche in presenza di effetti particolari come l'ombreggiatura.
Nel documento di esempio abbiamo usato due immagini PNG. La prima è il logo HTML.it. Notate come viene resa l'ombreggiatura anche su uno sfondo complesso. La cosa bella è che posso modificare la texture o usare una tinta piatta senza dovermi preocupare dell'immagine! Provate a farlo con una GIF.
La seconda immagine è un piccolo quadratino rosso salvato in formato PNG dopo aver impostato la trasparenza al 40%. È usata come texture di sfondo nella zona del menu: anche in questo caso possiamo osservare come venga mantenuta la trasparenza, effetto che ci fa 'vedere' dietro a quello del menu lo sfondo a texture del box.
Bene. Come presentazione del progetto IE7 può bastare. Ci torneremo con altri approfondimenti, continuando a seguirne l'evoluzione. Intanto, la prossima settimana, vedremo un esempio pratico di un'altra chicca resa possibile da IE7. Stay tuned!
