إذا كنت تصمم لـ Safari على الجوال ولاحظت أن أرقام الهاتف تتحوّل فجأة إلى اللون الأزرق مع خط تحتها، فلست وحدك. بشكل افتراضي يكتشف Safari أرقام الهاتف تلقائيًا ويحوّلها إلى روابط قابلة للنقر، وكثيرًا ما يتجاوز أنماط CSS الخاصة بك أثناء ذلك.
المشكلة
اكتشاف أرقام الهاتف التلقائي في Safari مفيد في بعض الحالات، لكنه قد يكسر التخطيط المقصود أو اتساق العلامة لدى المصممين والمطوّرين — خاصة عند العمل بخطوط أو مخططات ألوان مخصصة.
الحل البسيط
الخبر السار أنك تستطيع تعطيل هذا السلوك بسطر برمجي واحد داخل وسم <head>:
<meta name="format-detection" content="telephone=no">
يخبر هذا Safari بألا يكتشف أرقام الهاتف ولا ينسّقها تلقائيًا، فتحتفظ بالتحكم الكامل في كيفية ظهور الأرقام على موقعك.
نصيحة احترافية
إذا أردت أن تبقى الأرقام قابلة للنقر لكن بستايلك أنت، يمكنك لفّها يدويًا داخل وسوم <a href=”tel:1234567890″> ثم تطبيق CSS الخاص بك:
<a href="tel:1234567890" class="phone">(123) 456-7890</a>
ثم نسّقها كما تشاء:
.phone {
color: inherit;
text-decoration: none;
font-weight: 600;
}
خلاصة
الاكتشاف التلقائي في Safari قد يساعد المستخدمين، لكنه يزعج المصممين أحيانًا. بوسم meta بسيط أو بتنسيق محكم يمكنك منع تغييرات التصميم غير المرغوبة والحفاظ على واجهة متسقة عبر جميع المتصفحات.
المزيد من نصائح التطوير السريعة مثل هذه على identitydesign.us