Come creare strategie di fallback efficaci

Gli utenti possono esplorare il Web con diversi e diffusi Web browser estremamente avanzati, che si distinguono per approcci di sviluppo e strategie di rilascio uniche. Di conseguenza, è probabile che un sito Web venga visitato da browser che non supportano lo stesso set di standard o funzionalità. È pertanto consigliabile creare strategie di fallback per i Web browser che non supportano completamente le tecniche basate su standard. Una strategia di fallback rappresenta un approccio alternativo da usare se quello preferito basato su standard non è supportato.In questo articolo viene illustrato come creare efficaci strategie che consentono di visualizzare le pagine Web correttamente con Web browser che non supportano funzionalità definite da standard stabili e ampiamente supportati.

Fallback di elementi HTML

Potresti avere già familiarità con il fallback di elementi HTML, che consente di specificare che cosa si verifica se una determinata tecnologia non è supportata. Nell'esempio seguente viene utilizzato il fallback degli oggetti per visualizzare un'immagine tradizionale se la grafica SVG (Scalable Vector Graphics) non è supportata.


<object data="vectorPanda.svg" type="image/svg+xml">
   <img src="pandaFallbackImage.png">
</object>


Per la creazione di pagine Web che includono elementi HTML che potrebbero non essere supportati dai browser con cui viene visitata, presta attenzione alla corretta definizione di strategie di fallback, anche se la strategia dovesse prevedere semplicemente la visualizzazione di un messaggio che indica la possibilità di ottenere un'esperienza più avanzata usando un diverso Web browser, come illustrato nell'esempio seguente.


   <audio id="myAudio" src="audiofile.wav">
      The audio element is not supported by your browser.
   </audio>

Questo esempio visualizza un messaggio per i browser che non supportano l'elemento audio. Si tratta di una semplice strategia di fallback che fornisce informazioni che consentono agli utenti di determinare le azioni da intraprendere.

Fallback con JavaScript

Per creare strategie di fallback con JavaScript, usa il rilevamento delle funzionalità per testare gli approcci preferiti rispetto ad altri limitati, come illustrato nell'esempio di codice seguente


function registerEvent( sTargetID, sEventName, fnHandler ) 
{
   var oTarget = document.getElementById( sTargetID );
   if ( oTarget != null ) 
   {
      if ( oTarget.addEventListener ) {   
         oTarget.addEventListener( sEventName, fnToBeRun, false );
      } else {
        var sOnEvent = "on" + sEventName; 
        if ( oTarget.attachEvent ) 
        {
           oTarget.attachEvent( sOnEvent, fnHandler );
        }
      }
   }
}

Questo esempio illustra una funzione che usa il rilevamento delle funzioni per registrare eventi per una pagina Web. Questo aspetto è descritto in dettaglio in Come rilevare le funzionalità invece dei browser. Viene utilizzata l'alternativa preferita basata su standard prima dell'alternativa proprietaria. Questo approccio significa che una funzione è compatibile con i moderni browser che supportano gli eventi del DOM (Document Object Model) di livello 3 nonché con diverse versioni precedenti di Windows Internet Explorer che non supportano lo standard in questione. Questa versione dell'esempio aggiunge supporto per altri Web browser non che rientrano in nessuna delle due categorie.

Per preparare strategie di fallback in JavaScript, progetta innanzitutto la soluzione basata su standard, quindi fornisci supporto per browser alternativi. Questa guida assicura che il comportamento delle pagine Web sia quello previsto in un'ampia gamma di browser e attenua l'impatto negativo per browser meno recenti oppure non tradizionali.

Fallback con i fogli di stile CSS (Cascading Style Sheet)

È consigliabile usare strategie di fallback per la creazione di regole CSS, specialmente quando si usano proprietà CSS che potrebbero ancora non essere state ampiamente adottate. Per creare efficienti strategie di fallback, definire le regole di fallback prima di definire la regola preferita.

A titolo illustrativo, la specifica CSS definisce l'opacità correttamente per il controllo della trasparenza degli oggetti in una pagina Web. Poiché Windows Internet Explorer 9 supporta la proprietà standard opacity è possibile utilizzarla per controllare l'aspetto di un elemento div come illustrato nell'esempio di codice seguente.


  #css3filter {      
    opacity: 0.5;
  }

In questo esempio, gli oggetti con un valore di attributo id corrispondente a #css3filter sono visualizzati al 50% di trasparenza. Questo esempio funziona in Internet Explorer 9 e altri moderni browser. Tuttavia, per controllare la trasparenza in versioni precedenti di Internet Explorer, è necessario il filtro alpha, come illustrato nell'esempio di codice seguente.


  #alphafilter {      
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
  }

Per creare una strategia di fallback CSS combina gli esempi precedenti come illustrato nel codice di esempio seguente.


  #combined {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    opacity: 0.5;
  }

In questo esempio sono usate più regole per specificare l'opacità di un determinato oggetto. L'approccio meno desiderabile, un comportamento originariamente supportato da Microsoft Internet Explorer 5.5, assicura che l'opacità sia visualizzata quanto la pagina Web viene aperta in versioni meno recenti di Internet Explorer. Se la pagina Web contenente la regola viene visualizzata in un Web browser che supporta i fogli di stile di livello 3 (CSV), verrà utilizzata la proprietà opacity per visualizzare la pagina e verrà ignorata la regola contenente il filtro alpha.

 

 

Mostra:
© 2014 Microsoft