Back to blog

CSS3: compatibilità cross-browser…da oggi!

29 marzo 2010 - Posted in CSS , HTML , Webdesign Posted by:

Tags: , , , , ,

Novità in arrivo per i webdesigner: i CSS3! Ci sono infatti interessanti innovazioni in cantiere per i CSS, che consentiranno dare di sfogo alla creatività nel web design. Realisticamente però, non saremo in grado di utilizzarli, a causa della compatibilità offerta dai browser, per progetti professionali, ancora per qualche anno. Ma per i blog e siti di web design rivolti alla comunità di web designer, queste caratteristiche possono aiutare a spingere i confini del web design moderno, aggiungendo qualche caratteristica extra al design, per sperimentare e prendere confidenza con quello che aspetta nel futuro del settore CSS.

L’introduzione dei CSS3 permetterà di realizzare siti web più flessibili e di ridurre i costi di sviluppo e di manutenzione. Per utilizzare già adesso la maggior parte delle proprietà CSS3, dobbiamo usare le specifiche estensioni del browser assieme alle proprietà originali. Le estensioni più comuni sono quelle usate per i browser basati su WebKit (per esempio, Safari), che iniziano con -WebKit, e browser basati su Gecko (per esempio, Firefox), che si aprono con -moz-. Konqueror (-KHTML-), Opera (-o) e Internet Explorer (-ms-) hanno le loro estensioni proprietarie. Come designer professionisti, dobbiamo tenere a mente che l’utilizzo di queste proprietà specifiche non permettere di validare i fogli di stile. Ma in alcuni casi, per sperimentare o per apprendimento, possiamo affiancarla alle proprità CSS validate.

Ma esattamente quali tecniche CSS3 possiamo già usare oggi?

Ecco di seguito le principali novità CSS3 e la compatibilità con i maggiori browser, da testare con i file di esempio.

CSS3: angoli arrotondati

Ecco il codice, utilizzato per realizzare i bordi arrotondati:

.box_round {
     -moz-border-radius: 12px; /* FF1+ */
     -webkit-border-radius: 12px; /* Saf3+, Chrome */
     border-radius: 12px; /* Opera 10.5, IE 9 */
	}
  • Firefox 1+
  • Safari3+
  • Chrome
  • Opera 10.5
  • IE 9

Una valida soluzione alternativa, realmente cross-browser (compreso IE6+), basata su JavaScript, è rappresentata da jQuery Corner. Update! Ecco come risolvere il bug dei bordi arrotondati su immagini di sfondo.

CSS3: ombra esterna

Le nuove dichiarazioni CSS3 permettono di proiettare ombra esterna da un oggetto. Per tutti i browser, tranne IE6-7-8, dopo la dichiarazione della proprietà, il primo valore consente di spostare l’ombra lungo l’asse x, il secondo la muove sull’asse delle y, il terzo gestisce il livello di blur, mentre l’ultimo definisce il colore. le versioni di IE sotto la 9, utilizzano invece filter.

Ecco un un esempio di elementi con ombra esterna:

.box_shadow {
	-moz-box-shadow: 0px 0px 4px #000000; /* FF3.5+ */	
	-webkit-box-shadow: 0px 0px 4px #000000; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 4px #000000; /* Opera 10.5, IE 9.0 */
    filter: /* IE6,IE7 e IE8 */
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=5) /* top */        
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=5) /* left */      
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=5) /* bottom */       
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=5);  /* right */ 
}
  • Firefox 3.5+
  • Safari3+
  • Chrome
  • Opera 10.5
  • IE6+

CSS3: sfumatura a gradiente verticale

Ecco cosa usare e per ottenere una sfumatura verticale. Da notare il mancato supporto di Opera:

.box_gradient {  
  background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999'); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')"; /* IE8 */
}
  • Firefox 3.6
  • Safari4
  • Chrome
  • IE6+

CSS3: effetto traparenza

Ecco come settare i CSS per ottenere un effetto trasparenza cross-browser. Di seguito il codice (notiamo che il filtro si comporta in questa maniera: il codice completo è #60CCFF00 dove 60 è l’Alpha, mentre il codice colore vero e proprio è CCFF00. Attenzione!):

.box_rgba_1 {
	background-color: rgba(204, 255, 0, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#60CCFF00',endColorstr='#60CCFF00'); /* IE6,IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#60CCFF00',endColorstr='#60CCFF00')"; /* IE8 */
}
  • Firefox 3+
  • Safari3+
  • Opera 10.10+
  • Chrome
  • IE6+

CSS3: rotazione

Ecco come realizzare una rotazione cross-browser solo con i CSS: per prima cosa scaricate il file -ms-transform.htc e salvatelo nella cartella dei file CSS. Poi settate le regole come segue:

.rotate {
	behavior:url(-ms-transform.htc); /* IE6+ */
    -moz-transform:rotate(45deg); /* FF3.5+  */
    -webkit-transform:rotate(45deg); /* Saf3.1+, Chrome */
    -o-transform:rotate(45deg); /* Opera 10.5 */
    -ms-transform:rotate(45deg); /* IE */
}
  • Firefox 3.5+
  • Safari3.1+
  • Opera 10.5+
  • Chrome
  • IE6+

…ed ecco come appaiono dei div ruotati.

CSS3: @font-face

Prima di iniaziare, ecco una guida essenziale al @font-face.
Scarichiamo un font e generiamo le regole CSS3.
La regola di base che ci serve per includere i font in pagina poggia sulla direttiva @font-face: occorre definire una regola @font-face per ciascun font che intendiamo utilizzare:

@font-face {
	font-family: 'IlMioFont';
	src: url('ballpark_weiner.eot'); /* IE6+ */
	src: local('Ballpark'), 
		 local('IlMioFont'), 
		 url('ballpark_weiner.woff') format('woff'), /* FF3.6 */
		 url('ballpark_weiner.ttf') format('truetype') /* Saf3+,Chrome,Opera10+ */
	;
}

…e usare i nostri font nelle dichiarazioni CSS consuete. In questo modo:


#ilMioSelettore {
	font:30px 'IlMioFont', Georgia, serif;
	color:#000;
}
  • Firefox 3.6+
  • Safari3+
  • Opera 10+
  • Chrome
  • IE6+


Chi ha letto questo articolo, ha gradito anche:

  1. CSS3: effetto foto piegata!
  2. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
  3. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari
  4. CSS Pseudo-classi: come usarle su IE6+!
  5. Eliminare il bordo tratteggiato attorno a un link mantenendo l’usabilità

5 Comments

elpayaso 1193 giorni ago

grandi consigli tutti utili e funzionanti! Grazie

Giacomo Paita 1193 giorni ago

:-)

amaca 1185 giorni ago

Ciao e grazie mille. conoscevo bene font-face ma non sapevo che ormai siamo ad una compatibilità quasi totale permettendo il cross-browsing.

sopratutto grazie per il link di font squirrel, risorsa utilissima!

Giacomo Paita 1185 giorni ago

Ciao amaca, tieni conto però che Windows, su tutti i browser, renderizza il font diversamente da Mac! L’unica soluzione per avere un font realmente cross browser è, ahimé!, Cufon! È una soluzione da valutare di volta in volta. Ciao! Grazie per aver commentato l’articolo!

Lascia un Commento

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>