Travailler vos liens et ancres avec jQuery et/ou CSS

J’ai recherché des possibilités en PHP pour retravailler les liens fournis par WordPress il n’y a pas longtemps ; ce qui m’a amené à cette idée d’article.
Beaucoup de possibilités de styles sont disponibles grâce à CSS, mais il est parfois nécessaire de transformer le comportement d’un lien avec JavaScript.

Regardons ensemble ce qu’il est possible de faire du côté de jQuery dans un premier temps, puis nous verrons les possibilités offertes par CSS.

Je tiens à rappeler que JavaScript doit autant que possible être une surcouche à un contenu HTML consultable et fonctionnel avec JS désactivé.
De même, les fonctions lancées par l’interception d’un évènement sur un lien ne doivent par surprendre vos visiteurs, n’oubliez donc pas de les prévenir de choses qui vont se produire.

Semblant de bonne pratique mise à part, rentrons dans le vif du sujet.

Étendre jQuery pour la gestion de vos liens

Imaginons par exemple que nous ayons besoin dans un projet de manipuler les liens en fonction de leurs caractéristiques.
Les principales fonctions des liens se retrouvent directement dans la valeur de leur attribut href, c’est donc là-dedans que nous allons piocher.

En créant des extensions de sélecteur jQuery, nous allons pouvoir simplifier la présentation et donc la lisibilité de nos développements.

Pour créer une extensions de sélecteur jQuery, il nous faut une manière de discriminer un objet, et le retourner à jQuery.
Pour cela rien de plus aisé, la bibliothèque le prévoit assez simplement grâce à l’expression jQuery.expr[':'].

Les codes qui suivent doivent être utilisés après le chargement de la bibliothèque jQuery.

Exemple de création d’un sélecteur :external :

// Création du sélecteur :external
$.expr[':'].external = function(obj){
	if(!obj.href) {return false;}
	return obj.hostname != location.hostname;
};
$('a:external').addClass('external');

Exemple de création d’un sélecteur :tel :

// Création du sélecteur :tel
$.expr[':'].tel = function(obj){
	return $(obj).is('[href^="tel:"]');
};
$('a:tel').addClass('tel_num');

Bien, mais si nous avons 4 ou 5 sélecteurs à ajouter comme cela, ça va faire long.
Nous pouvons très bien utiliser la syntaxe suivante pour réunir les fonctions qui nous permettent de créer nos sélecteurs sous la même forme :

// Création des plusieurs sélecteurs
$.extend($.expr[':'], {
	secure: function(a) { 
		return $(a).is('[href^="https:"]');
	},
	notsecure: function(a) { 
		return $(a).is('[href^="http:"]');
	},
	selfanchor: function(a) { 
		return $(a).is('[href^="#"]');
	}
});

// exemples d'utilisation
$('a:secure').addClass('https_link');
$('a:notsecure').addClass('http_link');
$('a:selfanchor').addClass('self_link');

Dans ces exemples de code, j’utilise de simples addClass pour présenter les nouveaux sélecteurs. C’est à vous de voir, au sein de votre développement, à quoi vont pouvoir vous servir ces sélecteurs.

Je ne dis pas que ces exemples sont probants ou pertinents, mais ils sont là pour illustrer les possibilités d’extension de jQuery, notamment pour les liens.
Peut-être aurez-vous d’autres idées pour optimiser la gestion de vos liens, ou des besoins précis pour lancer une fonction sur un type de lien.

Ok mais… seulement en JS ?

Non, justement, CSS peut être suffisant si vous n’avez besoin que de modifier l’apparence de vos liens.
En effet, il est tout à fait possible de cibler un élément en fonction du contenu de son attribut, cela vaut pour l’attribut href.

/* cible les liens dont l'attribut href commence par */
a[href^="mailto:"] { }
a[href^="tel:"] {}

/* cible les liens dont l'attribut href fini par */
a[href$=".pdf"] { }
a[href$=".doc"] { }

/* cible les liens dont l'attribut href contient */
a[href~="twitter.com/!#"] { }
a[href~="?redirect"] { }

Cette technique est compatible avec Internet Explorer 7 et technologies supérieures… autant vous dire que vous pouvez déjà vous amuser !

Voilà, vous êtes parés pour styler et retravailler vos liens comme des pros !
Les commentaires sont à votre disposition pour nous faire part de vos idées d’amélioration, d’utilisation ou pour toute question.

J’essayerai de vous proposer de petites extensions de sélecteur dans ce genre pour d’autres cas pratiques plus tard 😉