8 (499) 3-777-413

Стилизация автоматически распознаваемого номера телефона на сайте

Современные мобильные телефоны любят распознавать номера телефона и добавлять дефолтные стили. В результате мы имеем номер телефона в виде ссылки синего цвета без стилей, что не совсем эстетично. В этой статье рассмотрим способы решения возникающей в таком случае проблемы стилизации.

Отключение автоматического распознавания номера телефона

Простейший способ решения проблемы это отключение автоматического форматирования номера телефона. Делается это посредством добавления в <head> следующего мета-тега:

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

Для телефонов компании Эпл есть отдельные мета-теги, доступные по ссылке: Apple-Specific Meta Tag Keys.

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

<a href="tel:+1-555-555-5555">1-555-555-5555</a>

Если не хочется использовать мета-теги и отключать распознание номера телефона

В таком случае есть два варианта:

CSS селектор для стилизации ссылки на номер телефона

Этот вариант лучше подойдет для веб-страниц. Просто используем селектор аттрибута, чтобы выделить ссылку, которая содержит номер телефона:

a[href^="tel"] {
  color: inherit; /* Наследуем цвет у родительского элемента. */
  text-decoration: none; /* Убираем подчеркивание. */
}

CSS селектор для ссылок, созданных устройством

Альтернативный вариант, когда мы обрабатываем ссылки, добавленные на страницу мобильным устройством при помощи специфического селектора аттрибута:

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

/* Для стилизации конкретной ссылки можно использовать селектор вида 
a[x-apple-data-detectors].class-name
*/

Оформляем номер телефона вообще без ссылок

Если устройство расставляет ссылки самостоятельно, почему бы нам вообще не отказаться от ссылок? Такое точно может пригодиться при использовании рендера JSX на стороне сервера в фреймворках типа Next.

Во-первых, нам понадобится уникальный идентификатор элемента (id), который имеет наивысший приоритет селектора в CSS.

<p id="phone-text">Заказать сайт-визитку: <strong>+7 (925) 054-24-88</strong></p>

Далее при помощи этого селектора мы можем свободно оформлять номер телефона как нам угодно.

/* Лучше перестраховаться, и присвоить стили и родителю тоже */
#phone-text, #phone-text a {
color:#fff; text-decoration:none;
}