Comment créer des stratégies de secours efficaces

Les utilisateurs peuvent parcourir le Web à l’aide de différents navigateurs Web connus et complexes, chacun faisant l’objet d’approches de développement et de stratégies de commercialisation uniques. Par conséquent, il est probable que vos sites Web seront visités par des navigateurs qui ne prennent pas en charge les mêmes normes ou fonctionnalités. Il peut donc être prudent de mettre en place des stratégies de secours pour les navigateurs Web qui ne prennent pas intégralement en charge les techniques normalisées. (Une stratégie de secours est une autre approche à envisager si l’approche normalisée de prédilection n’est pas prise en charge.)Cet article montre comment créer des stratégies efficaces qui permettent aux pages Web de s’afficher correctement lorsqu’elles sont consultées par des navigateurs Web qui ne prennent pas en charge les fonctionnalités définies par des normes stables et répandues.

Élément de secours HTML

Vous connaissez peut-être l’élément de secours HTML qui vous permet de spécifier le comportement à adopter lorsqu’une technologie donnée n’est pas prise en charge. L’exemple suivant fait appel à l’objet de secours pour afficher une image traditionnelle lorsque la technologie SVG (Scalable Vector Graphics) n’est pas prise en charge.


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


Lorsque vous créez des pages Web qui incorporent des éléments HTML susceptibles de ne pas être pris en charge par les navigateurs qui consultent ces pages, soyez vigilant pour définir correctement les stratégies de secours, même si la stratégie de secours consiste à afficher un message indiquant que l’utilisation d’un autre navigateur permet d’améliorer l’affichage, comme illustré dans l’exemple suivant.


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

Cet exemple affiche un message destiné aux navigateurs qui ne prennent pas en charge l’élément audio. Il s’agit d’une stratégie de secours simple, qui fournit les informations nécessaires à l’utilisateur pour déterminer sa prochaine action.

Stratégies de secours JavaScript

Lorsque vous créez des stratégies de secours avec JavaScript, utilisez la détection des fonctionnalités pour tester les approches de prédilection par rapport à des approches plus limitées, comme l’illustre l’exemple de code suivant.


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

Cet exemple montre une fonction qui utilise la détection des fonctionnalités dans le but d’inscrire des événements pour une page Web. La section Détection des fonctionnalités au lieu des navigateurs explique cette fonction de manière plus détaillée. Cet exemple utilise l’approche normalisée de prédilection avant la solution propriétaire. Cette approche implique que la fonction opère sur des navigateurs plus récents qui prennent en charge la norme des événements Document Object Model (DOM) de niveau 3, ainsi que sur des versions plus anciennes de Windows Internet Explorer ne prenant pas en charge cette norme. Cette version de l’exemple permet de prendre en charge les autres navigateurs Web qui n’entrent dans aucune des autres catégories.

Lorsque vous créez des stratégies de secours JavaScript, concevez-les d’abord pour la solution normalisée, puis proposez ensuite la prise en charge des autres navigateurs. Ceci permet de s’assurer que vos pages Web se comportent comme prévu et réduit l’impact négatif des navigateurs plus anciens ou non traditionnels.

Stratégies de secours CSS (Cascading Style Sheets)

Il est également recommandé d’utiliser des stratégies de secours lorsque vous créez des règles CSS, notamment lorsque vous utilisez des propriétés CSS qui ne sont peut-être pas encore largement adoptées. Pour créer des stratégies de secours CSS efficaces, définissez des règles de secours avant de définir la règle de prédilection.

Pour illustrer cela, la spécification CSS définit la propriété opacity pour contrôler la transparence des objets affichés sur une page Web. Parce qu’elle est prise en charge dans Windows Internet Explorer 9, vous pouvez utiliser la propriété opacity pour contrôler l’apparence d’un élément div comme le montre l’exemple de code suivant.


  #css3filter {      
    opacity: 0.5;
  }

Dans cet exemple, les objets dotés d’une valeur d’attribut id de #css3filter s’affichent avec un niveau de transparence de 50 %. Cet exemple fonctionne dans Internet Explorer 9 et dans d’autres navigateurs récents. Toutefois, pour contrôler la transparence dans des versions antérieures d’Internet Explorer, vous devez utiliser le filtre alpha comme l’illustre l’exemple de code suivant.


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

Pour créer une stratégie de secours CSS, combinez les exemples précédents comme le montre l’exemple de code qui suit.


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

Dans cet exemple, plusieurs règles sont utilisées pour définir l’opacité d’un objet donné. La méthode la moins souhaitable (comportement pris en charge à l’origine dans Microsoft Internet Explorer 5.5) permet de s’assurer que l’opacité s’affichera lorsque la page Web est consultée par des versions antérieures d’Internet Explorer. Si la page Web contenant cette règle s’affiche dans un navigateur Web prenant en charge la norme CSS3 (Cascading Style Sheets, niveau 3), elle utilise la propriété opacity pour afficher la page et ignore la règle contenant le filtre alpha.

 

 

Afficher:
© 2014 Microsoft