Si vous concevez pour Safari sur mobile et que vos numéros de téléphone deviennent mystérieusement bleus et soulignés, vous n’êtes pas seul. Par défaut, Safari détecte automatiquement les numéros de téléphone et les convertit en liens cliquables — en remplaçant souvent vos styles CSS au passage.
Le problème
La détection automatique des numéros de téléphone par Safari est utile dans certains cas, mais pour les designers et les développeurs, elle peut casser la mise en page prévue ou la cohérence de la marque — surtout lorsque vous travaillez avec des polices ou des palettes de couleurs personnalisées.
La solution simple
Bonne nouvelle : vous pouvez désactiver ce comportement avec une seule ligne de code dans votre balise <head> :
<meta name="format-detection" content="telephone=no">
Cela indique à Safari de ne pas détecter ni formater automatiquement les numéros de téléphone, afin que vous gardiez le contrôle total de leur apparence sur votre site.
Conseil de pro
Si vous voulez que les numéros restent cliquables tout en ayant votre propre style, vous pouvez les entourer manuellement de balises <a href= »tel:1234567890″> et appliquer votre propre CSS :
<a href="tel:1234567890" class="phone">(123) 456-7890</a>
Ensuite, stylisez-les comme vous le souhaitez :
.phone {
color: inherit;
text-decoration: none;
font-weight: 600;
}
Pour conclure
La détection automatique de Safari peut aider les utilisateurs, mais poser problème aux designers. Avec une simple balise meta ou un style maîtrisé, vous évitez les changements de design indésirables et conservez une interface cohérente dans tous les navigateurs.
Pour d’autres conseils de développement rapides comme celui-ci, retrouvez-nous sur identitydesign.us