CSS3 Border-radius e Box-shadow su Internet Explorer con CSS3PIE
di: Marco Pontili 30 Gennaio 2012
Molti web designer creano mockup di siti Web usando box, pulsanti e altri elementi con bordi arrotondati, ombre e gradienti per aumentare l'usabilità e la UI. Effetti facilmente realizzabili con Photoshop ma per niente semplici da realizzare con una resa uniforme su tutti i maggiori browser con CSS3.
Spesso la scelta ricade sull'utilizzo di CSS2 + immagini di background + markup aggiuntivo o uso di CSS3 non compatibile su Internet Explorer 7 e 8 (nei quali per esempio, un pulsante con bordi arrotondati, appare perfettamente rettangolare).
CSS3PIE è un framework javascript, pubblicato nel Giugno 2010 da Jason Johnston e arrivato attualmente alla versione 1.0 beta 5, utile a renderizzare alcune proprietà CSS3 su Internet Explorer 6-9.
In questo articolo, in particolare, vedremo come usare questo framework per visualizzare, su IE, 2 proprietà fondamentali: border-radius e box shadow.
Richiamare la libreria: i formati .htc e .js
Possiamo usare CSS3PIE con estensione .htc e .js. Un file HTC (HTML Components) è tipicamente un file HTML con uno script richiamabile via CSS solo su Internet Explorer con la proprietà behavior.
La versione .htc deve essere obbligatoriamente inserita nello stesso dominio della pagina HTML con un Content-Type corretto ed è richiamabile inserendo anche solo una linea di CSS aggiuntivo alle nostre dichiarazioni.
Il framework sarà caricato in modo asincrono e le nostre pagine caricheranno velocemente. Ecco un esempio:
<head>
<meta http-equiv="content-type" content="text/html" />
<style type="text/css">
.box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: #000 5px 5px 10px 3px
-webkit-box-shadow: #000 5px 5px 10px 3px
box-shadow: #000 5px 5px 10px 3px;
behavior: url(PIE.htc); /* IE */
}
</style>
</head>
La versione con estensione .js non ha problemi cross-domain e di corretto Content-Type ma deve essere linkata direttamente nella head con un commento condizionale per Internet Explorer e poi bisogna richiamare singolarmente gli elementi da renderizzare.
Con questa versione il caricamento delle pagine non sarà asincrono e potenzialmente aumenterà il tempo di caricamento della pagina. Inoltre le pagine dovranno caricarsi interamente prima che venga applicato il behavior.
Quindi con questa versione vedremo inizialmente un "FOUC" (flash of unstyled content) e subito dopo la visualizzazione corretta. Ecco un esempio:
<style type="text/css">
.box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: #000 5px 5px 10px 3px
-webkit-box-shadow: #000 5px 5px 10px 3px
box-shadow: #000 5px 5px 10px 3px;
behavior: url(PIE.htc); /* IE */
}
</style>
<!--[if lt IE 9]>
<script type="text/javascript" src="path/to/PIE.js"></script>
<script type="text/javascript">
$(function() {
if (window.PIE) {
$('.box').each(function() {
PIE.attach(this);
});
}
});
</script>
<![endif]-->
Guide CSS
Responsive Desing, la guidaProgettare siti da fruire su dispositivi diversi è imprescindibile... |
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
Newsletter @CSS
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |