Une fois qu'on a la couleur parfaite, il est souvent nécessaire de la décliner pour obtenir une version plus claire ou plus foncée, que ce soit pour faire une nouvelle proposition ou créer des états différents (survol, inactif, etc…), et c'est souvent là que la difficulté commence !

Grâce à HexColorTool, c'est pourtant très simple :

• On indique son code couleur (hexadécimal)
• On choisit la déclinaison souhaitée (plus claire ou plus foncée)
• Et pour finir des palliers en pourcentage (par exemple, en rentrant 25%, on obtiendra des couleurs 25%, 50% et 75% plus claire ou foncée)

Voir le site

Une conversation entre développeurs qui dure depuis bientôt trois ans a abouti à ce code très pratique pour détecter n'importe quelle version d'Internet Explorer en JavaScript :

var ie = (function(){
    // for-loop saves characters over while
    for( var v = 3,
             // b just as good as a div with 2 fewer characters
             el = document.createElement('b'),
             // el.all instead of el.getElementsByTagName('i')
             // empty array as loop breaker (and exception-avoider) for non-IE and IE10+
             all = el.all || [];
         // i tag not well-formed since we know that IE5-IE9 won't mind
         el.innerHTML = '',
         all[0];
       );
    // instead of undefined, returns the documentMode for IE10+ compatibility
    // non-IE will still get undefined as before
    return v > 4 ? v : document.documentMode;
}() );

// Et en version minifiée
var ie=function(){for(var a=3,b=document.createElement("b"),c=b.all||[];b.innerHTML="",c[0];);return 4<a?a:document.documentMode}();

Si vous n'êtes pas dans Internet Explorer :

ie === undefined

Si vous êtes dans IE (>=5), vous pouvez connaitre la version exacte :

ie === 7; // IE7

La condition pour détecter IE revient donc à écrire :

if (ie) {}

Et pour connaitre les versions, on utilise les opérateurs JS classiques :

ie === 6 // IE6
ie > 7 // IE8, IE9 ...
ie < 9 // Toutes les versions inférieures à IE9    

C'est une pratique courante pour améliorer les performances web : utiliser les data URIs pour appeler les images afin de limiter les requêtes HTTP.

Reste à savoir comment convertir les images ?

Voici un site qui fait le boulot, via un simple glisser-déposer dans votre navigateur.

Voir le site

Seul inconvénient : ça ne fonctionne que sur Chrome…

Le problème du rendu des images sur les écrans à haute densité de pixels (Retina, chez Apple) est maintenant bien connu, ainsi que les techniques pour l’éviter.

Cependant, dans le cas d’une Google Map et des icônes (ou “marker”) qu’on peut lui associer, c’est un peu différent, du moins à première vue.

Voici la méthode pour rendre compatible les “custom icons” de l’API Google Maps avec les écrans à haute densité de pixels :

var markerIconVersion = (window.devicePixelRatio > 1.5) ? 'icon@2x.png' : 'icon.png';
var markerIcon = new google.maps.MarkerImage(markerIconVersion, null, null, null, new google.maps.Size(xx,xx));

// Déclaration du marker
marker = new google.maps.Marker({
    icon: markerIcon,
    // etc...
});

// Règle spécifique pour éviter un bug sur certaines version de l'API 
// cf : http://stackoverflow.com/questions/9208916/google-map-custom-markers-retina-resolution
if (window.devicePixelRatio > 1.5) {
    marker.setOptions({ optimized: false });
}

On a donc besoin de 2 icônes différentes :

• icon.png, destiné aux écrans normaux
• icon@2x.png, destiné aux écrans à haute densité de pixels. C’est simplement icon.png avec des dimensions multipliées par 2.

Ensuite, dans la déclaration de la variable markerIcon, on va donner les dimensions de icon.png à la déclaration new google.maps.Size(xx,xx).
L’image @2x sera donc redimensionnée à la taille de l’image normale et son rendu optimisé sur les écrans Rétina.

La présentation « Measuring Web Performance », est une vraie mine d’or pour mieux comprendre, mesurer et améliorer les performances web de vos sites

L’auteur, Dave Olsen, a notamment écrit le chapitre sur l’optimisation pour mobile dans le livre de Smashing Magazine « The Mobile Book ».

Voir la présentation