[Résolu] Style sur les liens sms et téléphone

Bonjour
pour des liens téléphone ou sms...
<a href="tel:+33711223344">etc...
je voudrais via les media queries ne pas afficher les liens sur les écrans autres que ceux des smartphones...
Existe-t-il une solution ?
Bonne journée,
Y

Hello,

@media (condition) {
a[href^="tel:"] { color: red; }
}

Avec le sélecteur d'attribut (crochets) on cible tout ce qui commence par "tel:".

CSS, sélecteur d'attribut (en anglais)
Modifié par Greg_Lumiere (27 Aug 2020 - 11:24)

Par contre les medias queries ne permettent pas de distinguer ce qui est téléphone ou pas, il faut analyser les user-agent pour cela.

Oups, je n'avais pas tout lu correctement.

Comme le souligne Kustolovic cela est rendu impossible. Il existait bien le media-type handheld qui à la limite semblait convenir mais il a été déprécié et même s'il reste valide, ne correspond à rien. La spec sur les media-types (en anglais).

Rappelons que la détection via le user-agent n'est une méthode heuristique non fiable et que l'affichage ne devrait dépendre de cette donnée.

Donc reste à faire comme toujours, se baser sur la largeur du viewport.

Merci à tous les trois pour vos réponses...
Je pense que je vais m'en sortir avec des max-width et le style a[href^="tel:"]...
Je vois une suite de "and" à écrire !
Bonne journée !
Yves
PS : Comment dit-on pour "^" ? C'est pour chercher dans la doc.

Il vaut mieux rechercher sur les "selecteurs d'attributs CSS".

Une doc fiable (parmis d'autres) : https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut

edit, sinon , c'est circonflexe - chapeau / circumflex - caret

cdt
Modifié par gcyrillus (27 Aug 2020 - 14:33)

Greg_Lumiere a écrit :

Rappelons que la détection via le user-agent n'est une méthode heuristique non fiable et que l'affichage ne devrait dépendre de cette donnée.

Disons que c'est déjà un peu plus fiable que la largeur

gcyrillus a écrit :
Il vaut mieux rechercher sur les "selecteurs d'attributs CSS".

Une doc fiable (parmis d'autres) : https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut

edit, sinon , c'est circonflexe - chapeau / circumflex - caret

cdt

Ok... Merci !

kustolovic a écrit :

Disons que c'est déjà un peu plus fiable que la largeur

Oui tout à fait, surtout quand tu tombes sur un fork dont on n'a pas prit la peine de le changer et qui est porté du desktop au mobile. Base ton affichage là dessus et bonjour la casse.

Alors qu'au contraire, tu as un contrôle total sur la zone d'affichage. Quelques points de rupture judicieusement choisis et tes boi-boites se placent à la perfection dans toutes les situations.

C'est le problème, raisonner en terme de périphérique au lieu de penser "zone d'affichage".
device vs. painting-zone le clash

Malgré tout, je me suis aperçu que des sites se basent là dessus pour leur affichage. Je m'étais amusé à mes heures perdues à bidouiller mon agent utilisateur. Je suis tombé sur quelques pépites, allant d'un affichage dégradé (ou inapproprié) à carrément la page blanche (bon ok c'est arrivé une fois, mais quand même lol)

Quoiqu'il en soit, ce débat est récurrent dans le temps. Il a même déjà eu lieu ici, au sein de la communauté des Alsanautes et on le retrouve un peu partout.

En tout cas je suis ravi que le sujet soit résolu et que l'auteur ait trouvé satisfaction en les contributions qui lui ont été offertes.
Modifié par Greg_Lumiere (28 Aug 2020 - 09:52)