: відвідав - 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стиль для свого посилання, зазвичай його додають між "наведенням курсору" та "активним".

Демо

Розширення :visited

Незважаючи на те, що прямий стиль :visitedпосилань обмежений, існує безліч розумних способів розширити ваші варіанти стилювання відвіданих посилань. У 2015 році було багато обговорень публікацій у блозі, які обмінювались новими ідеями щодо стильних :visitedпосилань:

Повторне відвідування: відвідав , від Джоела Каліфи, показує приклад використання 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

Підтримка браузера

Всі браузери підтримують це.