Half of My CSS Are Links

Published on 2020-05-19 20:09:00+02:00

Lately, I've been tinkering in stylesheet of this website. My main goals are readability and minimalism, in this order. I do put some little things to appeal to my taste, but let this one slide, please, I'm confident that my stylesheet is one of the smallest there are.

Now, now. I noticed a little thing in the stylesheet that got me really interested. I started to look around in my archives, mirrors of old websites, my own older websites, unused designs, and finally into other websites that are currently available including google, wikipedia, github, youtube, 4chan, and so on. There is one little pattern that can be found throughout lots and lots of pages:

a:link,
a:visited {
	color: mediumturquoise;
	text-decoration: none;
}

a:hover,
a:active {
	color: turquoise;
	text-decoration: underline;
}

Obviously, not all of the pages use turquoise as link colour. They are usually blue-ish. There might be some small variations to this, but it always comes down to getting rid off the underline, and then when user hovers over the link to change the colour slightly and bring back the underline. Like I said - variations: colour changes w/o underline, underline is always there, colour doesn't change but underline does the thing, and others.

There's a significant lack of feedback for the user in it. We have more tools than that, and much much more to express. Let's take the Wikipedia as an example because it does it's job greatly. Not only it uses all of the usual CSS pseudo-classes, but also adds on top of them, and properly communicates nonexistent pages. The user knows immediately if they've already seen the referenced page, because they use :visited. The user sees that they properly clicked the link because it changes it's appearance when it's :active, not only when it's hovered.

Those two usually skipped pseudo-classes are really informative. Hey, they can even make the page look cooler. Especially :active. At first, it didn't make much sense to me to use it. After all, if you click a link the whole browser reacts. Rather than discarding it, I decided to check it out by adding it to my stylesheet. And then it clicked.

No, no, no. I didn't write this whole thing just to make a pun. Trust me. The "it looks kinda cool" is not my only argument. I consider it a valid argument, subjective, but still valid. The other argument is again: feedback. This pseudo-class is used when the element is clicked. This includes most actions, LMB, RMB, tab+menu, and MMB. It means that in most browsers the element remains :active when someone has context menu open. In some situations it can clear up the context of the menu as the position of the menu may be ambiguous.

Surprisingly, there are also situations in which browser doesn't react to the click. Opening some other application, running task in the background, or generally running some javascript code. Of course, things break down, and then :active may act as "Yeah, it should be working" information.

I didn't have much trouble understanding :visited and it's uses. My homepage is an old-school index, so the usage is clear. Let's say that someone decides to read all of my posts, and that at that point there is plenty of them (by the way, that's a torture, don't do that). Assuming they won't clear their browser history, the webpage will clearly inform them what they saw, and what they didn't.

Just to be clear, not all use cases require those pseudo-classes, but quite an amount of them really could use them. Look at youtube. At some point they stopped using :visited, but soon after they added similar information below the thumbnail in form of a red bar that display your watch progress. It means that in the end they consider it worth keeping. As always, think about your case, consider needs of your users, they behaviour, possible workflows, and whatever else. If it makes sense, then I encourage you to remember about :visited and :active.