La possibilità di utilizzare più di un'immagine per gli sfondi introdotta nei CSS3 è solo un'estensione della proprietà background-image disponibile nelle precedenti specifiche.
Il modulo dedicato a bordi e sfondi dei CSS3 ha però introdotto anche nuove proprietà che, quando si potranno sfruttare al meglio, accresceranno di molto le possibilità creative di chi realizza siti web. Queste proprietà sono background-clip, background-origin e background-size. Andiamo ad analizzarle una per una.
background-clip
La proprietà background-clip serve a specificare l'area di un elemento su cui si estenderà lo sfondo definito nel foglio di stile, si tratti di un'immagine o di un colore solido. In soldoni, la proprietà consente di stabilire se lo sfondo debba estendersi fino a comprendere il bordo oppure no.
La sintassi prevista dalla specifica prevede che è possibile assegnare alla proprietà uno tra questi due valori: border-box e padding-box.
Usando il valore border-box lo sfondo si estenderà fino a ricoprire l'area dell'elemento delimitata dal bordo (bordo compreso, insomma). Se si usa padding-box, invece, lo sfondo andrà ricoprire solo il cosiddetto padding box, ovvero l'area dell'elemento che include il padding ed esclude il bordo:
#box {background: red; background-clip: border-box}
#box {background: red; background-clip: padding-box}Molto più semplice spiegare il tutto attraverso un esempio.
Osservate il primo box (Box 1). Abbiamo così definito lo sfondo:
div#box{
width: 400px;
padding: 10px;
border: 10px dashed navy;
background: tomato;
}Tutto normale vero? In effetti non abbiamo usato nessuna proprietà dei CSS3. L'esempio è utile però per capire quale sia il comportamento standard dei browser rispetto all'estensione dello sfondo: un browser che rispetti in pieno le specifiche CSS 2(non IE6 e IE7, per esempio) estende lo sfondo fino a comprendere il bordo (nell'esempio abbiamo accentuato il bordo proprio per rendere la cosa evidente).
Usando background-clip con il valore border-box si ottiene di fatto lo stesso risultato. Si può intuire osservando il secondo box (Box 2). Ecco il codice che abbiamo usato:
div#box2{
width: 400px;
padding: 10px;
border: 10px dashed navy;
background: tomato;
-moz-background-clip: border;
-webkit-background-clip: border;
background-clip: border-box;
}Come si può notare, per Firefox e i browser basati sul suo stesso motore di rendering va usato il prefisso -moz-, per Safari, Chrome e i browser basati su WebKit si usa invece -webkit-; l'ultima dichiarazione segue alla lettera la specifica, ed è al momento supportata, tra i principali browser, solo da Opera (versione 10.5 e seguenti).
Rispetto alla specifica, Firefox usa però il valore border (e non border-box). I browser WebKit supportano sia border sia border-box.
Passiamo ora all'ultimo box dell'esempio (Box 3). Lì si nota cosa significa estendere lo sfondo solo all'area del padding, escludendo il bordo. Credo che tutto sia molto chiaro da un punto di vista visuale, per cui passiamo al codice:
div#box3{
width: 400px;
padding: 10px;
border: 10px dashed navy;
background: tomato;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}Il risultato deriva dall'aver usato per background-clip il valore padding (ovvero padding-box). Come per il caso di sopra, Firefox supporta al momento il valore privo del suffisso -box, i browser WebKit supportano entrambe le modalità.
Chiudiamo con la tabella di compatibilità:
 |
 |
 |
 |
 |
