Le TwiBlog

Vous connaissez tous l'extension "Web Developer" de firefox, indispensable pour tout développeur web...

Et bien Microsoft a sorti la sienne pour IE et je vous propose de l'installer pour votre IE sous Wine

Pour l'installer, c'est simple.

Vous téléchargez le .msi sur la page pré-citée (je n'ai pas réussi avec ie sous wine, j'ai donc utilisé fx)

Vous installez, si ce n'est déjà fait MS Installer :

• Téléchargez-le
• Installez-le : wine InstMsiA.exe
• Dans votre fichier de config (~/.wine/config si vous avez suivi ma deuxième procédure pour avoir IE sous Wine), ajoutez, dans les "DllOverrides" :

"msi" = "native, builtin"
"msiexec.exe" = "native, builtin"

Une fois MS Installer installé, utilisez la ligne de commande suivante pour installer votre barre d'outil au format .msi :

wine msiexec /i msifile.msi

Les connaisseurs sauront combien peuvent être utiles les deux fonctions que sont

• getElementById : récupérer un élément du DOM par son ID
• get ElementsByTagName : récupérer un tableau d'éléments définis par un tag

Et bien voici quelques chose de très utile : récupérer un tableau d'éléments par un sélecteur CSS !

Deux scripts pour ça :

• "cssQuery", développé par Dean Edwards, auteur de "IE7" dont j'ai déjà parlé dans un précédent billet : http://dean.edwards.name/my/cssQuery/
• "getElementsBySelector", la même chose mais en plus ancien (2003) et qui gère moins de types de sélecteurs mais restera largement suffisant pour la plupart des besoins : http://simon.incutio.com/archive/2003/03/25/getElementsBySelector

Je n'évoquerai pas les nombreuses possibilités offertes par ces scripts, mais néanmoins sachez que des outils tel que "csshover.htc" sont développés dans le même esprit (csshover.htc possède d'ailleurs une fonction GetElementsBySelect)

Il devient facile avec ce genre d'outil de développer ses propres htc ou équivalent, qui répondront à un besoin précis, plutôt que charger à chaque fois les htc qui peuvent ralentir le chargement de la page en l'analysant au démarrage.

Même si mon titre n'est pas forcément très clair, c'est un outil fabuleux que je viens de découvrir : Behaviour : Using CSS selectors to apply Javascript behaviours

Cet outil permet, en utilisant des sélecteurs css comme descripteur, d'ajouter des évènements javascript à tout objet contenu dans une page, sans avoir à modifier le code xhtml de la page.

Le plus simple est de voir l'exemple exposé sur le site de l'auteur : http://bennolan.com/behaviour/

En complément de l'article précédent, voici un autre behavior pour qu'internet explorer gère correctement les canneaux alph des images png.

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

Pour l'utilisation, même principe, rajouter le sélecteur

img { behavior: url("pngbehavior.htc"); }

Par contre ne pas oublier de télécharger également l'image blank.gif. Plus d'explications sur le site de l'auteur.

Dans le design web, quelque chose qui manque vraiment à internet explorer, c'est la gestion des "hover" sur autre chose que des liens.

"hover", c'est une pseudo-class qui s'utilise de la façon suivante :

#mon_element:hover { monc_code_css }

Le css indiqué sera alors appliqué à l'élément au survol de ce dernier.

L'absence de cette fonctionnalité dans internet explorer frustre notre créativité.

Or il existe une solution. Un fichier "htc", qui modifie le comportement d'internet explorer. On connaissait déjà le magnifique mais lourd "ie7" (qui n'a rien a voir avec internet explorer 7, mais l'auteur a du utiliser ce nom dans l'idée de proposer tout ce qu'il aimerait voir dans internet explorer 7) que l'on trouvera ici : http://dean.edwards.name/IE7/.

Mais là point besoin de charger tout ça, nous utiliseront le "csshover.htc" que nous propose le cite http://www.xs4all.nl/~peterned/csshover.html

Comment l'utiliser ? Très simplement... Il suffit de rajouter dans sa css

body { behavior: url(csshover.htc); }

(en n'oubliant pas de placer le htc dans le même répertoire que le css

Seul défaut de ce procédé, la feuille de style ne validera plus, il peut être alors pertinent de placer cette déclaration dans un css à part, importé grace à @import.