Атрибут vlink тега <body>
Описание
Атрибут vlink (visited link) использовался в HTML4 для задания цвета посещённых ссылок на всей странице. Этот атрибут устарел и был удалён из спецификации HTML5 в пользу CSS.
Устарело: Атрибут vlink не поддерживается в HTML5. Вместо него используйте CSS-псевдокласс
:visited.
Устаревший синтаксис:
<body vlink="#551A8B">
<a href="visited.html">Посещённая ссылка</a>
</body>
Современный CSS-эквивалент:
a:visited {
color: #551A8B;
}
Ограничения :visited в современных браузерах:
| Свойство | Доступность для :visited |
|---|---|
| color | ✓ Разрешено |
| background-color | ✗ Запрещено |
| border-color | ✗ Запрещено |
| opacity | ✓ Разрешено (с ограничениями) |
Современные практики стилизации посещённых ссылок:
/* Базовые стили для всех ссылок */
a {
color: #0066cc;
transition: color 0.2s ease;
}
/* Стили для посещённых ссылок */
a:visited {
color: #551a8b;
opacity: 0.8;
}
/* Дополнительный визуальный индикатор */
a:visited::after {
content: ' ✓';
font-size: 0.8em;
}
Рекомендации по доступности:
- Сохраняйте достаточный контраст для :visited (WCAG)
- Не полагайтесь только на цвет для обозначения состояния
- Избегайте радикального изменения стиля посещённых ссылок
- Тестируйте с различными режимами цветовой слепоты
- Учитывайте требования приватности браузеров
Пример комплексного подхода:
:root {
--link-color: #2563eb;
--visited-color: #7c3aed;
--hover-color: #1d4ed8;
}
a {
color: var(--link-color);
text-decoration: none;
border-bottom: 1px dotted currentColor;
padding-bottom: 0.1em;
}
a:visited {
color: var(--visited-color);
border-bottom-style: solid;
}
a:hover {
color: var(--hover-color);
text-decoration: underline;
}
/* Альтернативный индикатор для посещённых ссылок */
a:visited:not(:hover)::after {
content: ' (посещённая)';
font-size: 0.8em;
opacity: 0.7;
}
Почему vlink устарел:
- Нарушает принцип разделения структуры и представления
- Ограничивает стилизацию только цветом
- Не поддерживает современные дизайн-системы
- Не работает с медиа-запросами и адаптивным дизайном
- Усложняет поддержку кода
Миграция с vlink на CSS:
- Удалите атрибут vlink из тега body
- Добавьте соответствующие CSS-правила
- Протестируйте различные состояния ссылок
- Убедитесь, что стили не нарушают приватность
- Добавьте дополнительные визуальные индикаторы
Примечание: Хотя браузеры могут поддерживать атрибут vlink для обратной совместимости, современная веб-разработка требует использования CSS для стилизации всех состояний ссылок. Это обеспечивает лучшую гибкость, контроль и соответствие стандартам безопасности и доступности.