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]-->I limiti di CSS3PIE
CSS3PIE non può essere applicato agli elementi <html> e <body> e accetta solo proprietà shorthand. Dunque queste 2 dichiarazioni non avranno effetto su Internet Explorer:
body {
border-radius: 10px;
behavior: url(PIE.htc); /* IE */
}
.box {
-moz-border-top-left-radius: 10px ;
-webkit-border-top-left-radius : 10px;
border-top-left-radius: 10px;
behavior: url(PIE.htc); /* IE */
}Purtroppo il valore inset per la proprietà box-shadow non è supportato.
Bisogna poi sapere che verrà forzato l'uso di hasLayout per l'elemento con il behavior applicato, con lo stesso risultato dell'inserimento di zoom: 1.
Infine CSS3PIE ha problemi con z-index, perchè inserirà un elemento container posizionato in modo assoluto subito prima dell'elemento con il behavior. Dunque, se il nostro elemento sarà posizionato in modo relativo o assoluto, non ci saranno problemi. Se invece il nostro elemento avrà un posizionamento statico, potremmo vedere dei posizionamenti non desiderati e le nostre proprietà CSS non applicate correttamente.
Questo problema si risolve con impostando position in uno di questi due modi:
- position relative al nostro box
- position relative e uno z-index al suo contenitore
Altre proprietà CSS3 per CSS3PIE
Questo framework supporta anche altre importanti proprietà CSS3 come i gradienti lineari, il modello di colori rgba e altro ancora, ma va comunque usato sempre con cautela valutando pro e conto caso per caso, creando dei test specifici prima di pubblicare le nostre pagine web.
Nel giusto contesto può quindi aumentare sensibilmente la user experience anche su browser che non sono più al passo con il web di oggi.
Link utili
- Sito ufficiale di CSS3PIE
- Guida CSS3
- Demo, test e documentazione di CSS3PIE su GitHub
- Consigli veloci dell'autore di CSS3PIE dal forum ufficiale
- Definizione di HTC
