Звонок на телефон css

How to Add Telephone Links with HTML

Telephone links are the ones that you tap to call a number on phone-capable devices. Of course, some devices are able to recognize phone numbers and provide the linking automatically, but it’s not always so.

Example of adding a telephone link:

html> html> head> title>Title of the document title> head> body> a href="tel:+05890000111">0-589-0000111 a> body> html>

Result

There isn’t any documentation (official) on this protocol handler for links. That’s why there can be differences in browser support and behavior. Commonly, browsers make different decisions on determining what to do with the clicked link. Also note that we included the exact telephone number inside the href attribute, but the number shown to the user is the one between the a tags. So we can show numbers in any form/style, and also we can use white-space between the digits

Styling telephone links

You can use a little CSS to style your telephone link. Let’s see an example where we add color to our link with the CSS color property.

Example of adding color to the telephone link:

html> html> head> title>Title of the document title> style> a < color: #ff2121; text-decoration: none; > style> head> body> a href="tel:+05890000111">0-589-0000111 a> body> html>

In our next example, we’ll add a phone character before the telephone number with the CSS ::before pseudo-element and content property.

Example of adding a phone character before the telephone link:

html> html> head> title>Title of the document title> style> a[href^="tel:"]:before < content: "\260e"; margin-right: 10px; > style> head> body> a href="tel:+05890000111">0-589-0000111 a> body> html>

Источник

Как использовать ссылки mailto: и tel:

Ссылки tel: нужны, чтобы сделать кликабельным номер телефона на сайте, а через mailto: можно отправить целое письмо, в котором сразу будут заполнены и адрес, и тема, и даже какой-нибудь текст. Иногда это удобно — пользователю не нужно набирать номер телефона вручную, а письмо в службу поддержки можно начать сразу с конкретной темы.

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

mailto:

Ссылка формируется из нескольких частей. Сначала в адресе ставится префикс mailto: , после которого указывается адрес почты. Это самый простой вариант.

Текст письма указывается с помощью параметра body .

За тему письма отвечает параметр subject .

Можно даже указать кого-то в копии, для этого используются параметры cc и bcc .

Что произойдёт, если кликнуть на ссылку с mailto

Откроется почтовая программа, в которой уже будут заполнены все нужные поля. Например, так ссылку выше обработает программа «Почта» в OS X:

Если почтовая программа по умолчанию не установлена, появится окно выбора программы.

Обратите внимание, что адреса с нестандартными символами, например, кавычками или дополнительными знаками @, нужно записывать особым образом. Подробнее об этом и других сложных случаях читайте в RFC 6068.

Как стилизовать mailto

Для стилизации ссылки на электронную почту можно воспользоваться CSS-селектором a[href^=»mailto:»] .

tel:

Ссылка на номер телефона размечается с помощью специального префикса перед номером телефона — tel: .

Хорошим тоном считается указание в href кода страны. При этом в тексте ссылки номер может быть указан в любом удобном формате. Например, добавляем городской номер на сайте фирмы из Санкт-Петербурга:

В href указан номер с кодом страны и города, в тексте ссылки есть код города 812, по которому понятно, что речь о Питере.

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

Телефоны с питерскими сим-картами дозвонятся по этому городскому номеру, но жители других городов попадут куда-то ещё.

Другое обязательное требование RFC 3966 — номер телефона, указанный в href , должен быть явно виден на странице.

Номер видно в тексте ссылки.

Номер не видно в тексте ссылки, непредсказуемое поведение.

Что произойдёт, если кликнуть на ссылку с tel

На смартфоне откроется приложение-звонилка, в котором будет набран указанный в ссылке номер. Если открыть такую ссылку на компьютере, где есть программа для звонков, произойдёт то же самое. Но вообще-то, что произойдет, сильно зависит от устройства и операционной системы, браузера и устройства.

• Android, iOS — откроется звонилка по умолчанию.
• Chrome, Edge, Firefox на Windows — откроется предложение использовать какую-нибудь программу для звонка.
• Safari — если номера нет в списке контактов, то появится подтверждение вызова, после этого откроется FaceTime.

Например, Chrome на OS X предложить открыть FaceTime для звонка, так как эта программа установлена по умолчанию. Вместо неё легко может быть Skype или любая другая звонилка.

Windows на ноутбуке предложит выбрать, с помощью какой программы открывать ссылки tel:

Как стилизовать

С помощью CSS-селектора a[href^=»tel:»] .

А так можно добавить иконку телефона из Unicode, которая есть во всех системах:

Получится такой результат:

Дополнительные материалы по теме

Ещё о вёрстке

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Как сделать кликабельный телефон на сайте

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

Современные мобильные браузеры могут автоматически делать номер телефона на сайте кликабельным, но это работает не всегда (из-за разных написаний номера телефона).

Наверное, многие из вас сталкивались с такой ситуацией, когда, заказывая какой-либо товар в интернет-магазине, приходилось уточнять некоторые вопросы по телефону. И для этого приходилось записывать номер телефона магазина на листочек / телефон друга, потом снова набирать в свой телефон, и только после этих манипуляций удавалось позвонить. А если телефон поддержки вдруг оказывался недоступен, приходилось всё это проделывать заново.

Именно для того, чтобы решить эту проблему, был разработан способ, который отвечает на вопрос «Как правильно указывать номер телефона на сайте». Давайте разберемся, как разместить телефон на сайте и сделать его кликабельным.

Сделать номер телефона кликабельным можно с помощью обыкновенной ссылки, но со специальным адресом:

То есть в атрибуте href должно быть указано: tel: и номер телефона в формате, который вам нужен.

После этого пользователи мобильных устройств смогут просто кликнуть на ссылку и, не совершая дополнительных действий, позвонить вам. Теперь можно добавлять номер телефона в блок контактов на вашем сайте.

Кроме кликабельного номера телефона, есть возможность добавить кликабельную ссылку на ваш Skype:

Или можно добавить ссылку для звонка со Skype на телефон:

Источник