: посетил - CSS-хитрости

Anonim

:visitedСелектор псевдо-класс может изменить некоторые стилизации на якорь ссылку ( элемент) , если браузер пользователя уже побывал в ссылке. Он призван помочь пользователям различать ссылки, которые они имеют и не посещали.

a:visited ( color: gray; )

Ограничения и использование

Существует некоторая озабоченность по поводу конфиденциальности :visited, а именно то, что вредоносный веб-сайт может иметь ссылки на множество веб-сайтов со :visitedстилем, а затем проверить визуальный стиль ссылок с помощью JavaScript, чтобы сообщить серверу, какие сайты посетил пользователь. Это нарушает конфиденциальность пользователя и потенциально может раскрыть личную информацию.

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

Это хороший разбор той ситуации.

Это свойства, которые можно изменить с помощью :visited:

  • color
  • background-color
  • border-color (и его подсвойства)
  • outline-color
  • Цветные части fillи strokeсвойства

Вы можете использовать :visitedдля изменения этих свойств только в том случае, если ссылка уже имеет их в «непосещенном» или :linkсостоянии. Вы не можете использовать его для добавления свойств, которых еще нет в ссылке. Например:

Вы можете изменить background-colorиз :visitedссылки , если элемент ссылки уже имел цвет фона.

Вы не можете добавить background-colorк :visitedссылке, если у нее не было цвета фона, когда она была «непосещенной» ссылкой.

Связывание псевдоклассов по порядку

Также полезно знать, что большинство псевдоклассов ссылок следует объявлять в определенном порядке. Порядок такой:

  1. Связь
  2. Посетил
  3. Парение
  4. Активный

Если вы включаете :focusстиль для своей ссылки, обычно его добавляют между «hover» и «active».

Демо

Расширение :visited

Хотя прямое оформление :visitedссылок ограничено, существует множество умных способов расширить возможности стилизации посещенных ссылок. В 2015 году появилось огромное количество сообщений в блогах, в которых рассказывались о новых идеях стилизации :visitedссылок:

Повторное посещение: посещено от Джоэла Калифы показывает пример использования localstorageстиля посещенных внутренних ссылок.

Хакерство: посещенный от Уны Кравец встает с ног :visitedна голову, добавляя тег «непосещенный» в качестве :afterсодержимого ссылки, который затем скрывается с заменой цвета фона после посещения ссылки.

Расширение границ: посещенных с помощью режимов наложения CSS от Stelian Firez сочетает в себе небольшой трюк HTML, приписываемый DuckDuckGo, и background-blend-mode: screen;постепенное исчезновение пользовательского значка рядом с посещенной ссылкой.

Стилизация посещенных ссылок с помощью SVG , от Дадли Стори. Использует изображения SVG с fillустановленным соответствием цвету фона страницы, когда ссылка находится в :linkсостоянии, а затем к другому цвету после ссылки :visited. В учебник также включен альтернативный метод с использованием символов Unicode вместо SVG.

Связанный

  • :link
  • :active
  • :hover
  • :focus

Дополнительная информация

  • :visited в спецификации W3C
  • :visited в MDN

Поддержка браузера

Все браузеры поддерживают это.