| Non supportata | Firefox 1.0 e versioni successive | Safari 3.0 e versioni successive | Chrome 1.0 e versioni successive | Opera 10.5 e versioni successive |
Nel prossimo appuntamento vedremo come usare le proprietà background-origin e background-size.
background-origin
La proprietà background-origin, per come è definita nella specifica del W3C, serve a specificare relativamente a quale area di un elemento avviene il posizionamento di un'immagine di sfondo. Di fatto, è usata sempre in combinazione con le proprietà background-image e background-position.
La proprietà prevede tre diversi valori:
padding-box: la posizione dello sfondo è relativa all'area del padding (padding box);border-box: la posizione dello sfondo è relativa al bordo definito per l'elemento;content-box: la posizione dello sfondo è relativa all'area del contenuto.
Il valore iniziale è padding-box. Significa che se non si specifica alcun valore per background-origin, lo sfondo sarà posizionato relativamente all'area del padding. Non però su IE6 e IE7, che mal interpretando la specifica CSS 2, usano come origine il bordo. Questo comportamento errato è stato corretto con IE8.
Attualmente Firefox implementa la proprietà usando i valori padding, border e content (senza il suffisso -box). Safari e Chrome supportano entrambe le opzioni (padding e padding-box hanno lo stesso effetto). Opera segue alla lettera la specifica e implementa la proprietà senza il prefisso proprietario. Si tenga conto di tutto ciò nell'analisi del codice dell'esempio che andiamo subito a vedere (la cura estetica è nulla, ma l'obiettivo è qui quello di far capire come funzionano le cose).
Sul primo box (Box 1), abbiamo posizionato lo sfondo (il piccolo logo di HTML.it) relativamente all'area del padding:
div#box{
width: 400px;
padding: 10px;
border: 10px dashed red;
background: url('htmlit.gif');
background-repeat: no-repeat;
background-position: 0 0;
-moz-background-origin: padding;
-webkit-background-origin: padding;
background-origin: padding-box;
}Come si vede, prima di specificare un valore per background-origin, lo sfondo è stato posizionato con background-position. I valori 0 0 posizionano lo sfondo esattamente all'angolo superiore sinistro del box. Con background-origin chiariamo rispetto a quale area.
Il concetto sarà più chiaro osservando il secondo e il terzo box.
Per il Box 2 abbiamo usato per background-origin il valore border (border-box). È evidente la differenza rispetto al primo box:
div#box2{
width: 400px;
padding: 10px;
border: 10px dashed red;
background: url('htmlit.gif');
background-repeat: no-repeat;
background-position: 0 0;
-moz-background-origin: border;
-webkit-background-origin: border;
background-origin: border-box;
}Per il terzo box è stato usato il valore content (content-box). Lo sfondo viene posizionato relativamente all'area del contenuto:
div#box3{
width: 400px;
padding: 10px;
border: 10px dashed red;
background: url('htmlit.gif');
background-repeat: no-repeat;
background-position: 0 0;
-moz-background-origin: content;
-webkit-background-origin: content;
background-origin: content-box;
}La proprietà background-origin può essere applicata anche a sfondi con immagini multiple, come abbiamo fatto nel Box 4:
div#box4{
width: 400px;
padding: 10px;
border: 10px dashed red;
background-image: url('htmlit.gif'),url('htmlit.gif');
background-repeat: no-repeat;
background-position: 0 0,100% 100%;
-moz-background-origin: content, border;
-webkit-background-origin: content, border;
background-origin: content-box, border-box;
}Le regole vanno lette tenendo presente quanto abbiamo fissato nell'articolo dedicato agli sfondi con immagini multiple. Due immagini di sfondo separate da virgola, due valori di posizionamento separati da virgola, due valori per l'origine separati da virgola. La prima immagine di sfondo viene posizionata rispetto all'area del contenuto. La seconda rispetto al bordo.
Detto che la proprietà se sfruttata al meglio può essere spunto per ottime soluzioni creative, chiudiamo con la consueta tabella di compatibilità:
|
|
|
|
|
| Non supportata | Firefox 1.0 e versioni successive | Safari 3.0 e versioni successive | Chrome 1.0 e versioni successive | Opera 10.5 e versioni successive |
background-size
Altra proprietà introdotta nei CSS3 per la gestione degli sfondi è background-size. Serve a specificare una dimensione per l'immagine di sfondo applicata ad un elemento e/o il modo in cui l'immagine in questione si estende all'interno dell'elemento.
I valori possibili sono misure assolute con unità di misura, percentuali, le parole chiave cover o contain.
La proprietà al momento gode di un supporto molto parziale e con diversi bug sulla maggior parte dei browser. Al momento l'unico programma che la implementa in modo corretto e pressoché totale è Firefox 3.6. Proprio partendo dalla pagina di documentazione di Mozilla dedicata alla proprietà, possiamo vederla azione in alcuni esempi, anche comparativi.
Tutti gli esempi visti nell'articolo sono disponibili per il download.
