Trucchi coi CSS  

A volte capita di dover impostare alcuni attributi nei fogli di stile in maniera differente a seconda dei . 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 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


Condividi questo post con gli altri:
  • co.mments
  • del.icio.us
  • BarraPunto
  • E-mail this story to a friend!
  • Facebook
  • Google
  • Segnalo
  • StumbleUpon
  • Technorati


4 Commenti a “Trucchi coi CSS”

  1. 1
    ilPestifero il

    Ciao!
    Dove posso trovare altri “escape” per internet explorer tipo quelli da te indicato “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=’fileadmin/images/news_bg.png’);” o ” float: expression(”left”);”.
    Il css rimane ancora valido o no??



  2. 2
    Tiziano il

    In questa pagina puoi trovare altri effetti per Internet Explorer.
    Poi questa è una tecnica che io ho usato per un caso specifico, però può essere adattata a tutti gli scenari, serve solo a realizzare tag che vengono interpretate o ignorate da un borwser specifico.



  3. 3
    ilPestifero il

    Grazie mille!
    In pratica sono degli hack proprietari…
    Converrà utilizzarli?



  4. 4
    Tiziano il

    I vari filter:progid …etc… sono un’invenzione Microsoft.
    Secondo me è bene usare queste “tecniche” solo se vuoi ottenere un risultato particolare e mantenere comunque la compatibilità coi vari browser.
    Io ad esempio ho usato il “filter:progid:DXImageTransform.Microsoft.AlphaImageLoade…” per far fare qualcosa a IE che invece a Firefox veniva naturale.



Scrivi un commento