Passare da jQuery ai CSS per l’ombreggiatura del testo
Purtroppo non è raro che dei plugin di terze parti – come quello in uso per applicare l’ombreggiatura al testo con jQuery – cessino di essere mantenuti: fortunatamente esiste quasi sempre una soluzione alternativa. È opportuno, nella circostanza, optare per l’utilizzo dei CSS che pure avevamo escluso perché non ancora compatibili con tutti i browser.
Riprenderò lo stesso codice d’esempio che avevo utilizzato per mostrare le differenze: la soluzione dei CSS 3 è in realtà molto più “leggera”, ma esclude potenzialmente un numero maggiore di utenti. Ciò nonostante tutti i browser standard li supportino già e la resa sia persino migliore. Se avevate installato l’estensione per jQuery è necessario rimuoverla:
<script type="text/javascript" src="/path/to/jquery.dropshadow.js"></script>
Lo stesso vale per lo script che richiamava la funzione per applicarla alla classe foo, che non sarà più necessario (anche perché dovrete cancellare il file indicato dallo snippet precedente).
<script type="text/javascript">$(document).ready(function(){$(".foo").dropShadow({left:4,top:4,blur:2,opacity:0.5,color:"black",swap:false});});</script></span>
La definizione equivalente nei CSS 3 esclude opacity – che sarebbe applicata al testo, anziché all’ombreggiatura – e swap, mentre riprende tutti gli altri valori. A scopo d’esempio riporterò le stesse definizioni di jQuery perché la differenza sia evidente — i valori in uso su questo blog sono però molto diversi.
.foo{text-shadow:4px 4px 2px black;}
Come potete vedere il codice è molto più ridotto, nonostante applichi un effetto del tutto simile: i 4 valori indicati per la proprietà text-shadow indicano rispettivamente le distanze orizzontale e verticale, la sfocatura e il colore — perciò “rimpiazzano” left, top, blur e color.