Hello, I’m Vinch

And this is my website.

innerText ?

10/13/08

This post is more than 9 years old. It might not reflect my current skills and convictions.

Je vous propose aujourd’hui un bon vieux post technique pour briser cette longue période de silence…

Il y a peu, j’ai eu besoin de récupérer le contenu textuel d’un tag HTML. Concrètement, je voulais lire le texte se trouvant dans un fil d’Ariane, sans récupérer le contenu HTML de ce tag. Pour faire simple, à partir de ceci :

<ol id="breadcrumbs">
	<li><a href="index.php">Accueil</a> &raquo;</li>
	<li><a href="news.php">News</a> &raquo;</li>
	<li>Le point sur la crise financière...</li>
</ol>

Je voulais obtenir quelque chose comme :

Accueil &raquo; News &raquo; Le point sur la crise financière...

En passant, et comme je vous vois déjà venir, je suis au courant que mon markup n’est pas sémantique… Je devrais virer les &raquo; et les remplacer par un background sur le a (ou mieux : utiliser la pseudo-classe CSS :after mais c’est encore loin d’être supporté sur tous nos navigateurs…)

Bref, ce dont j’avais besoin n’était pas quelque chose comme innerHTML (qui m’aurait donné tout le contenu HTML du ol, ce qui inclut les tags li et a) mais plutôt quelque chose comme innerText.

Est-ce que innerText existe ?

Oui et non… A vrai dire, cela fonctionne partout sauf sur les navigateurs dont le moteur de rendu est Gecko, c’est-à-dire Mozilla Firefox, principalement… Gecko fait le même boulot via la propriété textContent et il a raison car c’est le standard W3C.

Pour pouvoir récupérer le contenu textuel d’un tag, de façon cross-browsers, il faut donc tester si textContent existe, l’utiliser si ce test s’avère positif et utiliser innerText dans tous les autres cas.

Comment tester que innerText (ou textContent) existe ?

Simplement en testant sur un élément qui est toujours présent dans un document, l’élément body, par exemple :

var hasInnerText = !!document.getElementsByTagName('body')[0].innerText;

Maintenant, vous pouvez tester et vérifier la valeur de hasInnerText avant d’utiliser innerText ou textContent.

Mais cela me semble un peu laborieux… Pourquoi ne pas créer une fonction qui renverra toujours le bon résultat, quel que soit le navigateur utilisé ? Le top du top est d’ajouter une méthode directement sur Element via le prototypage :

Element.prototype.text = function() {
	return !!document.getElementsByTagName('body')[0].innerText ? this.innerText : this.textContent;
}

Vous pouvez désormais utiliser cette expression, elle donne le résultat espéré :

document.getElementById('breadcrumbs').text();

Cela résout ce problème dont je suis sans doute un des seuls sur terre à m’être posé (quoique). Pendant que vous êtes en train de paniquer à propos de la crise, de votre argent en banque, de vos investissements et du pouvoir d’achat, j’essaye de m’occuper comme je peux…

Détecter la présence de Firebug

05/19/08

This post is more than 9 years old. It might not reflect my current skills and convictions.

« Il est bien connu que Firebug ralentit Gmail, sauf s’il est configuré correctement. »

Voilà le message que vous avez sans doute tous obtenus en ouvrant Gmail dernièrement. Je trouve que le « Il est bien connu » est un peu exagéré (c’est pas vraiment une vérité absolue depuis la nuit des temps non plus) mais c’est vrai : Firebug ralentit les sites où il y a beaucoup de JavaScript et de XMLHttpRequest (AJAX pour les intimes).

On est bien d’accord, Firebug est un outil fantastique dont n’importe quel développeur Web de cette vieille terre ne pourrait plus se passer. D’ailleurs, à la question : « Comment on faisait du debug JavaScript avant Firebug ? », la première réponse qui me vient généralement à l’esprit est : « Avant, on ne faisait pas de JavaScript ! » (de la même manière qu’on n’envoyait pas de SMS avant l’apparition des téléphones portables).

Mais voilà, surfer avec Firefox et Firebug, c’est un peu comme faire les 20 Km de Bruxelles avec un sac à dos rempli de cailloux ! Une solution loin d’être idiote est de faire deux profils : un pour le développement et un pour le surf.

Mais venons-en au vrai sujet de ce billet : détecter la présence de Firebug à partir du browser. Cela pourrait être utile pour prévenir vos visiteurs que s’ils désactivent Firebug, leur expérience utilisateur sera améliorée dans votre application.

Pour cela, la première chose à faire est de vérifier la présence de l’objet console. Mais comme Firebug n’a pas l’exclusivité sur l’objet console (Companion.JS l’implémente sur IE), ce n’est malheureusement pas suffisant ! Heureusement, Firebug ajoute la propriété firebug à l’objet console et c’est ce qui permet de détecter que notre ami Firebug est là :

if (console && "firebug" in console) {
	// afficher un message de mise en garde (ou de félicitations)
}

ou encore :

if (console && console.firebug) {
	// afficher un message de mise en garde (ou de félicitations)
}

Ce n’est pas plus compliqué que ça mais je suis certain que votre vie a changé depuis le moment où vous avez lu ce billet. Bon amusement !

Plagiat

04/24/08

This post is more than 9 years old. It might not reflect my current skills and convictions.

Le plagiat (du latin plagiarius, ii, celui qui vole l’esclave d’un autre ou vend une personne libre) consiste à s’inspirer d’un modèle que l’on omet délibérément de désigner. Le plagiaire est celui qui s’approprie frauduleusement le style, les idées, ou les faits.

* L’original
* La copie