Poter utilizzare variabili in CSS è da sempre un legittimo desiderio per i webdesigner, questo infatti potrebbe permettere una maggiore interazione con le nostre pagine altrimenti impossibile. Negli ultimi anni è stato sviluppato qualche framework come Sass, definito un’estensione CSS3, che permetta di giocare con elementi più “programmatici” del solito. Tuttavia credo che poter interagire direttamente sul nostro css utilizzando il ben più noto PHP sia una pratica da conoscere. Vediamo quindi come fare. Per concludere vedremo anche come comprimere i file css sempre utilizzando php, in modo rapido ed efficace.

Impostare variabili CSS tramite PHP

Invece di utilizzare l’estensione .css nel tag <link> utilizziamo l’estensione .php e creiamo quindi un file chiamato style.php da associare alla nostra pagina di partenza:

<link rel='stylesheet' type='text/css' href='css/style.php' />

All’inizio del file appena creato re-impostiamo quindi il Content-type correttamente su text/css:

< ?php header("Content-type: text/css; charset: UTF-8"); ?>

E’ importante che questa sia la prima dichiarazione del nostro file, altrimenti, se prima di questo vi fossero altri output, incapperemmo nell’errore “Cannot modify header information”.
Possiamo quindi ora settare le nostre variabili e procedere con la stesura del nostro foglio stile completo:

<?php
    header("Content-type: text/css; charset: UTF-8");
 
   $coloreBrand = "#990000";
   $coloreLink = "#555555";
   $siteURL = "https://www.gleenk.com";
 
#header {
   background: url("<?php echo $siteURL ?>/images/header-bg.png") no-repeat;
}
a {
  color: < ?php echo $coloreLink; ?>;
}
ul#main-nav li a {
  color: < ?php echo $coloreLink; ?>;
}
 
?>

Le possibilità di utilizzo di questa tecnica sono potenzialmente molte ma, forse, quella che più potrebbe interessarci in questa sede è la possibilità per l’appunto di interagire con i nostri documenti e cambiare gli stili a seconda di alcune condizioni. Il tutto lato server. Gran bella cosa!

Se la tecnica non funziona… ci aiuta l’htaccess

Nel caso si verificassero dei problemi di funzionamento del file style.php (solitamente ciò accade quando si utilizza un CMS) occorre ricorrere ad un trucchetto. Lasciamo il nome del nostro foglio stile come “style.css” e linkiamolo come tale. Tramite .htaccess faremo in modo che venga trattato come un file .php utilizzando la seguente dichiarazione:

<filesmatch "^.*?style.*?$">
SetHandler php5-script
</filesmatch>

Comprimere il css con PHP

Se oltre a poter utilizzare delle variabili ci interessa effettuare la compressione del nostro css senza utilizzare script esterni (come PHP Minify) sarà sufficiente strutturare l’inizio del nostro style.php così:

<?php
    ob_start ("ob_gzhandler");
    header("Content-type: text/css; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60 ;
    $ExpStr = "Expires: " .
    gmdate("D, d M Y H:i:s",
    time() + $offset) . " GMT";
    header($ExpStr);
?>
body { color: red; }

In questo modo potremo utilizzare il nostro file style.php sia per gestire eventi in seguito a certe condizioni che comprimere il nostro file per ridurne il peso finale ed ottimizzare quindi la velocità di caricamento del nostro sito.
I codici dell’esempio sono tratti da css-tricks.com