[RÉGLÉ] class="tel" probleme de couleur, ignore !important

[FlodAriege]

Bonjour,

J'essaie de forcer la class "tel" à s'afficher en blanc sur terminaux portables.

Sur mon site : www rouchenergies fr , les liens sont bleus, donc le N° de téléphone en pied de page s'affiche en bleu dès qu'on est sur un smartphone, pour donner la possibilité d'appeler en cliquant simplement sur le n°. Problème : le fond de mon pied de page est... bleu, rendant le n° de téléphone presque invisible...

J'ai d'abord essayé en ajoutant !important directement inline : sans effet.

Je viens aussi d'essayer avec le media query suivant :

@media only handheld {
.tel {
color: #FFF !important;
}

}

... sans succès.

Pensant que 'handheld' était peut-être mal reconnu, j'ai, enfin, fait une tentative avec :

@media all and (max-device-width: 480px) {
.tel {
color: #FFF !important;
}

}

Rien à faire, quand je regarde le résultat depuis mon iPhone, le n° de téléphone reste désespérément bleu...

Ai-je mal rédigé le media query ?

Ce N° de téléphone est en h4 (normalement jaune), avec la couleur blanche affectée inline (ça marche très bien sur PC), mais aussi avec la classe "tel" qui en fait un lien. Bizarrement, le lien 'contact', lui, s'affiche gentiment en blanc, c'est ce qui me fait dire que c'est bien la classe qui pose problème.

[PhilJ]

Re : class="tel" probleme de couleur, ignore !important

Bonjour Florence,

J'essaie de forcer la class "tel" à s'afficher en blanc sur terminaux portables. Sur mon site [...], les liens sont bleus, donc le N° de téléphone en pied de page s'affiche en bleu dès qu'on est sur un smartphone, pour donner la possibilité d'appeler en cliquant simplement sur le n°. Problème : le fond de mon pied de page est... bleu, rendant le n° de téléphone presque invisible. [...] Ce N° de téléphone est en h4 (normalement jaune), avec la couleur blanche affectée inline (ça marche très bien sur PC), mais aussi avec la classe "tel" qui en fait un lien. Bizarrement, le lien 'contact', lui, s'affiche gentiment en blanc, c'est ce qui me fait dire que c'est bien la classe qui pose problème.

Pas seulement : comme tu l'écris toi-même, le numéro de téléphone doit être cliquable. Autrement dit, il doit être inséré dans un lien. Mais ici il ne peut pas être cliquable : car un lien est toujours du type <a href="url-du-lien">ancre du lien</a>, et il n'y a pas de lien associé à ton numéro de téléphone.

=> Essayer déjà ceci pour commencer de façon à rendre le n° de téléphone cliquable :
—

<a class="tel" href="tel:+330102030405">01 02 03 04 05</a>

____________________

Problème découlant de cette mise en place : ce lien de type téléphonique est maintenant utilisable sur smartphone, c'est bien... mais il l'est aussi sur PC standard (et sur tablette). Or, là, c'est beaucoup moins bien, car le protocole tel n'est pas reconnu sur les appareils de bureau. Du coup, un clic sur ce lien (= tel:+330102030405) depuis un PC de bureau ou un PC portable déclenchera une erreur :-\

=> Pour éviter ce souci, nous allons ajouter une classe précisant que le lien d'appel téléphonique ne doit s'afficher que sur smartphone :
—

<a class="tel visible-phone" href="tel:+330102030405">01 02 03 04 05</a>

...Cependant, évidemment, si on s'en tient là, les internautes visitant le site avec un PC classique ou une tablette ne verront pas du tout le numéro de téléphone. Il faut donc l'afficher rien que pour eux :
—

<span class="hidden-phone">01 02 03 04 05</span>

Explication :

• Classe visible-phone : n'afficher que sur smartphone.
• Classe hidden-phone : afficher sur tout terminal sauf smartphone.

NB : en fonction des besoins, il est bien sûr possible de traiter de la même manière l'affichage sur tablettes, avec visible-tablet (= afficher seulement sur tablette) et hidden-tablet (ne pas afficher sur tablette).

____________________

En résumé, le code de cette zone <H4> devient :
—

<h4>

<a class="tel visible-phone" href="tel:+330102030405">01 02 03 04 05</a>
<span class="hidden-phone">01 02 03 04 05</span>
- <a class="mgsmall" title="Fomulaire de contact" href="/page-de-contact.html">Contact</a>

</h4>

____________________

Il ne reste plus ensuite qu'à styler chaque élément comme désiré (à adapter aux besoins et en fonction des classes déjà définies) :
—

#jsn-pos-footer h4 {

