Style des liens un peu aggressif

[thibault]

Hello,

Lors de mon travail sur l'application EnvErgo, je suis fréquemment confronté à des bugs graphiques provoqués par l'inclusion du dsfr (v1.4.0), notamment à cause du stylage des liens par défaut.

Exemples de bugs graphiques

Sur des cartes générées par Leaflet, les icones d'action sont cassées.

Pour référence, voici le style attendu.

Autre exemple sur le menu fourni par la django-debug-toolbar :

Origine du problème

J'ai pu tracer l'origine du problème à ce sélecteur présent dans le dsfr :

[href] {
  background-image: var(--underline-img), var(--underline-img);
  background-position: 50% calc(50% + 0.71875em), 50% calc(50% + 0.65625em);
  background-repeat: no-repeat, no-repeat;
  transition: background-size 0s;
  background-size: 0 0.0625em, 100% 0.0625em;
}

Le sélecteur me semble un peu radical. On peut imaginer que toutes les applications utilisant un balisage à base de <a href="#"… pour représenter quelque chose qui n'est pas strictement un lien classique vont être impactées.

J'ai bien conscience qu'utiliser un tel balisage n'est pas forcément le plus approprié, mais cela reste une pratique très répandue et on n'a pas toujours la main sur le code généré par des applications tierces. Pour ces mêmes raisons, l'utilisation de la classe .fr-raw-link n'est pas non-plus forcément une option viable.

Suggestions

Il peut y avoir de très nombreuses raisons pour lesquelles on trouve des balises <a> avec l'attribut href renseigné pour représenter des éléments qui ne sont pas des liens. Par conséquent, une règle css qui a un tel impact visuel sur ces éléments devrait peut-être être opt-in ? Ou alors, peut-être serait-il envisageable d'utiliser un stylage de liens moins radical ?

[lab9fr]

Bonjour Thibault,

Est-ce que vous avez la main sur un wrapper qui incorpore ces applications tierces ?

Si vous mettez .fr-raw-linkà un haut niveau, tous les links enfants n'auront plus le soulignement.

Est-ce que cette solution peut convenir à votre problème ?

L'idée de .fr-raw-link est d'être cet espèce d'optin sur une partie de votre application.

Je vois d'autres possibilités s'il y a encore des problèmes, n'hésitez pas à nous faire des retours.

Merci Bertrand

[thibault]

Hello @lab9fr,

Merci pour la réponse. D'après ce que je comprends, je ne pense pas que cela résoudrait vraiment le problème.

En effet, la classe .fr-raw-link remet à zéro les variables --underline-img, etc. mais cela ne change rien au stylage des propriétés background-position, background-size, etc. Je peux donc affecter fr-raw-link a un haut niveau, les liens ne seront plus soulignés mais mon application tierce restera cassée.

Je suis ouvert à d'autres solutions, toutefois.

[kornifex]

Bonjour,

Je rencontre le même problème que Thibault, l'ajout de .fr-raw-link reset bien certaines propriétés mais l'ajout progressif du DSFR sur une application existante impose beaucoup de chose au reste du site.

@thibault avez-vous trouvé une solution pour l'intégrer proprement ? Refaire un reset du DSFR à la main pour le reste du site ? D'avance merci !

[eletallbetagouv]

Même problème ici, j'essaie d'intégrer le DSFR sur une codebase existante sans tout casser. J'ai pu retirer le soulignement via .fr-raw-link que je viens de découvrir dans cette discussion. Mais le DSFR ajoute aussi un petit icône spécifiquement pour les liens externes, or mes liens sont eux-mêmes des icônes, ce n'est pas pertinent.

Je suis obligé de l'overrider en CSS :

.mylink::after {
  display: none !important;
}

[lab9fr]

Des aménagement et des exemples ont été livrés dans la v1.10.0

[thibault]

@lab9fr Je suis toujours confronté à ce problème, et les notes de versions sont actuellement indisponibles.

Cf. https://github.com/GouvernementFR/dsfr/issues/965

Des aménagement et des exemples ont été livrés dans la v1.10.0

Sais-tu où je peux accéder à ces infos ?