Revisiting :Visited (joelcalifa.com)
8 years ago from Joel Califa, Senior Product Designer at GitHub
8 years ago from Joel Califa, Senior Product Designer at GitHub
Hey, I've had this sitting in my drafts for about 6 months now. I'd love to get your thoughts on this :)
Your localstorage solution is really neat and a very novel approach but in this case were there any reasons not to go with a combination of :visited and ::after to do the same thing? I'm playing with using js to create an empty span within each link tag that i can then use css to insert a check mark and make visible on visited links. I like the idea of the check marks on visited links as an aesthetic feature as well.
Hey thanks so much! I felt just creating a hook rather than an entirely new DOM element was a cleaner solution, at least for the way I wanted to use it. Something like :visited:after unfortunately doesn't work on its own, due to the limitations set on :visited.
This is actually really close to the implementation I used in BetterDN. I use it for opening all the links that people haven't clicked on. Code is here: https://github.com/conlinism/BetterDN/blob/master/js/unvisited.js
another advantage of your implementation, :visited doesn't fly in incognito mode.
Really love the simplicity of your solution - thanks for sharing! What do you think about changing the text based on the number of visits? Would that be possible with local storage?
For example, if a user clicks on one of your portfolio items multiple times, maybe the text would change from 'Seen' to 'Frequently Viewed', or 'Popular'—something like that.
Appreciate you taking the time to write this!
Hey that's a really cool idea! Hadn't occurred to me at all.
Yeah it would be really simple, instead of true just start at 1 and ++ the value every time someone visits. Then check for >0 instead of true.
Great post - I've been doing something similar using localstorage for my photosets so users know which one they've seen already. :)
http://paulstamatiou.com/photos/greece/crete/ (under the collections dropdown I pop in a check for the ones you've seen)
Thanks! I love your implementation. The design in general is beautiful and the content is envy-inducing :P
Joel this is great, and it's equally wonderful to see how many people are chiming in with their own iterations as well. This dredges up my feelings on the declining provision of sitemaps; often times more useful than what the front-end was providing for many reasons.
You answered your question with this:
"I really want to click on this cat, but now I know better."
This is by far the primary reason for the disappearance of visited links. In your example from Buzzfeed, your :visited link styles prevented you from clicking down that trail—thus preventing Buzzfeed from generating revenue from that impression.
The removal of :visited from anything but navigation type areas is a business decision, not so much aesthetics.
It's funny, I originally had a paragraph about this in one of my drafts but thought better of it. Felt too bait-y and there's no evidence content sites are any more intentional about this than any other site. I'll post it here though:
"On content sites such as BuzzFeed, unstyled visited links cause more users to accidentally return to previously visited pages, to see more ads, and to possibly increase the company’s bottom line (depending on how ads are sold, of course. BuzzFeed is just an example.) In fact, scatter-brained as they are, people are probably even more likely to click on a link they’ve already demonstrated interest in rather than a new one. Considering the amount of sites that have neglected :visited CSS, I’m going to assume this was not done on purpose. But in the cases where it is — and I’m sure there are — where do we draw the line? Is this too small a deception to be considered a dark pattern?"
Really nice solution and I must admit I found myself nodding along about just forgetting to do it these days!
Nice solution. Definitely agree that it's disappointing to have lost this useful styling in the name of "design".
btw, typo in the third code block (missing a closing paren after the if
statement).
Awesome. I would've guessed you could make a simpler implementation just by using an :after
pseudo-element, kinda like this:
a:visited::after { content: ' Seen'; //... s'more styles here }
It turns out you can't! However, using ::after
with other pseudo-classes such as :hover
does work. Here's an example.
Can anyone explain why that is? What's special about visited that doesn't let me use pseudo-elements?
Hey Ivan, glad you enjoyed this :) The reason :visited is special is because of the security implications which I highlighted around mid-way through the article. It's a huge bummer but at the end of the day it's good for everyone.
You're absolutely right, I totally missed that part.
I ended up looking up more info on this, and found this great article that gives some background on why this was necessary and a few technical details about the solution.
This is awesome! Thanks for posting it. Super interesting.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now