1. проблема
2. відступ
3. Рішення 1 - невидимий контент
4. Рішення 2 - використання картинок
5. Рішення 3 - мета тег SKYPE_TOOLBAR
6. Рішення 4 - приховуємо стилі доповнення (update 28.07.10 by Аня Олійник)
7. плюси

Автор: Євген Рижков Дата публікації: 14.09.2009

проблема

Для деяких браузерів є доповнення (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"> & minus; </ span> 760-45-46

Так якщо номер телефону скопіювати в буфер і він буде мати мінімальне спотворення (додасться лише одне тире). Зауважу, що якщо вставити порожній елемент або з пропуском, браузер зможе визначити номер телефону.

на прикладі видно, що так номер телефону браузер точно визначити не може і як наслідок текст не замінюється (вид номерів телефонів не спотворюється). переваги:

• просто в реалізації
• гнучкість - номери легко міняти
• немає додаткових картинок
• є можливість скопіювати номер в буфер
• відповідність стандартам

недоліки:

• потрібно додатковий елемент - трохи повільніше сайт, трохи гірше SEO оптимізація
• якщо номера вводяться з бази даних, додаткова робота програмісту (потрібно буде телефон розбити мінімум на дві частини і встати між ними додатковий тег)
• трохи страждає семантика коду

Update 21.10.09 - можна так само використовувати нестандартний тег. Наприклад, так:

+3 (8067) <noskype> </ noskype> 760-45-46

Додаткова перевага до вище викладеним - не буде копіюватися зайвий символ в буфер. Недолік - деякі браузери можуть непередбачувано відреагувати на новий тег (в популярних браузерах такого помічено не було)

Перевірено в Firefox 3.

Update 23.08.10 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 28.07.10 by Аня Олійник)

Додаємо собі такі стилі

span.skype_pnh_print_container {display: inline! important;} span.skype_pnh_container {display: none! important;}

Вони прибирають скайповий блок і повертають назад телефон як він був.

плюси

• не потрібно псувати телефон символами або робити картинкою
• не впливає на валідацію

недоліки

• перестане працювати якщо в нових версіях аддона поміняють назви стилів

замітка

Метод вимагає перевірки в Firefox.