Quante volte ci è capitato di notare differenze di stili su siti web a seconda del Browser utilizzato?

Come ben saprete, purtroppo i diversi browser in circolazione non interpretano il codice CSS allo stesso modo.

La soluzione per risolvere questo inconveniente è creare dei Conditional-CSS!

Fogli di Stile (CSS) che hanno la funzione di verificare tramite condizioni la versione del browser e di conseguenza attivare o meno alcune proprietà alla classe.

Vediamo insieme la sintassi del codice da inserire nei nostri CSS

Ecco un esempio di Conditional-CSS:

.box {
width: 400px;
[if IE 6] width: 600px;
padding: 100px 0;
}

In questo caso se il browser prescelto sarà Internet Explorer 6 la larghezza della nostra classe chimata box sarà larga 600 pixel altrimenti 400 pixel

Sintassi Base

[if {!} browser]

[if IE] oppure se è diverso da IE6 [if ! IE]

[if {!} browser version]

[if IE 6] oppure se è diverso da IE6 [if ! IE 6]

[if {!} condition browser version]

[if lt IE 6] oppure se non è Minore di IE6 [if ! lt IE 6]

Browser

  • IE - Internet Explorer
  • Gecko - Gecko based browsers (Firefox, Camino etc)
  • Webkit - Webkit based browsers (Safari, Shiira etc)
  • Opera - Opera’s browser
  • IEMac - Internet Explorer for the Mac
  • Konq - Konqueror
  • IEmob - IE mobile
  • PSP - Playstation Portable
  • NetF - Net Front

Condizioni

  • lt - Minore di
  • lte - Minore di o Uguale a
  • eq - Uguale a
  • gte - Maggiore di o Uguale a
  • gt - Maggiore di

Per quanto riguarda l’inclusione di fogli di stile su piattaforme server come PHP, C, C# è possibile utilizzare il sito opensource conditional-css.com

Il sito permette di compilare automaticamente in due sempici click i codici necessari per adoperare o includere CSS condizionati ottimizzati al meglio

Ecco una pagina demo in cui potremo vedere l’utilizzo di un CSS condizionale a seconda del browser usato per visualizzare la pagina.

Condividi su:
  • del.icio.us
  • Digg
  • Facebook
  • Upnews
  • Wikio IT
  • Segnalo
  • Sphinn
  • StumbleUpon

, , , , ,