Получить профессию в Skypro
Отключаем автоматическую стилизацию номеров в Edge
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для того чтобы запретить автоматическую стилизацию телефонных номеров в Microsoft Edge, достаточно добавить мета-тег с атрибутом format-detection и устанавить его значение в no. Указанную строку необходимо поместить в <head> вашего HTML-документа:
<meta name="format-detection" content="telephone=no">Если требуется применить данную настройку только для Microsoft Edge, следует использовать x-ms-format-detection:
<meta http-equiv="x-ms-format-detection" content="none">Этот тег оповестит Microsoft Edge о нежелательности форматирования номеров телефонов.
Как оформить ваши номера, сохраняя удобство использования
Собственные стили CSS
Для того чтобы ваша страница игнорировала встроенные стили телефонных номеров от Microsoft Edge, вы можете задать свои стили CSS следующим образом:
a[href^="tel"] {
color: inherit; // Цвет должен совпадать с остальным текстом
text-decoration: none; // Стираем нежелательные подчеркивания
pointer-events: none; // Отключаем возможность клика
}Сохранение функциональности "нажми, чтобы позвонить"
Если важно сохранить функцию "нажми, чтобы позвонить", это можно осуществить, применив следующее правило CSS:
a[href^="tel"] {
cursor: pointer; // Визуальное указание на интерактивность
pointer-events: auto; // Элемент остается активным для клика
}Хитрый ход с использованием HTML
Чтобы номер телефона не распознавался Edge как таковой, можно использовать трюк с HTML. Вставка невидимых символов окажется весьма полезной:
123​456​7890 // Edge, что скажешь об этих цифрах? Разгадай, если сможешь!Визуализация
Можно представить, как Edge накладывает ненужные стики на ваш стильный новый телефон:
До: 📱 [*Ваш* телефон без чужих элементов]
Стиль Edge: 📱🏷️ [*Ваш* телефон теперь с навязчивой этикеткой]Следующий кусок CSS поможет избавиться от "улучшений" от Microsoft:
a[href^="tel"] {
/* Отклоняем стандартный стиль Edge */
color: inherit; // Возврат к исходному цвету
text-decoration: none; // Без подчеркиваний
pointer-events: none; // Блокируем клик
}Это можно сравнить с волшебством, которое стирает ненужные наклейки:
После: 📱✨ [Вот ваш элегантный телефон в неприкосновенном виде!]Возможные проблемы и способы их решения
Возможные проблемы с JavaScript
Для решения сложных задач может понадобиться использование JavaScript для динамического изменения содержимого. Однако это может привести к увеличению времени загрузки страницы и негативно повлиять на впечатление пользователей.
Бережное отношение к пользовательскому опыту
Отключение форматирования телефонных номеров может помешать пользователям запускать звонки напрямую с вашего сайта. Важно найти баланс между дизайном и удобством пользователей.
Будьте осторожны при копировании кода
Чтобы избежать стандартных стилей, соблазн скопировать код из различных источников может быть значительным. Впрочем, это может привести к непредсказуемым последствиям.
Полезные материалы
- Современное состояние телефонных ссылок | CSS-Tricks
- <a>: Элемент-якорь – HTML: HyperText Markup Language | MDN
- Дизайн сайтов для iPhone X | WebKit
- Can I use... Таблицы поддержки HTML5, CSS3 и др.
- HTML Стандарт
- HTML a href Атрибут
- Блог разработчиков Android: Современное выполнение операций в фоновом режиме на Android