Se está a criar um design para o Safari em dispositivos móveis e repara que os números de telefone ficam misteriosamente azuis e sublinhados, não está sozinho. Por predefinição, o Safari deteta automaticamente números de telefone e converte-os em ligações clicáveis — muitas vezes sobrepondo-se aos seus estilos CSS.
O problema
A deteção automática de números de telefone do Safari é útil em alguns casos, mas para designers e programadores pode quebrar o layout previsto ou a consistência da marca — sobretudo quando trabalha com tipos de letra ou esquemas de cores personalizados.
A correção simples
A boa notícia é que pode desativar este comportamento com apenas uma linha de código na etiqueta <head>:
<meta name="format-detection" content="telephone=no">
Isto indica ao Safari para não detetar nem formatar automaticamente números de telefone, permitindo-lhe ter controlo total sobre a forma como os números aparecem no site.
Dica avançada
Se ainda quiser que os números sejam clicáveis, mas com o seu estilo, pode envolvê-los manualmente em etiquetas <a href=”tel:1234567890″> e aplicar o seu próprio CSS:
<a href="tel:1234567890" class="phone">(123) 456-7890</a>
Depois estilize como preferir:
.phone {
color: inherit;
text-decoration: none;
font-weight: 600;
}
Notas finais
A deteção automática do Safari pode ser útil para os utilizadores, mas problemática para os designers. Com uma meta tag simples ou algum estilo controlado, evita alterações de design indesejadas e mantém a interface consistente em todos os browsers.
Para mais dicas rápidas de desenvolvimento como esta, volte a identitydesign.us