Vous avez des cards cliquables à intégrer ? Ce classique du frontend qui, à première vue, semble simple comme bonjour. Sauf que non. Parce que si vous avez déjà essayé de rendre une <div> entière cliquable en y collant un <a> juste au dessus vous savez que ça finit souvent en HTML aussi élégant qu’un sandwich au jambon oublié au soleil.
Le problème : l’HTML qui pue la bidouille
Imaginez : vous avez une belle card Bootstrap, avec une image, un titre, un petit texte et un bouton. Logiquement, vous voulez que toute la surface soit cliquable. La solution naïve ? Enrober toute la card dans un <a>. Sauf que ça, c’est du HTML de cowboy. Pourquoi ? Parce que :
- Les balises
<a>ne sont pas censées contenir des<div>,<h2>ou autres joyeusetés de structure. C’est sale, c’est non-semantique, et ça fait pleurer les puristes (et les validateurs W3C). - Si vous essayez de mettre un
<a>à l’intérieur de la card, il ne couvrira que sa propre surface. Résultat : votre utilisateur clique à côté du lien et se retrouve à fixer un écran vide comme un poisson rouge devant une télé éteinte. - Les solutions de contournement ? Positionnement absolu,
z-indexà gogo, ou pire : du JavaScript pour simuler un clic. Bref, du code qui sent le désespoir.
Heureusement, Bootstrap a une solution : .stretched-link. Une classe CSS qui fait exactement ce qu’elle dit : elle étire un lien pour qu’il couvre toute la surface de son parent. Et le meilleur ? Ça marche sans toucher à votre HTML, sans bidouilles douteuses, et sans vous faire passer pour un développeur qui code avec les pieds.
Comment ça marche ? La magie du CSS
Le principe est aussi simple qu’efficace. Vous ajoutez la classe .stretched-link à un <a> situé à l’intérieur d’un conteneur (votre card, par exemple). Ensuite, Bootstrap s’occupe du reste avec un peu de CSS :
.stretched-link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
Ce petit bout de code crée un pseudo-élément qui couvre toute la surface du parent. Et comme ce pseudo-élément est lié au <a>, toute la zone devient cliquable. Magique, non ?
Exemple concret avec une card Bootstrap :
<div class="card" style="width: 18rem;">
<img src="image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Titre de la card</h5>
<p class="card-text">Un texte qui donne envie de cliquer.</p>
<a href="#" class="btn btn-primary stretched-link">Cliquez-moi</a>
</div>
</div>
Ici, même si le <a> est un bouton, toute la card est cliquable. Pas besoin de JavaScript, pas besoin de bidouiller le DOM, et surtout : pas besoin de vendre votre âme à un framework obscur qui promet de résoudre tous vos problèmes (je vous regarde, vous savez qui vous êtes).
Les limites : parce que rien n’est parfait
Bien sûr, .stretched-link n’est pas une solution universelle. Voici ce qu’il faut garder en tête :
- Un seul lien par conteneur : Si vous essayez d’étirer plusieurs liens dans la même card, seul le dernier fonctionnera. Logique, mais bon à savoir.
- Le parent doit être en position relative : Bootstrap ajoute
position: relativeaux conteneurs compatibles (comme.card), mais si vous utilisez un autre élément, il faudra le spécifier manuellement. - Pas de support natif en dehors de Bootstrap : Si vous n’utilisez pas Bootstrap, vous devrez recréer la logique en CSS. Ce n’est pas sorcier, mais c’est un peu dommage.
Enfin, n’oubliez pas que cette technique repose sur un pseudo-élément. Si votre card contient déjà des éléments interactifs (comme un bouton de suppression ou un menu déroulant), ça peut vite devenir le bordel. Dans ce cas, mieux vaut repenser votre UX ou accepter que tout ne soit pas cliquable.
En résumé, .stretched-link est une solution propre, simple et efficace pour rendre une card cliquable sans transformer votre HTML en champ de bataille. C’est loin d’être révolutionnaire, mais c’est exactement le genre de petite astuce qui rend la vie des développeurs un peu moins pénible. Et ça, c’est déjà pas mal.