A volte capita di dover impostare alcuni attributi nei fogli di stile in maniera differente a seconda dei browser. Ad esempio, volendo utilizzare un’immagine png trasparente come sfondo mi è capitato di dover applicare regole diverse per Mozilla/Firefox ed Internet Explorer.
Esempio:
.miaclasse {
padding:3px;
margin:3px;
border:1px solid #666;
/* Il tag seguente imposta la proprietà float solo per IE */
float: expression("left");
/*background-color:#eeeeee;*/
/* Mozilla e Firefox ignorano il tag seguente */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='fileadmin/images/news_bg.png');
}
/* Internet Explorer ignora gli stili se vengono specificati gli attributi con le parentesi quadre. */
.miaclasse[class] {
background-attachment: scroll;
background-image: url(fileadmin/images/news_bg.png);
}
In pratica il primo stile ha una parte comune a tutti i browser e alcune voci solo per IE. Il secondo invece non viene interpretato da IE ma solo dagli altri.
Libri consigliati sull’argomento:
Cascading Style Sheets: la guida completa