3

Agrandissez vos zones cliquables

Salut les amis !

Aujourd’hui, pas d’article mais plutôt une petite astuce en CSS. N’avez-vous jamais été au bord de la crise de nerf en tentant désespérément de cliquer sur un lien trop petit ? Je pense particulièrement aux liens du menu principal de votre site ou d’un site inconnu. Prenez le même site et visitez-le sur votre mobile s’il n’est pas adapté à cette utilisation histoire d’enfoncer le clou. Un peu de masochisme ne vous fera pas de mal et vous donnera des pistes d’amélioration ! :D

« À la base, ce n’est pas fait pour ça »
(adaptation du grand Eddy LeQuartier)

La meilleure approche, lorsque vous débutez un projet, est de ne pas donner les dimensions aux LI mais directement aux liens en leur assignant un display block ou inline-block. Ainsi vous jouez directement sur leur zone cliquable.

Mais comme vous n’avez pas forcément participé au développement initial et que tout n’est pas tout beau dans le meilleur des mondes, vous allez peut être devoir repasser sur un site non-idéalement pensé au départ.

Voici une petite astuce qui vous permettra d’agrandir vos zones cliquables sans trop vous prendre la tête.

Solution MacGyver !

Pas d’inquiétude, il ne s’agit pas de grosse refonte ni même d’un énorme travail. Nous allons simplement utiliser les pseudo-éléments CSS. Vous vous rappelez d’eux ? J’espère que oui !

Voici nos menus, le premier étant le menu de base. Le second correspond à notre amélioration. Nous avons en effet rajouté un pseudo-élément :before (:before et non ::before pour la compatibilité IE8) que nous avons positionné en absolu par rapport à nos liens positionnés en relatif. Vous pouvez le repérer avec son background-color que nous avons laissé afin de le repérer plus facilement. En donnant des dimensions plus importantes au pseudo-élément qu’à son parent, nous augmentons naturellement la zone cliquable de chaque lien.

Le troisième exemple correspond à une bonne manière de penser sa navigation pour naturellement augmenter ces zones cliquables.

See the Pen MacGyver trick to improve your links by L’ami du développeur (@lamidudev) on CodePen.


À bientôt les amis, n’oubliez pas d’améliorer constamment vos productions !

A propos de Gaëtan

Gaëtan a écrit 3 articles sur le blog.

Les amis de nos amis sont nos amis, alors partageons !

Laissez un commentaire





Si vous êtes un vrai développeur, vous devez savoir compter.
Alors on vous met au défi !
Si vous réussissez cette épreuve, nous nous ferons une joie de lire votre commentaire.