: посетен - 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връзки:

Повторно посещение: посетен от Joel Califa, показва пример за използване localstorageна стила на посетените връзки в домейна.

Хакерство: посетено от Уна Кравец се превръща :visitedв главата, като добавя „непосетен“ таг като :afterсъдържание към връзките, който след това се скрива с размяна на цвят на фона след посещението на връзката.

Преместването на границите на: посетено с CSS режими на смесване , от Stelian Firez, комбинира малък HTML трик, приписван на DuckDuckGo и background-blend-mode: screen;за избледняване на персонализирана икона до посетена връзка.

Оформяне на посетени връзки със SVG , от Dudley Storey. Използва SVG изображения с fillнабор, за да съответства на цвета на фона на страницата, когато връзката е в :linkсъстояние, а след това на друг цвят след връзката :visited. Урокът включва и алтернативен метод, използващ Unicode символи вместо SVG.

Свързани

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

Повече информация

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

Поддръжка на браузър

Всички браузъри поддържат това.