So wird's gemacht: Erstellen effektiver Fallbackstrategien

Benutzer können mit verschiedenen gängigen und fortgeschrittenen Webbrowsern im Internet surfen. Dabei bietet jeder Browser seine ganz eigenen Entwicklungsansätze und Versionsstrategien. Im Ergebnis werden Ihre Websites wahrscheinlich mit Browsern besucht, die nicht die gleiche Gruppe von Standards oder Features unterstützen. Daher empfiehlt es sich, Fallbackstrategien für Webbrowser zu erstellen, die standardbasierte Verfahren nicht in vollem Umfang unterstützen. (Eine Fallbackstrategie ist eine alternative Methode, die verwendet wird, wenn die bevorzugte standardbasierte Methode nicht unterstützt wird.)In diesem Artikel wird gezeigt, wie Sie effektive Strategien erstellen, mit denen Webseiten auch in Webbrowsern ohne Unterstützung für durch solide, allgemein unterstützte Standards definierte Features richtig angezeigt werden.

HTML-Elementkategorien

Das Fallback für HTML-Elemente ist Ihnen unter Umständen bereits bekannt. Sie können damit das Vorgehen für den Fall angeben, dass eine bestimmte Technologie nicht unterstützt wird. Im folgenden Beispiel wird das Fallback für Objekte verwendet, um ein herkömmliches Bild anzuzeigen, wenn keine SVG-Unterstützung (Scalable Vector Graphics, skalierbare Vektorgrafiken) verfügbar ist.


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


Beim Erstellen von Webseiten mit HTML-Elementen, die von den Anzeigebrowsern möglicherweise nicht unterstützt werden, müssen Sie Fallbackstrategien sehr umsichtig definieren. Dies gilt auch, wenn lediglich ein Hinweis angezeigt werden soll, dass ein anderer Webbrowser ein besseres Ergebnis liefern würde (siehe folgendes Beispiel).


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

Bei diesem Beispiel wird ein Hinweis für Browser angezeigt, die das audio-Element nicht unterstützen. Es handelt sich um eine einfache Fallbackstrategie mit Informationen, die Benutzer verwenden können, um die nächsten Schritte zu bestimmen.

JavaScript-Fallback

Beim Erstellen von Fallbackstrategien mit JavaScript unterscheiden Sie die bevorzugten Ansätze mithilfe der Featureerkennung von eingeschränkten Ansätzen (siehe folgendes Codebeispiel).


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

Dieser Beispielcode enthält eine Funktion, die Ereignisse für eine Webseite mithilfe der Featureerkennung registriert. Das Beispiel wird unter Erkennen von Features anstelle von Browsern ausführlicher erläutert. Der Code verwendet die bevorzugte standardbasierte Alternative anstelle der proprietären Alternative. Dieser Ansatz bedeutet, dass die Funktion sowohl in modernen Browsern funktioniert, die den Standard für Ereignisse der DOM-Ebene 3 (Document Object Model, Dokumentobjektmodell) unterstützen, als auch in älteren Versionen von Windows Internet Explorer, die diesen Standard nicht unterstützen. Mit dieser Version des Beispielcodes wird Unterstützung für weitere Webbrowser hinzugefügt, die nicht in eine der anderen beiden Kategorien fallen.

Beim Erstellen von JavaScript-Fallbackstrategien entwickeln Sie zuerst die standardbasierte Lösung und stellen anschließend die Unterstützung für alternative Browser bereit. Damit stellen Sie sicher, dass sich die Webseiten weitgehend wunschgemäß verhalten, und minimieren die Nachteile bei älteren oder nicht herkömmlichen Browsern.

CSS-Fallback (Cascading Stylesheets)

Fallbackstrategien empfehlen sich auch beim Erstellen von CSS-Regeln, insbesondere bei der Verwendung von CSS-Eigenschaften, die noch nicht so weit verbreitet sind. Definieren Sie zuerst Fallbackregeln und danach die bevorzugte Regel, um effektive CSS-Fallbackstrategien zu erstellen.

Die CSS-Spezifikation definiert beispielsweise die "opacity"-Eigenschaft für die Steuerung der Transparenz von Objekten, die auf einer Webseite angezeigt werden. Da Windows Internet Explorer 9 die opacity-Eigenschaft unterstützt, können Sie sie wie im folgenden Codebeispiel verwenden, um die Darstellung eines div-Elements zu steuern.


  #css3filter {      
    opacity: 0.5;
  }

In diesem Beispiel werden Objekte mit dem id-Attributwert #css3filter mit einer Transparenz von 50 % angezeigt. Dieser Code funktioniert in Internet Explorer 9 und anderen modernen Browsern. Für die Steuerung der Transparenz in früheren Versionen von Internet Explorer müssen Sie den alpha-Filter verwenden (siehe folgendes Codebeispiel).


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

Kombinieren Sie die vorherigen Beispiele, um eine CSS-Fallbackstrategie zu erstellen (siehe folgendes Codebeispiel).


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

In diesem Beispiel werden mehrere Regeln verwendet, um die Deckkraft für ein bestimmtes Objekt anzugeben. Der minimale Ansatz, ein ursprünglich von Microsoft Internet Explorer 5.5 unterstütztes Verhalten, stellt sicher, dass die Deckkraft implementiert wird, wenn die Webseite mit älteren Versionen von Internet Explorer angezeigt wird. Wenn die Webseite, die diese Regel enthält, in einem Webbrowser angezeigt wird, der den CSS3-Standard (Cascading Stylesheets, Level 3) unterstützt, verwendet sie zum Anzeigen der Seite die opacity-Eigenschaft und ignoriert die Regel mit dem alpha-Filter.

 

 

Anzeigen:
© 2014 Microsoft