IE8 e il prefisso CSS -ms-

Chiariamo subito cosa si intende qui per prefisso CSS. Quando i produttori di browser introducono il supporto per proprietà /estensioni CSS proprietarie o comunque comprese in specifiche W3C che non abbiano raggiunto uno stato avanzato come Last Call o Candidate Recommendation, tali proprietà  vengono fatte precedere da un prefisso specifico per ciascun browser. Per esempio, le trasformazioni CSS introdotte su WebKit vengono così definite in un CSS:

-webkit-transform: translate(3em,0);

E ancora, quando sull'ultimo Firefox è stato introdotto il supporto per la proprietà  CSS3 box-shadow, la sintassi adottata è stata la seguente:

-moz-box-shadow: 10px 10px 5px #888, 10px 10px 30px rgba(0,0,0,0.4);

dove -moz- è il prefisso specifico di Mozilla Firefox.

Come specificato in questo post apparso su IEBlog, a Microsoft hanno pensato di adeguarsi alla tendenza in nome di una maggiore aderenza agli standard e alle buone pratiche ad essi associate.

L'interevento comprende una tabella che elenca tutte le proprietà /estensioni CSS che in IE8 (in modalità  Standard) dovranno essere precedute dal prefisso -ms- per essere rese come desiderato. Si tratta per lo più (correggetemi se sbaglio) di proprietà  molto di nicchia, tranne forse una: filter. Proprio ad essa, infatti, si può ricorrere per ottenere sul browser di Microsoft gli effetti di trasparenza che altrove si ottengono con opacity.

In pratica, si passa da

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2);

a

-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2);

Per far sì che tutti gli utenti, quelli di IE8 e quelli delle versioni precedenti, continuino a fruire le pagine nel modo corretto si procederà , come da esempio allegato, in questo modo:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
       filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
       opacity: .5;

usando anche opacity per gli altri browser.