Iniziamo oggi una nuova serie di post su come gestire al meglio i CSS dei nostri siti internet, descrivendo in dettaglio la nostra metodologia di sviluppo che apporta notevoli vantaggi sia alla manutenibilità del codice, che alle performance del nostro sito.
Quello che andremo a realizzare è uno script che sfrutta diverse tecnologie per ottenere il miglior risultato possibile:
- Sintassi razionalizzata con l’uso di CleanCSS
- Unione di più CSS in un’unica risorsa per ridurre il numero di richieste HTTP
- Cache statica del CleanCSS convertito in CSS semplice
- Utilizzo degli ETag per sfruttare al meglio la cache dei browser
- Aggiunta automatica delle varianti dei browser (-webkit, -moz, -o) di alcune regole CSS come border-radius, box-shadow, etc… partendo dalla versione standard
- Minificazione del CSS con cssmin
- Manipolazione dinamica dei colori con Smarty 3 e ImageMagick
Risultato finale
Per rendere l’idea di quale sarà il risultato finale, ecco un piccolo esempio:
Supponendo di chiamare il nostro script css.php e dati i 2 file sorgenti, main.ccss e tab.ccss, in formato CleanCSS:
main.ccss
[css]
{$blue = ‘#008FF9’}
#main:
float: left
margin-right: 60px
h1:
font-size: 18px
header:
line-height: 30px
footer:
font-size: 14px
p:
color: {$blue}
&.test1:
background-color: {$blue|luminosity_multiply:1.5}
border-radius: 4px
[/css]
tab.ccss
[css]
table:
box-shadow: 1px 1px 2px black
th, td:
vertical-align: middle
&.highlight:
background-color: yellow
th:
font-weight: bold
[/css]
utilizzando il seguente codice html per includere il css
[html]
<link rel=”stylesheet” href=”/css.php?f=main,tab” type=”text/css” />
[/html]
otterremo il seguente risultato (minificazione omessa per non compromettere la leggibilità):
[css]
/* main.ccss */
#main {
float: left;
margin-right: 60px;
}
#main h1 {
font-size: 18px;
}
#main header {
line-height: 30px;
}
#main footer {
font-size: 14px;
}
#main p {
color: #008FF9;
}
#main p.test1 {
background-color: #76C5FF;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
}
/* tab.ccss */
table {
box-shadow: 1px 1px 2px black;
-moz-box-shadow: 1px 1px 2px black;
-webkit-box-shadow: 1px 1px 2px black;
-o-box-shadow: 1px 1px 2px black;
}
table th,
table td {
vertical-align: middle;
}
table th.highlight,
table td.highlight {
background-color: yellow;
}
table th {
font-weight: bold;
}
[/css]
Come vedete, sono successe diverse cose oltre alla semplice conversione di formato. Lo script ci ha consentito di tenere separati i css ma di includerli entrambi in un’unica richiesta.
Abbiamo potuto utilizzare box-shadow e border-radius senza duplicare la regola 4 volte e lo script ha aggiunto per noi le varianti per webkit, mozilla e opera.
Abbiamo potuto sfruttare smarty per salvare un colore in una variabile, in modo da poterlo modificare in un solo punto senza cercare tutti i css e abbiamo sfruttato una nostra funzione (luminosity_multiply) per schiarire il colore e usarlo per la regola p.test1. In questo modo se durante un aggiornamento del sito, il colore deve passare da un blu a un verde, ci basterà modificare una sola variabile e otterremo anche il verde schiarito per p.test1.
Oltre a questo, come indicato in apertura, lo script gestirà diversi tipi di cache (lato server e lato client), la compressione gzip e la minificazione del sorgente.
Prossimamente inizieremo lo sviluppo dello script.
