La scorsa settimana la Microsoft ha reso disponibile la preview della beta 2 di Internet Explorer 7. C'è da premettere che si tratta dell'anteprima di una versione beta, quindi una versione piuttosto lontana dall'essere definitiva.
Sebbene ci siano Tutti gli Explorer insieme su Windows, per ora non si dispone di un modo sicuro di far coesistere la beta2 di IE7 e le precedenti versioni del browser di casa Microsoft. Sul blog ho elencato tre possibilità ma ciascuna si può rivelare rischiosa a suo modo.
Questo articolo (insieme ai molti post presenti sul blog rigardanti IE7) vuole costituire una risorsa anche per tutti gli utenti/sviluppatori che non se la sentono di installare il nuovo browser di Redmond. Dopo una breve introduzione sulle novità riguardanti interfaccia e caratteristiche del browser, cercheremo di soddisfare la maggiore curiosità di web designer e web developer, ovvero il supporto CSS, affrontando novità, bug e strategie di sviluppo. Cominciamo subito.
Un primo sguardo
Ho preparato uno screenshot di IE7: come si può notare l'interfaccia è molto diversa dalle precedenti versioni. Molto probabilmente si tratta di una questione di abitudine, ma a primo impatto la navigazione mi è sembrata piuttosto scomoda, in particolare per la posizione dei tasti di navigazione Avanti/Indietro e del tasto di refresh.
D'altra parte ci sono molte caratteristiche notevoli. Tra queste:
- La navigazione a tab
- La possibilità di consultare e/o sottoscrivere i feed RSS in maniera molto intuitiva
- Una funzione zoom simile a quella di Opera che è in grado di ridimensionare a piacere pagine web, immagini incluse
- Il filtro anti-phishing che può rivelarsi utile per la sicurezza dei dati personali
- IE7 ha inoltre mantenuto la compatibilità con Internet Explorer Developer Toolbar.
- Viene usato il ClearType, ovvero il testo antialias, sulle pagine consultate.
- Le favicon vengono mostrate anche se il sito non figura tra i preferiti.
Queste le novità per gli utenti, ecco alcune nuove caratteristiche interessanti per gli sviluppatori:
- Supporto per il tag <abbr>
- Supporto per elementi object migliorato
- L'oggetto XMLHTTPRequest è supportato anche senza gli ActiveX proprietari
- Il supporto della trasparenza variabile delle immagini PNG
(finalmente ho potuto vedere l'esempio base di Usare il formato PNG su Internet Explorer - I senza la necessità di soluzioni proprietarie)
Dopo questa breve panoramica, possiamo senz'altro passare a ciò che maggiormente riguarda gli sviluppatori, ovvero il supporto dei fogli di stile.
Il supporto CSS
Senza dubbio la Microsoft, seppur con un leggero ritardo, si è impegnata molto sullo sviluppo di Internet Explorer 7 sul versante CSS. Il suo supporto non è di certo al pari di Opera, Firefox o Safari, ma i miglioramenti sono notevoli. Le novità CSS presenti nella beta 2 si possono suddividere in due gruppi principali: le proprietà e i nuovi valori da una parte e i selettori dall'altra. Per il primo gruppo le novità sono:
- Supporto di position: fixed
- Supporto di background-attachment: fixed su elementi diversi dal body
- Supporto della pseudoclasse :hover su tutti gli elementi, non solo sui link
In quanto ai selettori: sono diversi e molto utili quelli introdotti nella beta 2 di IE7. Li introdurrò attraverso dei semplici esempi, e rimando alle specifiche per approfondimenti.
Child selector. ad esempio ul>li in grado di indivuduare solo i list-item di primo livello (quindi i figli diretti) di una lista non ordinata.
Adjacent sibiling selector. ad esempio una regola che usa il selettore h2+p verrà applicata esclusivamente ai paragrafi preceduti da titoli h2. Condizione necessaria è inoltre che entrambi condividano lo stesso elemento padre.
Attribute selector. Ad esempio input[type="submit"] introdurrà una regola indirizzata solo agli elementi input con type="submit" nel markup. Altri esempi di possibile uso di questo potente e versatile selettore sono a[name], div[id], label[for="cognome"] e a[title="maggiori dettagli"]. Ho riscontrato alcuni problemi se questo è combinato ad esempio con il selettore discendente, ma credo che verranno sistemati.
First child. Questa pseudo classe individua il primo elemento figlio di una data sezione, per esempio li:first-child introdurrà una regola specifica solo per i primi elementi di tutte le liste di una pagina html.
I bug risolti
Sono davvero molti i bug e i problemi di resa presenti in IE5.x e in IE6 che sono stati risolti in IE7: tra questi la maggiorparte di quelli documentati su PositionIsEverything, di cui una piccola parte è presente anche in questo articolo sulla risoluzione dei problemi CSS su PRO. Alcuni di questi bug saranno noti agli appassionati e sviluppatori CSS, e sono stati spesso fonte di problemi di resa sulle versioni precedenti di IE7. Ecco l'elenco dei bug risolti in IE7, tratto da questo post di IEblog:
- Peekaboo bug
- Guillotine bug
- Duplicate Character bug
- Border Chaos
- No Scroll bug
- 3 Pixel Text Jog
- Magic Creeping Text bug
- Bottom Margin bug on Hover
- Losing the ability to highlight text under the top border
- IE/Win Line-height bug
- Double Float Margin Bug
- Quirky Percentages in IE
- Duplicate indent
- Moving viewport scrollbar outside HTML borders
- 1 px border style
- Disappearing list-background
- Fix width:auto
Una lista non indifferente: questo non significa purtroppo che IE7 non sia libero da bug, ma praticamente tutti i bug che hanno reso difficili sviluppo e test su IE6 e IE5.x sono stati risolti. Quei bug che hanno indotto spesso l'introduzione di hack, filtri e workaround per una resa perfetta su le versioni più anziane di IE ora sono stati risolti.. ma quale effetto avranno su IE7? Cercheremo di scoprirlo subito.
Gli hack/filtri non più supportati
Sostanzialmente hack, filtri e workaround CSS per la risoluzione dei bug fino a IE6 hanno sempre fatto leva sul mancato supporto e/o problemi del parser CSS dei browser di casa Microsoft. Nell'aggiungere supporto e aderenza agli standard CSS in IE7, gli sviluppatori hanno deciso di risolvere anche problemi del parser CSS. In questo articolo di MSDN vengono documentati gli hack e i filtri non più supportati in IE7, che sono:
- * html hack
- _underscore hack
- Empty comment filter, del tipo proprietà /**/: valore
Avendo esteso il supporto dei selettori in IE7, le regole usate per nascondere proprietà CSS a IE fino alla versione 6, ovvero i workaround basati sul child selector o l'adjacent sibiling selector verranno riconosciute su IE7. Ad esempio le seguenti:
- html>body ...{
- head+body ...{
- head:first-child + body ...{
In sostanza, una buona parte di hack e workaround avrà lo stesso effetto che ha su browser standard-compliant quali Opera, Firefox e Safari. Questo è positivo, dato che IE7 non soffre più dei bug di cui sono affetti le versioni precedenti, e ha un supporto dei CSS decisamente migliore. Resta comunque l'eventualità che alcuni hack e workaround usati per sistemare la resa su IE5.x e IE6 abbiano un effetto negativo su IE7. C'è da preoccuparsi? E come muoversi? È il prossimo argomento.
Strategie di sviluppo
Molto probabilmente siti che hanno una buona resa su IE6, Opera, Firefox e Safari non avranno problemi sulla versione definitiva di IE7. Riscontrare problemi di resa sull' anteprima della beta 2 di IE7 non deve indurre gli sviluppatori ad allarmismi: c'è da considerare infatti che si tratta, come ho detto in apertura, di una versione lontana dall'essere considerata definitiva, e che molto probabilmente al momento usata esclusivamente da sviluppatori e beta tester.
Cercare di sistemare siti esistenti al momento è quindi forse un po' prematuro: nel momento in cui uscirà la versione definitiva di IE7 la sua diffusione nell'utenza sarà comunque piuttosto lenta e si avrà il tempo di sistemare, evitando di fare doppio lavoro.
È invece un'ottima pratica di sviluppo premunirsi per siti di nuova creazione. A parer mio una strategia che può rivelarsi efficace è tenere il foglio di stile principale il più libero possibile da hack e workaround, e testare la resa sulle ultime versioni di Opera, Firefox e Safari. Se si dovessero riscontrare problemi IE5.x e IE6 potrebbe essere una strategia efficace. E nel momento in cui si dovessero riscontrare problemi sulla versione definitiva di IE7, anche in questo caso il commento condizionale potrebbe essere la migliore soluzione adottabile. Ecco il set di commenti condizionali per IE5.x, IE6 e IE7:
<!--[if lte IE 5.5]> CSS specifico per IE 5.0 e 5.5 <![endif]-->
<!--[if IE 6]> CSS per IE 6 <![endif]-->
<!--[if IE 7]> CSS per IE 7 <![endif]-->
C'è da evidenziare che in caso di diverse versioni di Internet Explorer installate, il commento condizionale le riconoscerà tutte come la maggiore installata: una piccola difficoltà facilmente sormontabile a fronte di una strategia permette la stesura di un CSS primario libero da hack, e uno sviluppo stratificato per le varie versioni di IE.
I bug noti o in via di risoluzione
Al momento sono davvero pochi i bug di IE7 documentati. Il primo e forse più evidente il mancato supporto di a:hover per le regole immerse in fogli di stile attraverso la direttiva @import, bug che è già stato sistemato dal team di sviluppo Microsoft e sarà scomparso nelle prossima versione di IE7, sia esso un'altra beta oppure la versione definitiva.
Ci sono alcuni problemi di box model relativi ad elementi posizionati assolutamente con dimensioni e padding espliciti, ma dovrebbero essere risolti.
Non è ancora stata sistemata la questione riguardante la parola chiave !important non correttamente implementata in IE fino alla versione 6 e nella beta 2 di IE7, ma a quanto pare l'IE team ci sta lavorando.
Infine un problema noto anche su IE5.x e IE6, ovvero uno spazio verticale extra e indesiderato tra i list-item che contengono elementi block level, per esempio in menu i cui link hanno display:block. Non so se verrà sistemato, ma è facilmente risolvibile specificando una delle due dimensioni dei link.
Cosa manca in IE7
Anche se le novità sono molte, purtroppo IE7 sembra ben lontano da browser quali Opera, Firefox e Safari: ci sono alcune proprietà e caratteristiche dei CSS che ogni sviluppatore vorrebbe implementate e che forse non lo saranno. Tra questi le proprietà min-height, max-height,min-width e max-width, gli pseudo elementi :before e :after, la pseudo classe :focus solo per restare in ambito CSS di livello 2.1.
Il primo hack per IE7
In dirittura d'arrivo di questo lungo articolo, segnalo una curiosità, ovvero il primo hack per IE7. Non essendo noti molti bug di IE7, al momento difficilmente potrà trovare applicazione pratica, e come al solito se proprio dovete sistemare le cose su IE7, consideratelo solo come ultima spiaggia.
Approfondimenti e conclusioni
Sono moltissime le fonti usate in questo articolo. Oltre a quelle linkate nella sua stesura, da citare in primis è IEblog, il blog del team di sviluppo di IE7 puntualmente aggiornato su novità e caratteristiche e la pagina su IE7 della CSS-discuss che contiene link a risorse, test e approfondimenti.
Si conclude qui questa ampia panoramica dedicata a IE7 in cui abbiamo visto le nuove caratteristiche CSS di cui dispone; per ora è totalmente assente una documentazione ufficiale del supporto di Ecmascript e DOM, che avrei voluto poter trattare. Passerà del tempo prima che la versione definitiva venga rilasciata, ma abbiamo ritenuto necessario presentare in anteprima alcune delle novità. Ulteriori approfondimenti seguiranno, qui su PRO oppure su <edit>. Alla prossima.
