How to Create Effective Fallback Strategies

Users can browse the web using a variety of popular and sophisticated web browsers, each with unique development approaches and release strategies. As a result, it is likely that your websites will be visited by browsers that do not support the same set of standards or features. It is therefore prudent to create fallback strategies for web browsers that do not fully support standards-based techniques. (A fallback strategy is an alternate approach to be used if the preferred standards-based approach is not supported.)This article shows how to create effective strategies that allow webpages to display correctly when viewed with web browsers that do not support features defined by stable, widely supported standards.

HTML Element Fallback

You may be familiar with HTML element fallback, which allows you to specify what happens if a certain technology is not supported. The following example uses object fallback to display a traditional image when Scalable Vector Graphics (SVG) is not supported.

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

When creating webpages that incorporate HTML elements that may not be supported by browsers that view those webpages, use care to properly define fallback strategies, even if the fallback strategy is to display a message indicating the availability of a richer experience using a different web browser, as shown in the following example.

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

This example displays a message for browsers that do not support the audio element. It is a simple fallback strategy, one that provides information that the user can then use to determine the next course of action.

JavaScript Fallback

When creating fallback strategies with JavaScript, use feature detection to test preferred approaches over more limited ones, as shown in the following code sample.

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

This example shows a function that uses feature detection to register events for a webpage and is discussed in more detail in How to Detect Features Instead of Browsers. It uses the preferred standards-based alternative before the proprietary alternative. This approach means that the function works in modern browsers that support the Document Object Model (DOM) Level 3 Events standard as well as older versions of Windows Internet Explorer that do not support that standard. This version of the sample adds supports for other web browsers that do not fall into either of the other categories.

When creating JavaScript fallback strategies, design for the standards-based solution first and then provide support for alternative browsers. This helps ensure that your webpages behave as intended in a wide range and reduces the negative impact for older or non-traditional browsers.

Cascading Style Sheets (CSS) Fallback

You should also use fallback strategies when creating Cascading Style Sheets (CSS) rules, especially when using CSS properties that may not be widely adopted yet. To create effective CSS fallback strategies, define fallback rules before defining the preferred rule.

To illustrate, the CSS specification defines the opacity property for controlling the transparency of objects displayed in a webpage. Because Windows Internet Explorer 9 supports the opacity property, you can use it to control the appearance of a div element, as shown in the following code sample.

  #css3filter {      
    opacity: 0.5;
  }

In this example, objects with an id attribute value of #css3filter are displayed at 50% transparency. This example works in Internet Explorer 9 and other modern browsers. However, to control transparency in earlier versions of Internet Explorer, you need to use the alpha filter, as shown in the following code sample.

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

In order to create a CSS fallback strategy, combine the previous examples as shown in the following code sample.

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

In this example, multiple rules are used to specify opacity to a given object. The least desirable approach, a behavior originally supported by Microsoft Internet Explorer 5.5, ensures that opacity will be displayed when the webpage is viewed by older versions of Internet Explorer. If the webpage containing this rule is displayed in a web browser that supports the Cascading Style Sheets, Level 3 (CSS3) standard, it will use the opacity property to display the page and ignore the rule containing the alpha filter.