Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Firefox: Dé-souligner une partie d'un lien

4 réponses
Avatar
Patrick 'Zener' Brunet
Bonjour.

L'objectif est d'accoller des mini-icônes au libellé de liens pour avertir
de particularités (notamment le fait qu'ils sortent du site Web). Comme cela
se fait sur Wikipédia par exemple.

Je souhaite pouvoir le faire pour certains liens seulement, dans une
démarche de génération par PHP.
Ca veut dire que le but est d'introduire un <span> vide (avec juste un
attribut title) à la fin de certains libellés, la CSS faisant le reste.

Pourquoi ne pas simplement accoller le tag *après* le lien ?
Parce que sémantiquement il fait partie du libellé, notamment en lecture
vocale ou autre mode d'accessibilité. On doit être informé avant de prendre
la décision de suivre ou pas le lien.

Comme le lien est souligné par CSS (text-decoration: inline;), selon le
standard, ce <span> doit corriger avec text-decoration: none; pour la
lisibilité.
Apparemment ça ne marche pas avec Firefox, même en rajoutant !important...
Alors que ça fonctionne sur IE.

Alors ensuite on peut imaginer de donner une classe spéciale à ces liens-là,
mais il y a conflit d'intérêt, certains liens candidats ayant déjà une
classe, et certains navigateurs ayant apparemment des problèmes avec les
classes multiples.
Ensuite on peut développer toutes les combinaisons d'attributs en classes
spécifiques: Beuââârk!

Bref, avez-vous des tuyaux sur ce problème ?
Merci+++

--
Cordialement.
--
/**************************************************\
* Patrick BRUNET
* E-mail: lien sur http://zener131.free.fr/ContactMe
\**************************************************/

4 réponses

Avatar
Patrick 'Zener' Brunet
Bonjour.

"Patrick 'Zener' Brunet" a écrit dans
le message news: f26kth$701$
[...]
Comme le lien est souligné par CSS (text-decoration: inline;), selon le
standard, ce <span> doit corriger avec text-decoration: none; pour la
lisibilité.
Apparemment ça ne marche pas avec Firefox, même en rajoutant
!important...
Alors que ça fonctionne sur IE.




Donc voilà un exemple évident:
- la surcharge des couleurs fonctionne sur IE comme sur Firefox,
- la surcharge du soulignement ne fonctionne pas sur Firefox.

<html>
<head>

<style type="text/css">
a
{
text-decoration: underline;
color: #0000DD;
}
.not
{
text-decoration: none;
color: #00DD00;
}
.important_not
{
text-decoration: none !important;
color: #DD0000;
}
</style>

</head>
<body>

<p>Test CSS underline overriding: <a href="#"> &nbsp; underlined &nbsp;
<span class="not">not
underlined</span> &nbsp;
<span
class="important_not">!important not underlined</span> &nbsp;
</a></p>

</body>
</html>

Donc ça a l'air d'un bug...

--
Cordialement.
--
/**************************************************
* Patrick BRUNET
* E-mail: lien sur http://zener131.free.fr/ContactMe
**************************************************/
Avatar
ASM
Patrick 'Zener' Brunet a écrit :

Donc voilà un exemple évident:
- la surcharge des couleurs fonctionne sur IE comme sur Firefox,
- la surcharge du soulignement ne fonctionne pas sur Firefox.

Donc ça a l'air d'un bug...



Je ne sais où est le bug ...
Avec le test proposé, les couleurs sont respectées, mais :
- mon IE Mac : rien n'est souligné
- mes Opera, Safari, Firefox et même iCab : TOUT est souligné
oui oui, même dans iCab, donc le sans bug = TOUT souligné

Tiens ?
Avec un doc-type (soyons foux : en strict) ... Hop!
IE(Mac) fait comme tous les autres (tout souligné) !

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Avatar
Patrick 'Zener' Brunet
Bonsoir.

"ASM" a écrit dans le message
news: 4650c9c8$0$27378$
Patrick 'Zener' Brunet a écrit :
>
> Donc voilà un exemple évident:
> - la surcharge des couleurs fonctionne sur IE comme sur Firefox,
> - la surcharge du soulignement ne fonctionne pas sur Firefox.

> Donc ça a l'air d'un bug...

Je ne sais où est le bug ...
Avec le test proposé, les couleurs sont respectées, mais :
- mon IE Mac : rien n'est souligné
- mes Opera, Safari, Firefox et même iCab : TOUT est souligné
oui oui, même dans iCab, donc le sans bug = TOUT souligné




Rien de souligné, assurément c'est pas bon, là c'est du CSS de base.
Ou alors c'est le type MIME dans le tag <style> qui est trop moderne pour
lui ?

Tout souligné, oui, c'est conforme à mon problème...

Tiens ?
Avec un doc-type (soyons foux : en strict) ... Hop!
IE(Mac) fait comme tous les autres (tout souligné) !




Sur le site original, j'ai des pages en Strict, d'autres en Transitionnel
(et qui passent la validation), ça ne fait apparemment aucune différence...

Je crois que j'ai une idée de ce qui peut se passer: le trait de
soulignement du <a> resterait visible sous les deux autres textes (puisqu'il
est de la couleur du texte souligné).
En un sens c'est *techniquement* logique: "rien" ne peut pas recouvrir pas
un trait.
Mais au sens *sémantique* de la surcharge de propriété, c'est pas terrible
du tout :-@

Ouais, bon, on reste condamnés au bricolage...

Merci.

--
Cordialement.
--
/**************************************************
* Patrick BRUNET
* E-mail: lien sur http://zener131.free.fr/ContactMe
**************************************************/
Avatar
Patrick 'Zener' Brunet
Bonsoir.

"ASM" a écrit dans le message
news: 4650c9c8$0$27378$
Patrick 'Zener' Brunet a écrit :
>
> Donc voilà un exemple évident:
> - la surcharge des couleurs fonctionne sur IE comme sur Firefox,
> - la surcharge du soulignement ne fonctionne pas sur Firefox.

> Donc ça a l'air d'un bug...

Je ne sais où est le bug ...
Avec le test proposé, les couleurs sont respectées, mais :
- mon IE Mac : rien n'est souligné
- mes Opera, Safari, Firefox et même iCab : TOUT est souligné
oui oui, même dans iCab, donc le sans bug = TOUT souligné




Rien de souligné, assurément c'est pas bon, là c'est du CSS de base.
Ou alors c'est le type MIME dans le tag <style> qui est trop moderne pour
lui ?

Tout souligné, oui, c'est conforme à mon problème...

Tiens ?
Avec un doc-type (soyons foux : en strict) ... Hop!
IE(Mac) fait comme tous les autres (tout souligné) !




Sur le site original, j'ai des pages en Strict, d'autres en Transitionnel
(et qui passent la validation), ça ne fait apparemment aucune différence...

En un sens c'est *techniquement* logique: "rien" ne peut pas recouvrir
un trait.
Mais au sens *sémantique* de la surcharge de propriété, c'est pas terrible
du tout :-@

Ouais, bon, on reste condamnés au bricolage...

Merci.

--
Cordialement.
--
/**************************************************
* Patrick BRUNET
* E-mail: lien sur http://zener131.free.fr/ContactMe
**************************************************/