Eccoci all’ultimo appuntamento di questa serie dove ci occuperemo di applicare una conversione aggiuntiva del codice aggiungendo nuove regole per i browser che offrono varianti proprietarie a altre funzioni utili per la conversione dei colori.
cssmin
cssmin è una libreria gratutita che ha come obiettivo principale la minificazione del codice css, ma che ha anche la funzionalità aggiuntiva di aggiungere alcune varianti delle regole dei browser.
Molte nuove regole introdotte dalla versione 3 dello standard CSS vengono supportate infatti dai browser tramite regole con dei prefissi, diversi per ogni browser.
As esempio la regola border-radius, sui browser mozilla sarà -moz-border-radius e sui browser webkit -webkit-border-radius. I prefissi come -moz e -webkit vengono anche detti vendor prefixes.
Aggiungiamo quindi questa libreria alla nostra applicazione, scaricando l’ultima versione e inserendola in lib/cssmin.php.
Aggiungiamo in cima allo script css.php l’inclusione della libreria:
[php]
<?php
require_once(‘bootstrap.inc.php’);
require_once(‘cleancss.php’);
require_once(‘cssmin.php’);
[/php]
e applichiamo la conversione appena prima di salvare il file di cache:
[php]
// minificazione + aggiunta vendor-prefixes
$csscontent = CssMin::minify($csscontent, array(
‘convert-css3-properties’ => true,
‘convert-color-values’ => true,
‘compress-color-values’ => true,
‘compress-unit-values’ => true
));
file_put_contents($cachefile, $csscontent);
[/php]
e il gioco è fatto!
Manipolazione dei colori dinamica
Questa tecnica prevede l’uso di una libreria made in Artera basata sul modulo pecl imagick, al quale aggiunge una classe e delle funzioni per la manipolazione dei valori HSL (Hue, Saturation, Lightness/Luminosity) dei colori, invece del classico RGB.
Con questo sistema è più semplice ottenere una variante di un altro colore. Ad esempio è possibile schiarire o scurire un colore, aumentando o diminuendo il parametro Luminosity. Modificando la Saturation si può ottenere un colore di intensità diversa e con Hue possiamo variarne la tonalità.
I prototipi delle funzioni disponibili sono (pseudo-code):
[php]
$string function hue_add($color, $value);
$string function hue_multiply($color, $multiplier);
$string function saturation_add($color, $value);
$string function saturation_multiply($color, $multiplier);
$string function luminosity_add($color, $value);
$string function luminosity_multiply($color, $multiplier);
[/php]
Sarà sufficiente includere la libreria (che trovate nella cartella lib/ nell’archivio da scaricare in fondo all’articolo) in css.php:
[php]
require_once(‘bootstrap.inc.php’);
require_once(‘cleancss.php’);
require_once(‘cssmin.php’);
require_once(‘color_utils.php’);
[/php]
per poter disporre delle funzioni dentro i template smarty dei ccss.
Ad esempio:
[css]
{$color = “#FF0000”}
h1:
color: {$color}
h2:
color: {$color|luminosity_multiply:1.1}
h3:
color: {$color|luminosity_multiply:1.2}
[/css]
ottenendo, il risultato minificato:
[css]
h1{color:#f00}h2{color:#FF1A1A}h3{color:#f33}
[/css]
Conclusioni
Abbiamo realizzato in questi giorni un sofisticato sistema di gestione dei CSS con buone performance ed in grado di offrire delle funzioni per semplificare la vita a chi deve modificare di la grafica dei siti internet e nel farlo abbiamo colto l’occasione per implementare concretamente alcune delle tecniche imparate in articoli precedenti.
Questo sistema può essere facilmente adattato per ottenere risultati simili anche nella gestione dei javascript, riducendo il numero di richieste e minificando il sorgente. Potrei mostrarne l’implementazione in un futuro articolo.
Il codice sorgente finale di questa serie di articoli è disponibile come sempre per il download.
