: посећено - ЦСС-трикови

Anonim

:visitedСелектор Псеудо-класа може променити неке од стила на сидро веза ( ) елемент ако прегледач корисника је већ посетио везу. Свршена је да помогне корисницима да разликују разлику између веза које имају и које нису посетили.

a:visited ( color: gray; )

Ограничења и употреба

Постоји одређена забринутост због приватности :visited, наиме да злонамерна веб локација може да има везе до тона веб локација са :visitedстилом, а затим тестирајте визуелни стил веза са ЈаваСцрипт-ом да бисте серверу пријавили које веб локације је корисник посетио. Ово крши приватност корисника и потенцијално може открити податке који могу лично да вас идентификују.

Као резултат тога, већина прегледача ограничава шта се стил може променити на :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стил за везу, уобичајено је да га додате између „лебдење“ и „активно“.

Демо

Продужујући :visited

Иако је директно обликовање :visitedвеза ограничено, постоји много паметних начина да проширите своје могућности за обликовање посећених веза. У 2015. години је забележено пуно блогова који су делили нове идеје за обликовање :visitedвеза:

Поновно посећивање: посећено , Јоел Цалифа, показује пример коришћења localstorageза обликовање посећених веза унутар домене.

Хакирање: посећено , са Уна Краветс-а, окреће се :visitedдодавањем ознаке „непосећено“ као :afterсадржаја на везе, која се након скривања везе скрива заменом боје позадине.

Помицање граница: посећено са ЦСС режимима мешања , Стелиан Фирез-а, комбинује мали ХТМЛ трик који се приписује ДуцкДуцкГо-у и background-blend-mode: screen;бледи прилагођену икону поред посећене везе.

Стилинг Виситед Линкс са СВГ , од Дудлеи Стореи. Користи СВГ слике са fillпостављеним да се подударају са бојом позадине странице када је веза у :linkстању, а затим са другом бојом након што је веза :visited. Водич такође укључује алтернативни метод који користи Уницоде знакове уместо СВГ.

Повезан

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

Више информација

  • :visited у спецификацији В3Ц
  • :visited на МДН

Подршка прегледача

Сви прегледачи ово подржавају.