Se stai progettando per Safari su mobile e noti che i numeri di telefono diventano misteriosamente blu e sottolineati, non sei il solo. Di predefinito, Safari rileva automaticamente i numeri di telefono e li converte in link cliccabili, spesso sovrascrivendo i tuoi stili CSS.
Il problema
Il rilevamento automatico dei numeri di telefono di Safari è utile in alcuni casi, ma per designer e sviluppatori può rompere il layout previsto o la coerenza del brand, soprattutto quando lavori con font o palette di colori personalizzati.
La soluzione semplice
La buona notizia è che puoi disattivare questo comportamento con una sola riga di codice nel tag <head>:
<meta name="format-detection" content="telephone=no">
Questo dice a Safari di non rilevare e formattare automaticamente i numeri di telefono, così hai il pieno controllo su come appaiono nel sito.
Consiglio pro
Se vuoi che i numeri restino cliccabili ma con il tuo stile, puoi racchiuderli a mano nei tag <a href=”tel:1234567890″> e applicare il tuo CSS:
<a href="tel:1234567890" class="phone">(123) 456-7890</a>
Poi stilizzalo come preferisci:
.phone {
color: inherit;
text-decoration: none;
font-weight: 600;
}
Considerazioni finali
Il rilevamento automatico di Safari può essere utile per gli utenti, ma problematico per i designer. Con un semplice meta tag o uno stile controllato eviti modifiche di design indesiderate e mantieni l’interfaccia coerente su tutti i browser.
Per altri consigli rapidi di sviluppo come questo, torna su identitydesign.us