Cela faisait un petit bout que je n’avais pas chialer après Internet Explorer, mais voilà que j’ai eu besoin de rentrer dans du vieux code. Quand je parle de vieux code, c’est du code qui n’utilise pas de librairie telle que jQuery (Je suis vendu à cette librairie javascript ) ou on est obligé de tout faire à bras… donc la compatibilité inter-navigateur.

J’ai eu le plaisir de découvrir que la méthode indexOf pour les Array sous Internet Explorer 8 et précédent n’était pas implémenté tandis qu’elle est présente depuis la version 1.5 de Firefox.

Bon pour ceux qui aurait besoin d’une solution pour rendre compatible leur code, voici la solution:

if(!Array.indexOf){
   Array.prototype.indexOf = function(obj){
      for(var i=0; i<this.length; i++){
         if(this[i]==obj){
            return i;
         }
      }
      return -1;
   }
}

Bonne programmation à tous.

L’intégration CSS d’un site pour IE8 et – peut parfois devenir un vrai cauchemar. Il est donc utile de faire appel à des outils nous aidant dans cette tâche, et nous verrons ici une sympathique bibliothèque javascript répondant au nom de IE7.js. En fait, elle est livrée en 3 fichiers, un pour chaque version du navigateur (7, 8 et 9). Chaque fichier met à jour le DOM et le CSS pour qu’il soit le plus possible compatible avec le IE correspondant. Une page est disponible ici décrivant toutes les corrections apportées par le script. On pourra donc écrire opacity:0.5; sans avoir à créer une feuille de style supplémentaire pour  mettre le filtre css microsoft impossible à retenir. Bref plusieurs sélecteurs et propriétés seront maintenant supportés quelque soit la version du navigateur. Il gère même la transparence des images png pour IE6!

Voici l’exemple d’une page avant/après l’ajout du script :
Avant
Après

Le css:

.square {

position: relative;width: 80px;height: 80px;background-color: #9FF;top : 40px;right: 20px;
opacity: 0.5;
}

p:first-child { font-weight: bold; max-width: 400px; }

p:before{ content : ‘«’; }

p:after{ content : ‘»’; }

input[type='submit']{ width: 200px;}

header, section + section { color : #FFF; background: blue; padding : 20px; }

La bibliothèque est disponible en téléchargement sur Google Code:
http://code.google.com/p/ie7-js/

On sait que de nombreuses solutions existent en matière de développement web pour ne pas se limiter aux web safe fonts lorsqu’on veut styler du texte HTML. Une nouvelle a fait son apparition il y a quelques temps déjà : Google Font API.

Comment ça fonctionne ?

On choisit une police parmi celles de la bibliothèque disponible en ligne, qui s’enrichit régulièrement de nouveautés dans différents styles. Pour pouvoir l’utiliser, il faut insérer dans le <header> de son site web le lien vers cette police afin de la rendre disponible en CSS :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com
/css?family=Tangerine">

On remarque que l’appel se fait via une variable passée dans l’URL. De cette façon, il va être possible d’insérer plusieurs polices en même temps, ou plusieurs versions de la même police. Par exemple :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com
/css?family=Tangerine|Inconsolata|Droid+Sans">

permet d’insérer les polices Tangerine, Inconsolata et Droid Sans ;

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com
/css?family=Tangerine:bold,bolditalic">

permet de disposer de la police Tangerine en version Bold et Bold Italic. (Attention : la police par défaut, sans ses versions Bold, Italic, etc. ne pourra en effet pas s’afficher avec les effets CSS tels que font-weight. Si on souhaite appliquer des mises en forme, mieux vaut insérer la police voulue avec toutes ses variations)

Lire la suite

Suite à mon article sur l’utilisation du css conditionnel voici une petite mise à jour. Au passage à la version 5.3 de php la fonction split pose problème. Visuellement le plus souvent cela ne changera rien pour vous mais en affichant les notice et erreur de ce monde depuis le fichier de c-css on se rend compte que le css n’est pas chargé correctement.

C’est pourquoi je vous invite à remplacer les 2 fonctions split utilisées (ligne 910 et 943 pour ceux qui ne veulent vraiment pas chercher : vous n’avez plus d’excuse) par la fonction explode.

Et la Ho magie, plus d’erreur : un beau chargement sans erreur et notice comme on les aime chez Quibo !

Il y a quelques jours, j’ai ajouté une Google Map sur un de nos sites. J’ai eu l’agréable surprise de voir que Google avait sorti une 3e version de son API. Cette nouvelle version sortie en mai dernier vient avec des nouvelles fonctionnalités très intéressantes.

Comme :

• plus besoin de « api key », nombreux vont être contents. Plus besoin de récupérer une key (qu’on oublie…) pour faire une mise en ligne;
• la possibilité de communiquer avec le GPS de votre appareil mobile ou cellulaire (iPhone et Android), pour vous placer sur la map;
• et par conséquent, calculer le trajet pour vous y rendre;
• la personnalisation des contrôles a été simplifiée;
• etc…

Je vous invite à consulter la documentation, ainsi que les tutoriels directement.