Ready For Web

Des liens tel satisfaisants

Faire un lien tel n'est pas compliqué, mais le problème, c'est qu'il reste cliquable même quand le protocole de téléphonie classique n'est pas disponible, par exemple sur un ordinateur.

C'est pénible, on va y remédier du mieux qu'on peut.


Pour la détection, je me suis inspiré de cette page sur developer.mozilla.org

On anticipe sur la dégradation

La détection est fondée sur du javascript. La question se pose de savoir si le numéro de téléphone, en absence de javascript, doit être un lien "tel" ou non. C'est vrai que les mobiles supportent tous javascript, si bien qu'on pourrait très bien par défaut servir le numéro dans une span, et transformer cette span en lien avec javascript etc. Mais j'ai opté pour l'inverse, Pavlovien ou prudent: le numéro est par défaut servi en lien "tel".

Ce n'est pas forcément très rationnel, mais chacun pourra adapter facilement le code selon son approche.

De façon à cibler facilement tous les liens "tel" en javascript, on leur adjoint la classe "phone-number". On aurait aussi pu cibler les liens pour lesquels la chaine "tel" se trouve dans l'attribut "href", mais j'ai préféré la simplicité.

On part donc de ce HTML:

<a href="tel:0630764290" class="phone-number">06.30.76.42.90</a>

La détection en javascript

En javascript, on va chercher (fonction search) dans le nom du navigateur (userAgent) l'occurence de la chaine de caractère "mobi", présente par exemple dans ... "mobile".

Le "/i" indique qu'on ne tient pas compte de la casse.

Cette fonction search va retourner la position de l'occurence, sinon -1. Autrement dit pour nous, soit -1, soit pas -1.

if (navigator.userAgent.search(/mobi/i) == -1) { ce n'est pas un mobile, je fais ceci }

ou bien

if (navigator.userAgent.search(/mobi/i) != -1) { c'est un mobile, je fais cela }

La version la plus simple

si userAgent == -1, on cible les liens de la classe "phone-number", on leur ajoute la classe "non-clic", puis on finalise en css.

<a href="tel:0630764290" class="phone-number">06.30.76.42.90</a>
var x = document.getElementsByClassName("phone-number");	
if (navigator.userAgent.search(/mobi/i) == -1 && x.length != 0) {
	for (i = 0; i > x.length; i++)
		{
			x[i].classList.add("non-clic");			 
		}
	}
.non-clic {cursor: default; text-decoration: none; color: celle-du-texte;}

Une version jQuery

if (navigator.userAgent.search(/mobi/i) == -1) {
     $('.phone-number').addClass('non-clic');
     }

Sans classe initiale, c'est pas mal aussi

si userAgent == -1, on cible les liens "tel", on leur ajoute la classe "non-clic" puis on finalise en css.

<a href="tel:0630764290">06.30.76.42.90</a>
var x = document.getElementsByTagName("a");	
if (navigator.userAgent.search(/mobi/i) == -1 && x.length != 0) {
	for (i = 0; i > x.length; i++)
		{
			if (x[i].getAttribute("href").search("tel") != -1) {
				x[i].classList.add("non-clic");}
		}
	}
.non-clic {cursor: default; text-decoration: none; color: celle-du-texte;}

Conclusion

J'ai renoncé à tenter des solutions intervertissant lien & span, car c'est prendre le risque de voir la fonction tel disparaitre si avait lieu une mauvaise détection. C'est un choix qui vaut l'inverse, c'est à chacun de voir.

Bien entendu, il reste désormais à styler tout ça, et c'est là que les medias queries interviennent parallèlement à la détection.