CSS  »  Articoli  »  CSS hack e tecniche cross browser 

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.

Altri articoli

Altre guide

Altre newsletter