/* propriétés générales de cette zone : couleur, taille de police... */

}
#jsn-pos-footer h4 > a.mgsmall {

/* propriétés du lien vers la page de contact */

}
a.tel {

/* propriétés du lien d'appel téléphonique */

}

Bonne soirée,



PhilJ

[FlodAriege]

Re : class=&quot;tel&quot; probleme de couleur, ignore !important

Mais ici il ne peut pas être cliquable : car un lien est toujours du type <a href="url-du-lien">ancre du lien</a>, et il n'y a pas de lien associé à ton numéro de téléphone.

... et pourtant, je te promets que si je clique sur mon n° de téléphone depuis mon iPhone, ça me demande si je veux bien appeler le n°.
Peut-être que ça ne marche que sur iPhone et pas sur les autres types de smartphone, je n'en sais rien.

En fait, au départ j'ai fait comme ça sans savoir que ça rendrait le n° cliquable, et juste pour respecter les balises h-card microformats. (que j'ai apprises ici : http://microformats.org/wiki/hCard)

C'est pour cela que j'aimerais pouvoir conserver la balise actuelle.

Saurais-tu m'indiquer comment contourner ce problème de couleur de lien sans remettre en cause le format h-card adopté STP ?

Je dois faire quelque chose de travers avec un #, un a. ou un . ou... ???

Merci PhilJ

[PhilJ]

Re : class=&quot;tel&quot; probleme de couleur, ignore !important

... et pourtant, je te promets que si je clique sur mon n° de téléphone depuis mon iPhone, ça me demande si je veux bien appeler le n°. Peut-être que ça ne marche que sur iPhone et pas sur les autres types de smartphone, je n'en sais rien.

Moi non plus, mais ce qui est sûr, c'est que le procole de lien 'tel' est tout ce qu'il y a d'officiel dans les normes du W3C. Voir : http://www.w3.org/TR/mwabp/#bp-interaction-uri-schemes.

=> Il est peut-être possible de respecter à la fois les normes W3C et le format Microformats, mais si je comprends bien ce dernier, il n'est pas sûr du tout que ton code soit vraiment conforme :
—

<span style="color: #ffffff !important;" class="tel">01 02 03 04 05</span>

Outre qu'il devrait normalement pouvoir être simplifié ainsi : <span class="tel">01 02 03 04 05</span>, le code microformat correct semble devoir être plutôt celui-ci :
—

<span class="tel">

<span class="value">01 02 03 04 05</span>

</span>

SOURCE (exemple du format hcard pour n° de téléphone): http://microformats.org/wiki/value-class-pattern-fr.


Ce que j'ignore, c'est si ce qui suit pourrait être de nature à respecter à la fois les normes du W3C et le format Microformat :
—

<span class="tel">

<span class="value">

<a class="tel visible-phone" href="tel:+330102030405">01 02 03 04 05</a>

</span>

</span>

Qu'en pense la communauté des savants ici réunie ?

[FlodAriege]

Re : class=&quot;tel&quot; probleme de couleur, ignore !important

La valeur doit être précisée quand, par exemple, on précise : tel. bureau 01 23 45 67 89, pour dire que la valeur à extraire est bien 01 23 45 67 89 et non bureau.
Mais quand la seule chose contenue dans la balise est le n°, on peut ne pas préciser value.

En attendant d'avoir l'avis de la communauté des savants, j'aimerais résoudre mon souci de mise en forme.
D'une façon ou d'une autre, je me retrouve toujours avec un lien sur mon téléphone si je veux qu'il soit cliquable, et ce lien s'affiche toujours en bleu.
Alors que le lien sous contact ou mentions légales, lui, accepte la mise en forme en blanc : pourquoi diable ??
Pourquoi, quand j'essaie de forcer le blanc soit inline soit dans le custom.css, ça ne fonctionne pas ?
Je ne suis pas très calée en css, mais normalement tout ce qui est mis en dur dans le code de la page devrait bien overrider tout ce qui pourrait être contenu dans une quelconque feuille css, non ?

[PhilJ]

Re : class=&quot;tel&quot; probleme de couleur, ignore !important

...Si tu tiens vraiment à ne pas utiliser de lien explicite utilisant la norme tel, et si comme tu le dis ceci ne fonctionne pas :
—

.tel {

color: #fff;

}

alors essaie :
—

a.tel {

color: #fff;

}

Ou bien, par précaution :
—

.tel,
a.tel {

color: #fff;

}

Il y a des chances que ça marche puisque tu dis que tu n'y vois que du bleu . Or justement le code par défaut des liens est #5297c8, c.-à-d. un bleu (en l'occurrence un bleu moyen). En clair, ton iPhone transforme le <span class="tel"> en lien, donc avec #5297c8. Il devrait donc suffire de le contrarier et de lui dire que les liens de la classe 'tel' sont blancs.

