Отключаем автоматическую стилизацию номеров в Edge

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Для того чтобы запретить автоматическую стилизацию телефонных номеров в Microsoft Edge, достаточно добавить мета-тег с атрибутом format-detection и устанавить его значение в no. Указанную строку необходимо поместить в <head> вашего HTML-документа:

HTML

Скопировать код

<meta name="format-detection" content="telephone=no">

Если требуется применить данную настройку только для Microsoft Edge, следует использовать x-ms-format-detection:

HTML

Скопировать код

<meta http-equiv="x-ms-format-detection" content="none">

Этот тег оповестит Microsoft Edge о нежелательности форматирования номеров телефонов.

Пройдите тест и узнайте подходит ли вам сфера IT

Пройти тест

Как оформить ваши номера, сохраняя удобство использования

Собственные стили CSS

Для того чтобы ваша страница игнорировала встроенные стили телефонных номеров от Microsoft Edge, вы можете задать свои стили CSS следующим образом:

CSS

Скопировать код

a[href^="tel"] {
    color: inherit; // Цвет должен совпадать с остальным текстом
    text-decoration: none; // Стираем нежелательные подчеркивания
    pointer-events: none; // Отключаем возможность клика
}

Сохранение функциональности "нажми, чтобы позвонить"

Если важно сохранить функцию "нажми, чтобы позвонить", это можно осуществить, применив следующее правило CSS:

CSS

Скопировать код

a[href^="tel"] {
    cursor: pointer; // Визуальное указание на интерактивность
    pointer-events: auto; // Элемент остается активным для клика
}

Хитрый ход с использованием HTML

Чтобы номер телефона не распознавался Edge как таковой, можно использовать трюк с HTML. Вставка невидимых символов окажется весьма полезной:

HTML

Скопировать код

123&#8203;456&#8203;7890 // Edge, что скажешь об этих цифрах? Разгадай, если сможешь!

Визуализация

Можно представить, как Edge накладывает ненужные стики на ваш стильный новый телефон:

Markdown

Скопировать код

До: 📱 [*Ваш* телефон без чужих элементов]
Стиль Edge: 📱🏷️ [*Ваш* телефон теперь с навязчивой этикеткой]

Следующий кусок CSS поможет избавиться от "улучшений" от Microsoft:

CSS

Скопировать код

a[href^="tel"] {
    /* Отклоняем стандартный стиль Edge */
    color: inherit; // Возврат к исходному цвету
    text-decoration: none; // Без подчеркиваний
    pointer-events: none; // Блокируем клик
}

Это можно сравнить с волшебством, которое стирает ненужные наклейки:

Markdown

Скопировать код

После: 📱✨ [Вот ваш элегантный телефон в неприкосновенном виде!]

Возможные проблемы и способы их решения

Возможные проблемы с JavaScript

Для решения сложных задач может понадобиться использование JavaScript для динамического изменения содержимого. Однако это может привести к увеличению времени загрузки страницы и негативно повлиять на впечатление пользователей.

Бережное отношение к пользовательскому опыту

Отключение форматирования телефонных номеров может помешать пользователям запускать звонки напрямую с вашего сайта. Важно найти баланс между дизайном и удобством пользователей.

Будьте осторожны при копировании кода

Чтобы избежать стандартных стилей, соблазн скопировать код из различных источников может быть значительным. Впрочем, это может привести к непредсказуемым последствиям.

Полезные материалы

Свежие материалы

История веб-разработки: от HTML до современных фреймворков

30 августа 2024

Работа с полями структур в C

30 августа 2024

Указатели и массивы в C

30 августа 2024