Per favore, ingrandite quel background!

I background CSS3 ci vengono in soccorso#section1

Il W3C CSS Background and Borders Module Level 3 (attualmente una working draft) definisce la proprietà background-size che calza a pennello sulle nostre richieste. I valori interessanti (per citare la specifica W3C) sono:

contain

Scala l’immagine, preservandone l’intrinseco rapporto larghezza-altezza (se c’è), alla dimensione più grande, così che sia la sua larghezza sia la sua altezza vadano bene all’interno dell’area di posizionamento del background.

cover

Scala l’immagine, preservandone l’intrinseco rapporto larghezza-altezza (se c’è), alla dimensione più piccola così che sia la sua larghezza sia la sua altezza possano coprire completamente l’area di posizionamento del background.

Contain fa sempre stare l’intera immagine all’interno della vostra viewport, lasciando dei bordi opachi sia su top-bottom sia su left-right ogni volta che il rapporto dell’immagine di background e la finestra del browser non è uguale. Nell’esempio due abbiamo esteso il codice dell’esempio uno impostando la proprietà background-size a contain.

Cover riempie sempre la finestra del browser, tagliando un po’ di dettagli nel processo, che è quel che personalmente preferisco per la maggior parte dei casi. Potete controllare come la vostra immagine viene allineata all’interno della viewport usando la proprietà background-position. Nell’esempio tre abbiamo di nuovo esteso l’esempio uno, questa volta impostando la proprietà background-size a cover.

Si abilita il ridimensionamento del background aggiungendo le seguenti dichiarazioni allo stylesheet:

     
	body {
  	   background: #000 url(myBackground_1280x960.jpg) » 
	   center center fixed no-repeat;
  	   -moz-background-size: cover;
  	   background-size: cover;
	}
     
  

La proprietà background-size è già supportata in Firefox 3.6 (usando il prefisso -moz; Firefox 4 utilizzerà la proprietà CSS3 regolare), Chrome 5, Safari 5 e Opera 10.54; verrà inoltre inclusa in Internet Explorer 9 (è già disponibile nella Preview 3). Le versioni più vecchie di WebKit e Opera supportano già la proprietà background-size, sebbene queste implementazioni siano basate su draft precedenti che non includevano le keyword contain e cover.

Lo svantaggio di questo metodo è che non c’è alcuna proprietà per il background disponibile per impostare una larghezza o un’altezza minima. Quando si ridimensiona la finestra del browser ad una dimensione molto piccola di altezza o larghezza, l’immagine di background si scalerà fino a raggiungere una dimensione molto piccola: comportamento spesso indesiderato.

Aggiungere le media query di CSS3 all’impasto#section2

Il W3C CSS3 Media Queries Module (una candidate recommendation) definisce le regole condizionali che si applicano solo all’interno di determinati range di larghezza o altezza. Questo ci permette di implementare il ridimensionamento del background da una larghezza e altezza minima e così via. Le media query sono supportata da Firefox 3.5, Chrome, Safari 3 e Opera 7, e saranno anche incluse in Internet Explorer 9.

Aggiungendo le seguenti regole di stile diremo al browser che non vogliamo che l’immagine di background si scali ad una dimensione inferiore ai 1024×768 pixel:

  
   body {
     background: #000 url(myBackground_1280x960.jpg) »
     center center fixed no-repeat;
     -moz-background-size: cover;
     background-size: cover;
   }

   @media only all and (max-width: 1024px) and (max-height: 768px) {
   body {	
     -moz-background-size: 1024px 768px;
     background-size: 1024px 768px;
   }
  }

Notate che 1024x768px ha lo stesso rapporto dell’immagine di background (1280x960px). Quando usate rapporti diversi otterrete salti improvvisi nello scaling quando ridimensionerete la finestra del browser.

Nei nostri ultimi esempi, quattro e cinque, abbiamo aggiunto la regola @media, così che l’immagine di background non si scali a meno di 1024×768 pixel. L’esempio cinque mostra che impostando la proprietà background-position a left-bottom invece che center-center, possiamo controllare il modo in cui l’immagine di background è allineata all’interno della viewport.

Rivisitazione delle vecchie tecniche#section3

Stiamo vivendo in un periodo particolarmente vivace per i web developer, con tutti i produttori di browser che lavorano alla clemente per implementare le nuove tecnologie HTML5 e CSS3. Come risultato, è ora di rivedere le vecchie tecniche per capire come si possano ottenere gli stessi risultati in maniera più intelligente e pulita. Mentre i cicli di upgrade di Firefox, Chrome, Safari e Opera sono relativamente brevi, sarà interessante vedere quanto tempo ci metteranno le persone ad adottare Internet Explorer 9, così che possiamo cominciare ad usare molte di queste tecniche su larga scala al più presto.

Illustrazioni dell’articolo: {carlok}