=> A tester.

[FlodAriege]

Re : class=&quot;tel&quot; probleme de couleur, ignore !important

Si je croyais en quelqu'un là haut, je m'écrierais Allelujah !!
Heu... en fait j'ai vraiment crié Allelujah quand j'ai, enfin, trouvé le moyen de mettre ce $*% de lien en BLANC.

Alors, après avoir fait quelque chose comme 20 tentatives, j'ai finalement obtenu ce que je voulais avec ceci :

#jsn-footer-inner1 .tel a {
color: #FFF !important;
}

Ah bah oui parce que pour compliquer la chose, je ne voulais pas que TOUS les .tel apparaissent en blanc, mais bien uniquement celui qui est dans le pied de page.
J'ai rapidement laissé tomber l'idée d'un media query quand j'ai réalisé que c'était idiot vu qu'avec ma méthode (pas très W3C propre, hein, PhilJ ?), il n'y a pas de lien sur le n° de téléphone sur les écrans normaux, mais bien uniquement sur les terminaux mobiles.
Mais sachant qu'il devait traîner quelques "tel" ici ou là, je ne voulais pas courir le risque de faire disparaître les uns pour faire apparaître les autres...
Mais, les
a.tel
.tel
ou même les
.tel
a.tel
et toutes les variantes que j'ai pu essayer cet après-midi ne marchaient pas (sachant que je suis un buse en css et que je ne sais que copier des bouts de code vus ailleurs dans le Template.css)
J'aurais bien aimé comprendre pourquoi :
#jsn-footer-inner1 .tel a {
color: #FFF !important;
}
ça fonctionne,
alors que
a.tel {
color: #FFF !important;
}
ça ne fonctionne pas...

[lefabdu51]

Re : class=&quot;tel&quot; probleme de couleur, ignore !important

#jsn-footer-inner1 .tel a {
color: #FFF !important;
}
ça fonctionne,
alors que
a.tel {
color: #FFF !important;
}
ça ne fonctionne pas...

.tel qui contient une balise a :<span class="tel"><a>et dans le second cas un lien du type <a class="tel">

[FlodAriege]

Re : class=&quot;tel&quot; probleme de couleur, ignore !important

Pardon, hein, je promets que ce n'est pas pour être casse-pieds, mais juste pour bien comprendre :
Voici le html derrière l'affichage :

"<span style="font-size: 18pt;"><span class="tel" style="color: #ffffff !important;">01 23 45 57 89</span>"
Autrement dit, pas de <a></a>... visible en tout cas.

J'imagine que la class tel des microformats hcard doit affecter une balise <a> si le terminal est un téléphone.
Veux-tu dire que ce lien téléphonique est "réécrit" : "<span class="tel">01 23 45 57 89</a></span>" considérant quelque part que "tel" = a ?? C'est ça, je t'ai compris ?

Si on devait dire avec des vrais mots les combinaisons :
.tel a
et
a.tel
ça se transcrirait comment ?
.tel a = classe tel quand elle est affectée par un lien a ?
a.tel = lien a affecté par une classe tel ?

... c'est que c'est drôlement subtil le css comme langage, dites-moi !

En tout cas, merci pour le coup de main, et contente de vous avoir "revus" les copains

[lefabdu51]

Re : class=&quot;tel&quot; probleme de couleur, ignore !important

Pardon, hein, je promets que ce n'est pas pour être casse-pieds, mais juste pour bien comprendre :
Voici le html derrière l'affichage :

"<span style="font-size: 18pt;"><span class="tel" style="color: #ffffff !important;">01 23 45 57 89</span>"
Autrement dit, pas de <a></a>... visible en tout cas.

J'imagine que la class tel des microformats hcard doit affecter une balise <a> si le terminal est un téléphone.
Veux-tu dire que ce lien téléphonique est "réécrit" : "<span class="tel">01 23 45 57 89</a></span>" considérant quelque part que "tel" = a ?? C'est ça, je t'ai compris ?

Si on devait dire avec des vrais mots les combinaisons :
.tel a
et
a.tel
ça se transcrirait comment ?
.tel a = classe tel quand elle est affectée par un lien a ?
a.tel = lien a affecté par une classe tel ?

... c'est que c'est drôlement subtil le css comme langage, dites-moi !

En tout cas, merci pour le coup de main, et contente de vous avoir "revus" les copains

voir le post ci dessus :

/* nimporte quelle balise ayant la classe tel et contenant un lien */
<span class=tel"><a ></a></span>
/*ou bien */
<div class=tel"><a></a></div>

/*ou bien */
<a href="#" class="tel"></a>

tu ne vise pas les memes entités html