[PHP – CSS] Fogli di stile condizionali

I fogli di stile li conosciamo tutti ormai. Semplici file contenenti istruzioni in grado di modificare l’aspetto di una pagina web. I vantaggi di implementazione sono innumerevoli.

Senza dimenticare che oramai i CSS sono praticamente richiesti dagli standard più avanzati, questi non devono però essere visti come un qualcosa da utilizzare perchè lo dice il W3C. Usare i CSS permette di costruirsi un telecomando su misura del proprio sito web. Astraendosi dal contenuto vero del sito web è possibile controllarne ogni elemento grafico. Spostare interi settori, controllare i tag più comuni, settare delle classi di stile ripetute per centinaia di volte con una istruzione di poche righe.

Vi basti pensare che senza il foglio si stile questo blog sarebbe praticamente illeggibile 🙂

Ma come molti linguaggi web based, anche i CSS scontano la problematica di essere interpretati lato client. I fogli di stile vengono gestiti direttamente dal browser del visitatore che richiede la pagina.

Facile capire che la visualizzazione vera e propria della pagina dipenderà da come il browser del client interpreterà le istruzioni inserite nel nostro CSS. Ed è tristemente noto come molto spesso Internet Explorer decida di leggere a modo suo i CSS, con risultati del tutto imprevedibili. Ma la cosa può capitare anche con altri browser e non sorprenda se spesso è proprio Opera ad essere il browser che ha bisogno di maggiori aggiustamenti in tal senso.

In definitiva capita praticamente sempre che per ottenere lo stesso risultato si debbano settare regole differenti per differenti browser.

Nonostante da Redmond dicano che l’interpretazione dei CSS del loro browser sia fantastica, gli ingegneri Windows si sono presi la briga di abilitare su Internet Explorer (da IE5) i commenti condizionali. Semplici commenti HTML che racchiudendo determinate istruzioni vengono interpretati come codice solo da Internet Explorer.

<!–[if IE]>
<link rel="stylesheet" href="style_IE.css" />
<![endif]–>

In questo modo, se e solo se il browser sarà Internet Explorer il link al foglio di stile aggiuntivo verrà scaricato e interpretato.

Ma non basta, visto che ad ogni nuova versione di Internet Explorer cambia il mondo, è stato abilitato anche l’uso del version. Quindi per abilitare un nuovo foglio di stile esclusivo per IE7 basterà inserire nei tag del head.

<!–[if IE 7]>
<link rel="stylesheet" href="style_IE.css" />
<![endif]–>

Un modo un po’ più radicale di condizionare i fogli di stile è quello di crearli via script. E’ infatti possibile con qualsiasi linguaggio server side produrre output CSS che sfrutti le preerogative di programmazione lato server. In questo modo si può avere controllo quasi totale ed un risultato sicuramente più certo.

Proviamo a fare il tutto con il PHP. Apriamo un file di testo e chiamiamolo style.php. Lanciamo immediatamente un header che qualifichi il file come foglio di stile per qualsiasi browser.

header("Content-type: text/css");

Al suo interno possiamo inserire piccole funzioni che ci permettano il detect del browser del client e quindi il relativo output del file.

  function isIE7(){
     if(eregi(‘msie 7’,$_SERVER[‘HTTP_USER_AGENT’]) && !eregi(‘opera’, $_SERVER[‘HTTP_USER_AGENT’]))
        return true;
  }

  function isIEold(){
     if(eregi(‘msie’,$_SERVER[‘HTTP_USER_AGENT’]) && !eregi(‘opera’, $_SERVER[‘HTTP_USER_AGENT’]) && !eregi(‘msie 7’, $_SERVER[‘HTTP_USER_AGENT’]))
        return true;
  }
 
  function isIEAll(){
     if(eregi(‘msie’,$_SERVER[‘HTTP_USER_AGENT’]) && !eregi(‘opera’, $_SERVER[‘HTTP_USER_AGENT’]))
        return true;
  }
 
  function isOpera(){
     if(eregi(‘opera’, $_SERVER[‘HTTP_USER_AGENT’]))
        return true;
  }

A questo punto, con semplicissimi cicli if, possiamo stabilire regole speciali per ogni browser.

body{
  margin:auto;
  <? if(isIEAll()): /*Istruzioni Speciali per ogni versione di IE*/ ?>
    margin:0;
    padding:0;
  <? endif; ?>
}

Solo un esempio banale. Giochicchiandoci un po’ è possibile pensare qualcosa di molto più usabile in termini di programmazione. E non dimenticate mai che i CSS vengono interpretati from top to bottom. Quindi un’istruzione successiva sovrascriverà sempre la precedente almeno che non si usi !important *.

* L’istruzione !important non è ben gestita da Internet Explorer.