CSS3: Come implementare alcuni moduli anche su Internet Explorer?

Nello scorso articolo abbiamo avuto modo di approfondire un modulo CSS avanzato come il @font-face che, tra le varie caratteristiche positive, aveva soprattutto la piena compatibilità con Internet Explorer. @font-face però è un modulo del CSS 2.1. Come si comporta Internet Explorer con i CSS3?

Nel primo articolo eravamo riusciti a dare un’ombreggiatura agli elementi della nostra pagina anche con il browser di casa Microsoft. Avevamo però incontrato degli ostacoli insormontabili con la divisione del testo in colonne, per non parlare poi di quelli che avremmo potuto incontrare se avessimo voluto arrotondare i bordi dei nostri box mediante l’utilizzo dei fogli stili.

Al grido di “nulla è perduto”, però, oggi ci affideremo a degli hacks che possano permetterci di implementare gli effetti ottenibili tramite il CSS3 anche con Internet Explorer (ed anche nella sua versione più ostile: la 6!).

CSS3: il modulo text-shadow

Da quando Firefox nella sua versione 3.5 ha dato pieno supporto al modulo text-shadow, parecchi web designers hanno optato per il suo utilizzo all’interno dei propri lavori: c’è un dettaglio però: Internet Explorer ignora praticamente questo modulo.

Dunque, come possiamo creare un effetto di ombreggiatura sui nostri testi che sia crossbrowser? In nostro aiuto interviene proprio un modulo proprietario di casa Microsoft: il parametro Shadow del modulo filter.

Esempio

Supponiamo di avere all’interno della nostra pagina un paragrafo o un titolo al quale vogliamo applicare un’ombreggiatura:

<h1 class=”shadow”>Questo è il titolo della nostra pagina web…</h1>

Per ottenere il risultato da noi sperato dobbiamo utilizzare il modulo text-shadow:

p.shadow
{
    text-shadow: #0000ff 0px 0px 3px;
}

e in questo modo ci assicuriamo il supporto da parte di Firefox, Safari, Google Chrome e Opera, mentre per quanto riguarda Internet Explorer:

p.shadow
{
    text-shadow: #999999 3px 3px 3px;
    filter: Shadow(Color=#999999,
    Direction=135,
    Strength=5);  /* Per Internet Explorer */
}

Shadow ha tre proprietà:

  • Color: il colore dell’ombreggiatura;
  • Direction: la direzione dell’effetto;
  • Strength: ossia l’intensità dell’ombreggiatura.

Una volta settate queste tre proprietà il nostro effetto si potrà dire completamente compatibile con i principali browsers presenti oggi sul mercato.

Il risultato è davvero gradevole, come nel nostro esempio.

CSS3: il modulo transform

Grazie ai CSS3 è possibile ruotare degli elementi utilizzando il modulo transform. Supponiamo di voler ruotare una scritta, una semplice riga di testo:

<p class="rotate">RUOTAMI DI 90 GRADI!</p>

adesso nel css definiamo le proprietà della classe rotate:

p.rotate
{
    color:#7f192f;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}

Internet Explorer ignora il modulo transform, ma non dimentichiamoci che il browser di casa Microsoft possiede il solito modulo filter (a quanto pare una vera e propria manna dal cielo!).

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
Oltre la solita sintassi più o meno complicata adottata da Internet Explorer, un elemento fondamentale è rappresentato da (rotation=1) ed in particolare: a cosa corrisponde il numero 1?

I valori che possono essere attribuiti a rotation sono 0, 1, 2, 3 che corrispono rispettivamente a 0, 90, 180 e 270 gradi. Il risultato? Eccolo qui!

CSS3: Opacity

Opacity è un altro modulo dei CSS3 che Internet Explorer non supporta, ma che può facilmente riprodurre mediante i suoi moduli proprietari.

Per Mozilla Firefox, Safari, Google Chrome e Opera la sintassi che dovremo utilizzare sarà la seguente:

div.opacity
{
   background-color:#7f192f;
   width:400px;
   height:50px;
   opacity: 0.4;
}

e la associeremo al div con classe opacity che creiamo nella nostra pagina HTML:

<div class=”opacity”></div>

Come detto in precedenza, Internet Explorer utilizza una sintassi proprietaria e quindi:

filter:alpha(opacity=40);

per ottenere questo risultato:

div.opacity
{
   background-color:#7f192f;
   width:400px;
   height:50px;
   opacity: 0.4;
   filter:alpha(opacity=40);  /* Per Internet Explorer */
}

Oltre alle evidenti differenze di sintassi puoi notare come tutti gli altri browsers esprimono l’opacità in valori decimali tramite il modulo opacity, mentre Internet Explorer opta per valori interi dallo 0 a 100.

Uno degli inconvenienti di questa tecnica, però, è che l’effetto opacità interessa non solo il colore di sfondo dell’oggetto al quale lo associamo, ma anche tutto il suo contenuto (testo, immagini, tabelle ecc…).

Un modo per poter superare questo ostacolo è nella dichiarazione del colore di sfondo del nostro div di classe opacity:

div.opacity
{
   background:rgba(127,25,47, 0.4);
   width:400px;
   height:50px;
}

Esprimendo il colore in rgba piuttosto che in esadecimale ed inserendo come quarto valore all’interno delle parentesi il grado di opacità da assegnare al nostro colore di sfondo, circoscriviamo l’effetto al solo colore di sfondo e non al contenuto del blocco al quale lo abbiamo applicato.

La differenza tra i due metodi è palese in questo esempio.

Un dettaglio fondamentale chiude la carrellata di tricks per la lettura dei moduli CSS3 con Internet Explorer: il consorzio W3C boccia categoricamente nella sua validazione tutti i fogli di stile contenenti moduli CSS3 e nella maggiorparte dei casi anche i loro corrispettivi “sosia” Microsoft. Questo inconveniente è dovuto al fatto che la validazione si riferisce all’ultima versione ufficiale dei CSS, ossia CSS2.1 .

CSS3 è ancora in fase di Draft presso il W3C e quindi, non essendo ancora una release ufficiale non viene validata.

Quanto ai metodi filter c’è da precisare che sono sempre non validi ai fini della validazione.

Conclusioni

I CSS3 prolificano di moduli che permettono ai web designers di poter creare soluzioni validissime dal punto di vista grafico e funzionale.

Là dove Internet Explorer sembra rappresentare un ostacolo non indifferente, è bene sapere che per vie traverse possiamo implementare ugualmente le novità, per quanto “futuristiche” possano sembrare.

E tu: quanti di questi moduli hai già applicato nei tuoi siti?

Tag: , ,

L'autore

Web designer, cerca l'ispirazione in ogni oggetto che lo circonda. Specializzato nella creazione di layout per Wordpress è sempre alla ricerca del framework javascript più cool, del social network più in voga, del design più innovativo... Genere musicale? Lounge...

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

5 commenti

Trackback e pingback

  1. uberVU - social comments
    Social comments and analytics for this post... This post was mentioned on Twitter by yiw: RT @YIW CSS3: Come implementare…
  2. Utilizzare Alcune Proprietà CSS3 Anche In Internet Explorer | Fedeweb
    [...] ti invito a leggere questo articolo di yourinspirationweb, che ti darà altri suggerimenti su come aggirare gli ostacoli di…