Атрибут title тега <link>
Описание
Атрибут title для тега <link> выполняет две основные функции:
- Для альтернативных таблиц стилей (
rel="alternate stylesheet") - задает название стилевого набора, которое может отображаться в браузере - Для других типов ресурсов - предоставляет всплывающую подсказку с дополнительной информацией о ссылке
<!-- Основной стиль -->
<link rel="stylesheet" href="main.css">
<!-- Альтернативные стили -->
<link rel="alternate stylesheet" href="dark.css" title="Темная тема">
<link rel="alternate stylesheet" href="large-font.css" title="Крупный шрифт">
Особенности работы:
| Тип ссылки | Поведение title | Доступность |
|---|---|---|
alternate stylesheet |
Название стиля в меню браузера | Firefox, IE поддерживают переключение |
| Другие типы | Всплывающая подсказка при наведении | Во всех современных браузерах |
Пример с подсказкой:
<!-- Подсказка для preconnect -->
<link rel="preconnect" href="https://api.example.com" title="API сервер">
<!-- Подсказка для favicon -->
<link rel="icon" href="favicon.ico" title="Иконка сайта">
Рекомендации по использованию:
- Для альтернативных стилей используйте понятные названия
- Избегайте длинных названий (максимум 2-3 слова)
- Для подсказок делайте текст кратким и информативным
- Не используйте для критически важной информации (не все увидят подсказку)
JavaScript переключение стилей:
<link rel="stylesheet" href="main.css" title="Основной" id="main-style">
<link rel="alternate stylesheet" href="dark.css" title="Темная" id="dark-style" disabled>
<button onclick="enableDarkMode()">Темная тема</button>
<script>
function enableDarkMode() {
document.getElementById('main-style').disabled = true;
document.getElementById('dark-style').disabled = false;
}
</script>
Ограничения:
- Не все браузеры поддерживают переключение стилей через интерфейс
- На мобильных устройствах подсказки могут не отображаться
- Для сложного переключения тем лучше использовать CSS переменные
Примечание: Хотя функциональность альтернативных стилей ограничена в современных браузерах, атрибут title остается полезным для организации переключаемых тем через JavaScript. Для production-решений лучше использовать специализированные библиотеки управления темами.