Dinamicizzare un file CSS con PHP

Questa volta ho preso spunto dal mio vecchio sito personale in cui avevo messo a disposizione un piccolo tool per webdesigner per testare online in tempo reale le proprie immagini di background, resa grafica, ripetizione, peso, etc... il tutto gestito da un piccolo form di upload che consentiva di settare alcune variabili richiamate dal css dinamico che avevo predisposto.
Dinamicizzare un file CSS con PHP

Introduzione all’articolo

All’epoca in cui scrissi questo tool feci parecchie ricerche in merito e oggi in questo articolo vorrei cercare di ripercorrere i passi fondamentali che mi hanno portato alla creazione di questo tool (non più online), in modo tale che possa essere preso come esempio per sviluppare altre varianti sulla base dello stesso concetto. Non mi soffermerò quindi molto sull’aspetto PHP della questione. Lascio a voi backender il compito di concluderlo come meglio crediate.

Travestiamo il nostro file css

Come può un file css riconoscere una tale sintassi? Molto semplice, dovendo noi scrivere sintassi php, l’estensione del nostro file non dovrà essere css ma php. In questo modo sarà possibile inserire qualsiasi istruzione all’interno del file senza incorrere in alcun errore di validazione. Nella sezione head del nostro sito potrà essere richiamato come un qualsiasi css con la classica sintassi a cui siamo abituati:

<link href="/css/body.php" rel="stylesheet" type="text/css" />

Entra il gioco la notazione Heredoc

Il problema si capovolge all’improvviso. Come inserire sintassi CSS all’interno di un file PHP? All’epoca della mia ricerca non sapevo come fare ma questo articolo mi aprì la strada per continuare. Ringraziamo quindi mainickweb.com per l’aiuto prezioso. Vi quoto il pezzo che ci interessa:

Le stringhe heredoc si comportano come le stringhe delimitate da vingolette doppie anche se non è necessario applicare l’escaping ad altrettanti caratteri: è sufficiente effettuare l’escaping dei caratteri $.

In questo caso una stringa inizia con “< <<" e un identificatore e continua finché PHP non incontra una riga di testo di input che consiste solo nello stesso identificatore allineato a sinistra e in un punto e virgola, senza spazi prima o dopo il (;). L'identificatore ha un unico vincolo: deve contenere solo lettere, numeri e underscore e il primo carattere deve essere una lettera o un underscore.

echo <<<CSS
   Qui vanno inserite le stringhe di testo (css/js/html ...)
CSS;

Nel caso di stringhe di un certo ‘peso’, la notazione heredoc è sicuramente il migliore delimitatore di stringhe: è l’ideale per la stesura di grossi blocchi di codice html o javascript (da inviare poi con un unico comando ‘echo’) pur mantenendo un certo ordine di codifica.

Ecco nel completo il nostro file (quasi) css

Il codice, per chi mastica un po di php di base, è abbastanza semplice. Viene inclusa la connessione al db, viene settato il tipo di header che deve avere il file, in questo caso deve essere di tipo text/css. Viene poi eseguita la query al db verso la tabella dedicata al tool (background) e infine vengono create le variabili che ospiteranno i risultati della query, variabili che poi andranno a sostituirsi ai valori statici delle proprietà CSS. Infine si inserisce la notazione Heredoc con al suo interno il codice css dinamico.


include("connection.php");

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

$db_select	= mysql_select_db($database);
$query		= "SELECT * FROM background ORDER BY id DESC";
$result		= mysql_query ($query);
$row		= mysql_fetch_array($result,MYSQL_ASSOC);

$file		= $row ['immagine'];
$repeat		= $row ['ripeti'];
$attachment	= $row ['attachment'];
$left		= $row ['sinistra'];
$top		= $row ['sopra'];
$color		= $row ['colore'];

/* Inizio stringa heredoc */
echo <<<CSS

body {
    background-image:url(../img/upload/$file);
    background-repeat: $repeat; 
    background-attachment: $attachment;
    background-position: $left $top;
    background-color: $color;
}

CSS;
/* fine stringa heredoc */

Il nostro file css dinamico è pronto! Passiamo al prossimo step.

Facciamo interagire l’utente del sito con il nostro CSS

Adesso non devi far altro che predisporre la struttura html per far si che un utente possa popolare il database! Il file in questione ospiterà il form di caricamento dell’immagine di background più altri settaggi per comandare il background della pagina stessa, ma come ti dicevo prima le interazioni possono essere molteplici, questa è solo una delle tante.

Conclusioni

Questo non è sicuramente l’unico metodo per dinamicizzare un file CSS, ma è quello che io usai per il mio script. Ho saltato volutamente tutta la parte di gestione del form o di quello che più vi risulterà utile usare per passare dinamicamente dei valori a delle proprietà CSS. Adesso sta a te vedere se può esserti utile o meno e nel caso completarlo.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github