Mangopear creative

Revisiting :visited

Revisiting :visited

If you have a number of links on a page, sometimes you might want to indicate that some of them have been visited by a user, while others haven’t. That’s what we’d usually use :visited for, yet (for privacy reasons) browsers strictly limit which styles you can apply using this pseudo-class and how they can be used. So, if you do want to style visited links differently, how would you do it?

Well, there are some techniques. You could style visited links with SVG by filling in the color of the SVG icon on :visited. Or you could use CSS blend-mode using a shade of gray as the background to achieve semi-transparency. Or use double tags and hide the duplicate from screen readers. Or, if you feel experimental, show and hide things with border-color. There are quirky options out there, and CSSWG is committed to finding a solution. If you choose to use :visited, be cautious as it might not work reliably in the future, and you’re potentially exposing customer’s data.

Links:

  • https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector
  • http://thenewcode.com/1043/Limitations-on-Styling-Visited-Links
  • https://codepen.io/dudleystorey/pen/rVdqPj?editors=1100
  • http://stelian.firez.be/post/pushing-the-limits-of-visited-with-css-blend-modes/
  • https://www.quora.com/How-does-DuckDuckGos-new-visited-feature-work
  • https://kyusuf.com/post/another-way-of-styling-visited-and-unvisited-links
  • https://github.com/w3c/csswg-drafts/issues/3012

No comments

Start the conversation.
Be the first to comment.