Verifier le support des data URI

Sam — Sat, 28 Apr 2012 18:06:01 +0000

Les data URI sont un moyen intéressant de limiter le nombre de connections HTTP lors de l’accès à votre site. Malheureusement comme la plupart des fonctionnalités CSS3, le support n’est pas généralisé. Voici un snippet qui permet de vérifier si le navigateur possède les supporte:

  /**
  Check for data uri support by trying to insert a 1x1px image.
  You can pass optional callbacks: "yes" for success, "no" for no support.
  Default behavior is to add data-uri or no-data-uri as a class in the body
  */
  support_data_uri: function(yes, no){
    var data = new Image();
    var yes = yes || function(){ document.body.className += " data-uri"; };
    var no = no || function(){ document.body.className += " no-data-uri"; };
    data.onload = data.onerror = function(){
      if(this.width + this.height != 2){no()} else {yes()}
    }
    data.src = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
  }

Ca fonctionne de manière très simple: on crée une image (en fait le plus petit gif du monde), et on vérifie si il est chargé correctement. On peut passer deux callbacks optionnels appelés en cas de support ou non. Par défaut les callbacks ajoutent juste une classe au body.

A moins d’avoir un besoin très particulier, les callback par défaut font un très bon boulot. On peut ensuite facilement mettre des règles en CSS pour un cas ou l’autre. Par exemple pour l’image d’un bouton:

html.data-uri button {
    background-image:url("data:image/png;base64,<...>");
}
html.no-data-uri button {
    background-image:url("images/foo.png");
}

Evidemment, si vous avez beaucoup de fonctionnalités à tester, alors utiliser Modernizr sera probablement une solution plus robuste (le check pour les data URI existe en tant que plugin). Mais pour du one-shot, ce snippet est idéal..

data-uri – Sam & Max

Verifier le support des data URI