CSS  »  Articoli  »  CSS 3 

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.

Altri articoli

Altre guide

Altre newsletter