Internet Explorer 9 , CSS 3, Opacity Alpha e Browser detection code

Article
10/13/2010

Nei precedenti post dedicati a IE9 ho introdotto le caratteristiche della integrazione con Windows 7 e gli aspetti principali presenti in questa nuova versione del browser . Per chi volesse approfondire vi consiglio di seguire l'evento in live streaming dedicato al tema .

Tra i punti più importanti abbiamo parlato del grande supporto dedicato ai nuovi standard web quali come HTML5, CSS3, SVG e ECMAScript5, che in combinazione consentono agli sviluppatori di creare una nuova generazione di applicazioni Web, sempre più ricche ed interattive.

In particolare relativamente al CSS già con Internet Explorer 8 era già stato fatto un grandissimo lavoro, IE è il browser che implementa praticamente in modo completo il CSS 2.1 e un ottimo lavoro con la versione 9 è stato fatto nell'implementazione di quelle parti del CSS 3 che nella specifica hanno raggiunto un buon livello di maturità nella definizione. Sulla parte di Standard e verifica della compatibilità, sono stati sviluppati migliaia di test ( soltanto con quesat beta ne sono stati aggiunti 569 e in totale ben 7200 solo per il CSS ) che sono stati anche sottomessi al W3C come contributo nella semplificazione della verifica dell'aderenza alle specifiche dei diversi browser, contribuendo in modo significativo a rendere più semplici la vita degli sviluppatori nel poter realmente scrivere del markup che abbia poi lo stesso comportamento sui diversi browser. Sul sito IE Testing Center potete trovare un riepilogo dei nuovi test che vengono mano a mano creati e i risultati di compatibilità per questi test dei vari Browser.

Relativamente al CSS3 le nuove feature implementate nella Beta di IE9 sono le seguenti:

· Rounded corners con la border-radius property

· CSS3 background e border features

· La opacity property

· Modelli di colore RGBA, HSL, e HSLA

· CSS3 fonts e nuovi web font formats

· CSS3 media queries

· CSS3 namespaces

· CSS3 values e units

· CSS3 selectors

· Supporto per CSS3 2D Transformation (Aggiunto
con la preview 6 successiva alla beta)

IE9 come descritto sopra , implementa il CSS3 Color Module e in questo post in particolare cerco di illustrare la proprietà Opacity e alpha, attraverso la quale è possibile gestire attraverso uno style, in modo standard, sia vi JS che nella definizione di uno specifico stile per l’appunto la trasparenza di uno specifico elemento. Le versioni precedenti di IE supportavano questa feature attraverso l’utilizzo di una proprietà chiamata filter e l’utilizzo del alpha su questo canale. Importante sottolineare che quando lavora con un document mode in compatibilità con le versioni precenti e non in standard mode, applica il comportamento delle versioni precedenti di Explorer e quindi il filter, mentre quando lavora in standard mode mette a disposizione la proprietà opacity ma non la precedente proprietà filter.

Per utilizzare questa feature con uno stile, garantendo la compatibilitò con le versioni precedenti di Explorer si può utilizzare una definizione come nel seguente esempio dove viene applicata una opacity del 70%:

.opaque
{
opacity: 0.7;
filter: alpha(opacity=70);
}

E’ possibile utilizzare la proprietà anche inline:

E sfruttando anche gli eventi onmouseover e onmouseout direttamente in line:

La descrizione dell’utilizzo via JS di questa funzionalità in compatibilità con anche le versioni precedenti di IE9 mi da anche lo spunto per un buon esempio di come convenga ragionare nello sviluppo del nostro codice , rispetto alle implementazioni di specifice feature per la compatibilità versoi diversi browser o l’utilizzo di caratteristiche alternative ad una specifica funzionalità.

Nel caso di script più complessi del precedente , in molti casi come sviluppatori tendiamo a verificare quale tipo di approccio usare per una specifica azione , riconoscendo il tipo di browser per poi decide se applicare o meno una feature piuttosto che un’altra. Questo tipo di approccio per l’applicazione di una specifica feature è noto come “Browser Detection code”. Ad esempio, nel caso specifico avremo sicuramente codice in giro su Internet che decide se applicare opacity o filters andando a riconoscere il tipo di browser, qualcosa tipo: se il browser è IE applica filter , altrimenti usa Opacity.

Questo tipo di approccio è assolutamente sconsigliabile, non solo per questo caso ma per la maggioranza degli senari e delle situazioni ed è fonte di moltissimi errori e di codice che continua ad applicarsi in modalità superate o meno efficienti. Nell’esempio appena fatto, con l’uscita di IE9 che invece supporta l’opacity, nel caso in cui IE9 lavora in standard mode, il codice con la browser detection applicherebbe il filter, generando così un malfunzionamento della nostra pagina.

La modalità corretta da applicare è quasi sempre il riconoscimento dell’implementazione della feature da parte del browser e non il tipo di browser, pattern conosciuto come “Feature Detection Code” .

Per esempio in questo caso, possiamo verificare con la definizione di una variabile come la seguente se il browser supporta o meno la property opacity o in alternativa la proprietà filter:

.
var isOpacityReady =
(typeof document.createElement("div").style.opacity != 'undefined');

var isFilterReady = !useOpacity
&& (typeof document.createElement("div").style.filter != 'undefined');

Si può poi implementare una funzione setOpacity che, verifica lo stato delle variabili e applica sull’elemento specificato come parametro il livello di trasparenza richiesto. Di seguito una possibile implementazione di questa funzione :

function setOpacity(el, value) {

if (typeof el == 'string')
el = document.getElementById(el);

value = Math.min(1, Math.max(value, 0));

if (isOpacityReady)
el.style.opacity = value;
else if (isFilterReady)
el.style.filter = "alpha(opacity=" + (value * 100) + ")";
}

In questo modo il codice è più robusto e non è dipendente dalle varie release dei Browser che arriveranno in futuro e continuerà a funzionare correttamente nel tempo.

· Supporto per CSS 2D Transformation (agginto a partire dalla preview 6 di IE9 successiva alla Beta)

Internet Explorer 9 , CSS 3, Opacity Alpha e Browser detection code

Additional resources