Cross-Browser Box-shadow

Gli sviluppatori conosceranno bene il termine cross-browser. Ebbene è un problema con cui sovente ci si scontra durante la realizzazione di un sito web.

Consideriamo i più comuni browser (Chrome, Firefox, Safari, … ) come degli interpreti che decodificano il linguaggio html/css e lo restituiscono agli utenti sotto forma di interfaccia grafica (UI, user interface). Compito di uno sviluppatore è appunto compilare questi codici in modo corretto, compito dei browser è interpretarli sempre in maniera giusta.

Purtroppo questo non sempre accade, difatti sviluppare un sito testandolo su un solo browser è altamente sconsigliato, la grafica del sito può assumere comportamenti inaspettati su altri browser e talvolta rendere impossibile la navigazione all’utente.

L’incubo IE

Tutto questo avviene in quanto ogni browser ha delle piccole differenze d’interpretazione rispetto agli altri. Tra tutti il più “licenzioso” è senza ombra di dubbio Internet Explorer, che negli anni si è guadagnato la nomea di vero incubo per chi vuole realizzare un sito. Soprattutto le vecchie versioni di IE lasciano molto a desiderare per quanto riguarda l’interpretazione di alcuni aspetti del css.

Possiamo prendere in esempio l’ombra esterna che assegnamo ai nostri tag html, ad esempio a un div.

Box-shadow

L’ombra esterna è ottenibile scrivendo una semplice proprietà css quale il box-shadow. Vediamo un esempio.

div {
   box-shadow: 6px 6px 8px 0px rgba(0,0,0,0.4);
}

 

Come possiamo notare dall’esempio qui sopra, il box-shadow crea una leggera ombra intorno a un tag html (in questo caso un div). Andando ad analizzare più da vicino la proprietà, possiamo notare che questa è composta da più valori. Il primo e il secondo valore (6 pixel) sono relativi allo spostamento orizzontale e verticale dell’ombra. Tanto maggiore sarà il valore tanto più distante sarà l’ombra. È possibile dare un valore negativo per spostare l’ombra sul lato sinistro o in alto. Il terzo valore (opzionale) si riferisce al grado di sfumatura (quanto netta o sfumata sarà l’ombra) e il quarto valore (anch’esso opzionale) si riferisce all’estensione, ovvero quanto si propagherà l’ombra (sfumata o meno) verso l’esterno.

Per quanto riguarda il colore dell’ombra (valore opzionale) è possibile specificarlo in HEX (valori esadecimali a 6 cifre), in rgb (tricromia) oppure in rgba che si riferisce alla tricromia con l’aggiunta del canale della trasparenza (rosso,verde,blu,alpha). È quindi possibile dare all’ombra non solo un colore ma anche un grado di trasparenza in modo che si fonda correttamente con lo sfondo su cui è posta.

Soluzioni Cross-browser

Ma veniamo alla soluzione del problema cross-browser. Dobbiamo tenere presente che, per far si che l’ombra così come la vogliamo, funzioni a dovere su ogni browser, è necessario specificare questa proprietà più volte in termini leggermente diversi, come nell’esempio successivo

-webkit-box-shadow: 6px 6px 8px 0px rgba(0,0,0,0.4); // proprietà per Chrome e Safari
   -moz-box-shadow: 6px 6px 8px 0px rgba(0,0,0,0.4); // proprietà per Firefox
        box-shadow: 6px 6px 8px 0px rgba(0,0,0,0.4); // tutto il resto

Links

• W3Schools Per approfondire l’argomento vi invito a visitare la pagina W3Shool dove sono elencate in maniera chiara e semplice tutte le informazioni relative ai valori attribuibili al box-shadow (come ad esempio l’inset per creare l’ombra interna) e informazioni relative alla compatibilità coi browser. È anche possibile, cliccando sui bottoni Try it yourself, eseguire degli esercizi e vederne i risultati live.
• CSSMatic Esiste un’ottima risorsa gratuita, sviluppata dallo studio CSSMatic, che attraverso un’interfaccia molto intuitiva, dà la possibilità in pochi click, di generare una proprietà CSS box-shadow completa di tutto.
• Paulund Per gli utenti avanzati segnalo un interessante approfondimento sul box-shadow, grazie al quale sarà possibile personalizzare le ombre dei vostri tag html in molti modi originali.

Buon coding a tutti e al prossimo approfondimento.