18041 sujets

Questions générales et questions de débutants

Cursor : comment distinguer les liens d'ancrage ?

Bonjour,

Il me semble qu'il existe trois types de liens principaux.

les liens dans la page, sauf erreur "liens d'ancrage".

les liens vers une autre page dans le site.

les liens vers un autre site, "liens externes" je suppose.

Je suis étonné que la propriété CURSOR ne fasse pas la distinction entre ces trois types de lien.

Faites-vous visuellement la distinction d'un lien d'ancrage et si oui comment ?
Modérateur
Bonsoir,

CURSOR est incapable de faire une distinction, c'est un ordre, une fonction qui s'applique.

Pour appliquer cet ordre , il faut une condition qui est tester via ton selecteur CSS .
Par exemple a {cursor:pointer} . Si c'est une balise <a>, alors au survol tu affiche tel curseur.

Ces balises ont généralement un attribut href, et une condition peut-être tester sur sa valeur https://developer.mozilla.org/fr/docs/Web/CSS/Attribute_selectors
L'absence d'attribut est aussi une condition qui peut-être vérifier par un sélecteur via 
a:not([href]){/* style(s)*/}


Cdt Smiley cligne
Modifié par gcyrillus (02 Jul 2023 - 21:28)
Bonsoir. Notez qu'il n'est pas très accessible de se focaliser uniquement sur le pointage du curseur, en effet ce dispositif ne fonctionnera qu'avec un ordinateur disposant d'un dispositif de pointage, comme une souris, donc exit les smartphones...

En principe on ajoute quelque chose au texte du lien lui-même, une icône unicode par exemple (exemple du code ci-dessous en ligne) :
.links p a:not([href^="#"])::after { /* Liens internes, sauf les ancres */
  content: ' ?'; /* Edit : l'unicode n'est pas interprété sur le forum Alsacréations, mais dans l'idée ce sont des flèches...  */
}

.links p a[href*="//"]::after { /* Liens externes. Ici cela ne fonctionne que parce que je ne mets jamais mes propres url en absolue, donc cette condition détectera celles qui le sont, c'est à dire celles des autres sites */
  content: ' ?';
}

Remarquez ici que j'ai mis une classe parente, ".links", afin de servir d'espace de nom. Il faut en effet limiter la portée de ce code CSS dans la page, sinon tous les liens vont être impactés (ceux de menus, etc).
Modifié par Olivier C (03 Jul 2023 - 00:53)
Bonjour,

Merci de votre suivi.

J'ai dû mal m'exprimer car vous n'avez pas bien compris la question.

Mon problème : les différents types de liens ne sont pris en compte par aucune valeur de CURSOR.

En gros je suis obligé d'utiliser le valeur POINTER que ce soit une ancre, un lien interne ou externe.

Aucun standard n'est prévu pour distinguer VISUELLEMENT au survol ces types de lien.

Donc même si je m'amuse à créer mes propres images par la valeur URL il n'y a aucun standard visuel auquel se rattacher.

Olivier C a écrit :
Notez qu'il n'est pas très accessible de se focaliser uniquement sur le pointage du curseur, en effet ce dispositif ne fonctionnera qu'avec un ordinateur disposant d'un dispositif de pointage, comme une souris, donc exit les smartphones...


Il est vrai que la question ne concerne que les PC.
Mais je trouverais sympa de savoir au survol à quel type de lien j'ai affaire.
Si j'ai bien compris. Il vous suffit de reprendre le code que je vous propose et d'utiliser un autre curseur, via la règle CSS add hoc, plutôt qu'un pseudo-élément + content (même si je n'aime pas cette solution). Par exemple :
.links p a:not([href^="https://nomDeMonSite.com"])::after {
  cursor: alias;
}

J'ai utilisé une autre alternative que plus haut, pour montrer un peu les possibilités...
Modérateur
Bonjour, ah oui effectivement on a peut-être lu trop vite.

La question aurait peut-être plus une notion d’accessibilité. Le navigateur se borne en effet et par défaut à indiquer que l’élément survolé à une potentielle action en cliquant dessus. Il lui donne aussi une couleur bleu et un soulignement pour indiquer qu'il s'agit d'un lien (si un attribut href est présent). Ce sont les feuilles de styles du webmestre qui ensuite modifient l'aspect standard par défaut Smiley cligne

Je pense que cela reste au proprio de la page d'y ajouter ces subtilités supplémentaire. Ce que les feuilles de styles aujourd'hui permettent aisément comme le démontre les exemples d'Olivier. En allant dans ce sens, Il y a aussi l'attribut target qui pourrait être pris en considération si utilisé.
Cdt

<edit> j'oubliais de dire, que les navigateurs affichent en général le lien en clair dans le bas de la fenêtre au survol de ceux-ci, c'est un réflexe que j'ai d'ailleurs lorsque j'arrive sur un site que je ne connais pas encore bien , ou sur ce forum lorsque des liens sont partagés (surtout si l'on pressent un spammeur Smiley smile )
Modifié par gcyrillus (03 Jul 2023 - 16:16)
Prévenir un modérateur
Répondre au sujet
Aller à