Como criar estratégias de fallback efetivas

Os usuários podem navegar na Web usando uma variedade de navegadores da Web populares e sofisticados, cada um com abordagens de desenvolvimento e estratégias de lançamento exclusivas. Como resultado, é provável que seus sites sejam visitados por navegadores que não ofereçam suporte ao mesmo conjunto de padrões ou recursos. Dessa forma, é prudente criar estratégias de fallback para navegadores da Web sem suporte total a técnicas baseadas a padrões. Uma estratégia de fallback é uma abordagem alternativa para ser usada caso não haja suporte para abordagem baseada em padrões preferencial.Este artigo mostra como criar estratégias eficazes para exibir as páginas da Web corretamente em navegadores que não dão suporte a recursos definidos por padrões estáveis e amplamente difundidos.

Fallback de elementos HTML

Talvez você já conheça o fallback de elementos HTML, que permite especificar o que acontecerá se determinada tecnologia não tiver suporte. O exemplo a seguir usa o fallback de objetos para exibir uma imagem tradicional quando não há suporte para SVG (gráficos vetoriais escaláveis).


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


Ao criar páginas da Web que incorporem elementos HTML que talvez não tenham suporte de navegadores que as exibam, tenha cuidado ao definir as estratégias de fallback de maneira adequada, mesmo se a estratégia de fallback for exibir uma mensagem indicando a disponibilidade de uma experiência mais rica usando um navegador da Web diferente, como mostrado no exemplo a seguir.


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

Este exemplo exibe uma mensagem para navegadores que não oferecem suporte ao elemento audio. É uma estratégia de fallback simples aquela que oferece informações que o usuário poderá usar para determinar a próxima ação a ser tomada.

Fallback de JavaScript

Ao criar estratégias de fallback com JavaScript, use a detecção de recursos para testar abordagens preferenciais em detrimento das limitadas, como mostrado no exemplo de código a seguir.


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 );
        }
      }
   }
}

Este exemplo mostra uma função que usa detecção de recursos para registrar eventos para uma página da Web e é discutido em mais detalhes em Como detectar recursos em vez de navegadores. Usa a alternativa baseada em padrões preferencial antes da alternativa proprietária. Essa abordagem significa que a função funciona em navegadores modernos que oferecem suporte para o padrão de Eventos de DOM (modelo de objeto de documento) Nível 3, além de versões anteriores do Windows Internet Explorer que não oferecem suporte para o padrão. Esta versão do exemplo adiciona suporte a outros navegadores da Web que não estão em nenhuma das outras categorias.

Ao criar estratégias de fallback JavaScript, projete a solução baseada em padrões primeiro e depois ofereça suporte a navegadores alternativos. Isso ajuda a garantir que suas páginas da Web se comportem como esperado em um amplo alcance e reduz o impacto negativo para navegadores antigos ou não tradicionais.

Fallback de CSS (folhas de estilo em cascata)

Você também deve usar estratégias de fallback ao criar regras CSS, especialmente ao usar propriedades CSS que talvez ainda não tenham sido amplamente adotadas. Para criar estratégias de fallback de CSS eficazes, defina regras de fallback antes de definir a regra preferencial.

Para ilustrar, a especificação CSS define a propriedade de opacidade para o controle de transparência de objetos exibidos em uma página da Web. Como o Windows Internet Explorer 9 dá suporte para a propriedade opacity, você pode usá-lo para controlar a aparência de um elemento div, conforme mostrado no código de exemplo a seguir.


  #css3filter {      
    opacity: 0.5;
  }

Neste exemplo, os objetos com um valor de atributo id de #css3filter são exibidos com uma transparência de 50%. Este exemplo funciona no Internet Explorer 9 e em outros navegadores modernos. Entretanto, para controlar a transparência em versões anteriores do Internet Explorer, você precisa usar o filtro alpha, como mostrado no exemplo de código a seguir.


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

Para criar uma estratégia de fallback de CSS, combine os exemplos anteriores como mostrado no exemplo de código a seguir.


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

Neste exemplo, várias regras são usadas para especificar a opacidade de um determinado objeto. A abordagem menos desejável, um comportamento originalmente com suporte do Microsoft Internet Explorer 5.5, garante que a opacidade será exibida quando a página da Web for exibida por versões anteriores do . Se a página da Web com essa regra for exibida em um navegador da Web com suporte ao padrão CSS3 (Folhas de Estilo em Cascata, Nível 3), usará a propriedade opacity para exibir a página e ignorará a regra com o filtro alpha.

 

 

Mostrar:
© 2014 Microsoft