Влад Мержевич
Колись на веб-сайтах була популярна кнопка "Додати сайт до обраного", яка дозволяла додати адресу сайту до закладок браузера. Однак, чому колись? Час від часу на сайтах можна зустріти схожу кнопку й досі. Проблема полягає в тому, що використаний скрипт для цієї мети не працює в багатьох браузерах, тому його цінність майже нульова. У HTML5 розширили можливості атрибута rel тегу <a>, тепер з його допомогою можна легко додавати будь-які сайти та окремі сторінки до обраного.
Достатньо додати до посилання rel="sidebar", і при натисканні на нього у браузері відкриється спеціальна панель для створення нової закладки. Наразі значення sidebar підтримують два браузера - Firefox та Opera, інші ігнорують атрибут rel і переходять за звичайним посиланням.
Для розширення кількості браузерів та додавання до них IE, до посилання також можна підключити невеликий скрипт. У результаті Firefox, Opera, Internet Explorer викличуть спеціальну панель, а інші браузери перейдуть за посиланням (приклад 1).
Приклад 1. Додавання до обраного
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Додати до обраного</title>
<script>
function addBookmark() {
if (document.all) window.external.addFavorite('http://html.in.ua', 'Сайт html.in.ua');
}
</script>
</head>
<body>
<p><a href="http://html.in.ua" rel="sidebar"
onclick="addBookmark()">Додати до обраного</a></p>
</body>
</html>Як виглядає застосування rel="sidebar" у кінцевому результаті? Результат залежить від браузера. Наприклад, Firefox відкриває таке вікно (рис. 1).
Рис. 1. Додавання до обраного в Firefox
У Operi вигляд трохи відрізняється, але суть аналогічна (рис. 2).
Рис. 2. Додавання до обраного в браузері Opera
У Internet Explorer інтерфейс найлаконічніший (рис. 3).
Рис. 3. Додавання до обраного в браузері Internet Explorer
Наразі використання атрибута rel може бути не звичним через його слабку підтримку браузерами, але його потенціал великий, а кількість значень поступово зростає. Тому його слід включати у посилання.