Дополнение Skype
Проблема
Для некоторых браузеров есть дополнение (Skype addon), которое определяет номера телефонов на HTML странице и позволяет сделать звонок с сайта по Skype. Об этой возможности можно узнать подробней на официальном сайте Skype. Это расширение для Interner Explorer и FireFox включено в последнюю версию Skype (на данный момент — 4.1). Скачать и установить можно с сайта Skype.
При этом номера телефонов на странице у пользователя будут выглядеть не так как задумал дизайнер, а следующим образом:
При загрузке страницы браузер находит номера телефонов и если надстройка Skype может определить полный номер телефона (код страны, код города/оператора, сам номер), тогда вставляется специальный код, вместо текстового номера телефона.
Отступление
Мое мнение — если пользователь установил себе дополнение, значит это ему нужно, ему так удобней и не стоит идти поперек желаниям посетителя, лишая его установленных инструментов. Поэтому, прежде чем "отключить" данную функцию, хорошо подумайте.
Лучше предусмотреть это при подготовке дизайна (разместить телефоны, так чтоб измененный браузером вид телефона не поломал верстку, не налез на соседние объекты, не испортив тем самым общее впечатление от сайта).
Но иногда все же приходиться эту "проблему" решать верстальщику.
Решение 1 — невидимый контент
Вставляем невидимый блок с текстом в номер телефона:
+3(8067)<span style="display:none">no skype addon</span> 760-45-46
или лучше так:
+3(8067) <span style="display:none">−</span>760-45-46
Так если номер телефона скопировать в буфер и он будет иметь минимальное искажение (добавится только одно тире). Замечу, что если вставить пустой элемент или с пробелом, браузер сможет определить номер телефона.
На примере видно, что так номер телефона браузер точно определить не может и как следствие текст не заменяется (вид номеров телефонов не искажается). Достоинства:
- просто в реализации
- гибкость — номера легко менять
- нет дополнительных картинок
- есть возможность скопировать номер в буфер
- соответствие стандартам
Недостатки:
- требуется дополнительный элемент — чуть медленнее сайт, чуть хуже SEO оптимизация
- если номера вводятся из базы данных, дополнительная работа программисту (нужно будет телефон разбить минимум на две части и встатить между ними дополнительный тег)
- чуть-чуть страдает семантика кода
Update — можно так же использовать нестандартный тег. Например, так:
+3(8067) <noskype></noskype>760-45-46
Дополнительное преимущество к выше изложенным — не будет копироваться лишний символ в буфер. Недостаток — некоторые браузеры могут непредсказуемо отреагировать на новый тег (в популярных браузерах такого замечено не было)
Проверено в Firefox 3.
Update by David Jones — можно так же использовать тег <noscript>: эффект будет тот же и код валидный.
Решение 2 — использование картинок
Вставляем номера телефонов картинками. Если номеров телефонов на сайте мало и они редко меняются, может верстальщик вырезать номера и вставить картинку. Если же номера меняются или же номеров много (как например, на биржах труда), тогда можно такие картинки программно генерировать "на лету" (по типу того как генерируются капчи). Преимуществ особых в данном подходе нет, кроме того что номер не заменится блоком от Skype. Недостатки:
- нет гибкости (если номера делает картинками верстальщик) или дополнительная нагрузка на программиста (если картинки генерировать программно)
- нельзя скопировать номер в буфер
- дополнительные картинки (увеличение времени загрузки страницы)
Решение 3 — мета тег SKYPE_TOOLBAR
На официальном форуме skype разработчики упоминают еще об одном варианте — использование мета тега SKYPE_TOOLBAR:
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
Правда почему-то у меня данный способ не заработал. Тестировал в:
У некоторых данный способ работал только в IE. То ли метод какой-то не надежный, то ли я чего-то недопонял. И валидацию strict 1.0 не проходит данный способ (хотя это можно обойти при желании).
Решение 4 — скрываем стили дополнения (update by Аня Олейник)
Добавляем себе такие стили
span.skype_pnh_print_container{display:inline !important;}
span.skype_pnh_container{display:none !important;}
Они убирают скайповый блок и возвращают назад телефон как он был.
Плюсы
- не нужно портить телефон символами или делать картинкой
- не влияет на валидацию
Недостатки
- перестанет работать если в новых версиях аддона поменяют названия стилей
Заметка
Метод требует проверки в Firefox.