Красим посещённые ссылки: псевдоклассы :link, :visited и :any-link

Когда вы создаёте веб-страницу, ссылки — один из ключевых элементов интерфейса. Они помогают пользователям перемещаться по сайту или переходить на внешние ресурсы. Но как сделать так, чтобы пользователь сразу понял, какие ссылки он уже посещал, а какие — нет? На помощь приходят псевдоклассы CSS :link, :visited и :any-link. Эти инструменты позволяют стилизовать ссылки в зависимости от их состояния, улучшая навигацию и пользовательский опыт. В этой статье мы разберём, как они работают, их историю, особенности и как безопасно использовать их в 2025 году.

Псевдоклассы :link и :visited существуют с самого зарождения CSS, появившись в спецификации CSS1 в 1996 году. Тогда веб был преимущественно текстовым, и ссылки играли центральную роль в навигации. Разработчики хотели, чтобы пользователи могли визуально отличать непосещённые ссылки от тех, на которые они уже кликали. :link отвечал за стилизацию непосещённых ссылок, а :visited — посещённых, основываясь на истории браузера.

Псевдокласс :any-link появился значительно позже, в спецификации CSS Selectors Level 4, чтобы упростить стилизацию ссылок независимо от их состояния (посещённые или нет). Он стал частью стандарта в 2022 году и быстро получил поддержку в браузерах. Эти псевдоклассы остаются важной частью веб-разработки, помогая создавать интуитивно понятные интерфейсы.

Как работают :link, :visited и :any-link?

Псевдоклассы :link, :visited и :any-link применяются к элементам <a> с атрибутом href. Они определяют стили в зависимости от состояния ссылки:

• :link: Применяется к ссылкам, которые пользователь ещё не посещал.
• :visited: Применяется к ссылкам, которые пользователь уже открыл (на основе истории браузера).
• :any-link: Применяется ко всем ссылкам с атрибутом href, независимо от их состояния (посещённые или непосещённые).

Пример базового использования:

a:any-link {
  text-decoration: underline;
}
a:link {
  color: blue;
}
a:visited {
  color: purple;
}

В этом примере все ссылки будут подчёркнуты (благодаря :any-link), непосещённые ссылки будут синими, а посещённые — фиолетовыми. Порядок правил важен: :any-link обычно указывается первым, так как более специфичные псевдоклассы, такие как :link и :visited, переопределяют его стили.

Практический пример для новичков

Давайте создадим простой список ссылок с разными стилями для посещённых и непосещённых ссылок, а также добавим эффект при наведении:

<ul>
  <li><a href="https://example.com">Непосещённая ссылка</a></li>
  <li><a href="https://visited.com">Посещённая ссылка</a></li>
</ul>

<style>
a:any-link {
  text-decoration: none;
  font-family: Arial, sans-serif;
}
a:link {
  color: #007bff;
}
a:visited {
  color: #6f42c1;
}
a:hover {
  text-decoration: underline;
}
</style>

Этот код стилизует ссылки так: все ссылки без подчёркивания по умолчанию, непосещённые — синие, посещённые — фиолетовые, а при наведении появляется подчёркивание. Попробуйте вставить этот код в редактор, например, CodePen, и кликните по ссылкам, чтобы увидеть, как меняется их цвет в зависимости от истории браузера!

Совместимость с браузерами

На август 2025 года псевдоклассы :link, :visited и :any-link имеют статус Baseline: Widely Available. Согласно MDN, :link и :visited поддерживаются всеми браузерами с момента появления CSS, а :any-link получил широкую поддержку с июля 2022 года (Chrome 95, Firefox 91, Safari 15.4 и выше). Это делает их надёжным выбором для любых современных проектов.

Когда стоит использовать эти псевдоклассы?

Эти псевдоклассы идеально подходят для:

• Улучшения навигации, показывая, какие ссылки пользователь уже посещал.
• Создания визуально понятных интерфейсов, где ссылки выделяются цветом или оформлением.
• Обеспечения единообразного стиля для всех ссылок с помощью :any-link.

Однако есть нюансы. Например, стили для :visited ограничены из соображений безопасности (о чём ниже), и вы не можете использовать все CSS-свойства, чтобы изменить посещённые ссылки.

Вопросы безопасности

Использование :visited требует особого внимания из-за потенциальных угроз конфиденциальности. В прошлом злоумышленники могли использовать стили :visited для определения, какие сайты пользователь посещал, анализируя CSS-свойства (например, через getComputedStyle). Это привело к строгим ограничениям в современных браузерах:

• Ограниченные свойства: Для :visited можно использовать только свойства, связанные с цветом (color, background-color, border-color, outline-color, fill, stroke). Другие свойства, такие как display или font-size, игнорируются.
• Ограниченный доступ: JavaScript не может точно определить, применён ли стиль :visited, чтобы защитить историю браузера пользователя.
• Рекомендации: Используйте :visited только для визуальных подсказок (например, изменения цвета) и избегайте сложных стилей, которые могут быть проанализированы.

Пример безопасного использования:

<a href="https://example.com">Ссылка</a>

<style>
a:link {
  color: #007bff;
}
a:visited {
  color: #6f42c1; /* Безопасно: меняем только цвет */
}
</style>

Здесь мы меняем только цвет, что соответствует ограничениям браузеров и не создаёт уязвимостей.

Альтернативы и современный подход

Псевдоклассы :link, :visited и :any-link отлично работают для базовой стилизации ссылок, но есть и другие подходы:

• Классы CSS: Если вы хотите больше контроля, можно использовать JavaScript для добавления классов к ссылкам на основе их состояния, хотя это требует отслеживания посещений вручную.
• Фреймворки: В React, Vue или Angular можно управлять стилями через динамические классы или CSS-модули, что даёт больше гибкости.
• Атрибуты данных: Для сложных интерфейсов можно использовать атрибуты data-* для отслеживания состояния ссылок.

Пример с классами:

<a href="https://example.com" class="link">Ссылка</a>

<style>
.link {
  color: #007bff;
  text-decoration: none;
}
.link:visited {
  color: #6f42c1;
}
.link:hover {
  text-decoration: underline;
}
</style>

Этот подход позволяет использовать пользовательские классы, сохраняя функциональность :visited.

Заключение

Псевдоклассы :link, :visited и :any-link — это простые, но мощные инструменты для стилизации ссылок. Они помогают сделать навигацию интуитивной, показывая пользователю, какие ссылки он уже посещал, и обеспечивают единообразный стиль. Несмотря на ограничения :visited из соображений безопасности, эти псевдоклассы остаются стандартом в веб-разработке в 2025 году. Их поддержка в браузерах и простота использования делают их идеальным выбором для новичков.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.