1 files changed, 87 insertions, 0 deletions
diff --git a/half_of_my_css_are_links.html b/half_of_my_css_are_links.html
new file mode 100644
index 0000000..8f0446a
--- /dev/null
+++ b/half_of_my_css_are_links.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="author" content="aki">
+<meta name="tags" content="css, styling, website, user experience">
+<link rel="icon" type="image/png" href="cylo.png">
+<link rel="stylesheet" type="text/css" href="style.css">
+
+<title>Half of My CSS Are Links</title>
+
+<nav><p><a href="https://ignore.pl">ignore.pl</a></p></nav>
+
+<article>
+<h1>Half of My CSS Are Links</h1>
+<p class="subtitle">Published on 2020-05-19 20:09:00+02:00
+<p>Lately, I've been tinkering in <a href="style.css">stylesheet of this website</a>. 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.
+<p>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:</p>
+<pre>
+a:link,
+a:visited {
+	color: mediumturquoise;
+	text-decoration: none;
+}
+
+a:hover,
+a:active {
+	color: turquoise;
+	text-decoration: underline;
+}
+</pre>
+<div id="example-1" style="padding: 0.5em 1em; margin: 0 0 1em 0; border: 1px solid #ddd">
+<style>
+#example-1 a:link,
+#example-1 a:visited {
+	color: mediumturquoise;
+	text-decoration: none;
+	background: initial;
+}
+
+#example-1 a:hover,
+#example-1 a:active {
+	color: turquoise;
+	text-decoration: underline;
+	background: initial;
+}
+</style>
+<a href="#example-1">Example link</a>
+</div>
+<p>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.
+<p>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 <code>:visited</code>. The user sees that they properly
+clicked the link because it changes it's appearance when it's <code>:active</code>, not only when it's hovered.
+<p>Those two usually skipped pseudo-classes are really informative. Hey, they can even make the page look cooler.
+Especially <code>:active</code>. 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 <em>clicked</em>.</p>
+<img src="half_of_my_css_are_links-1.png" alt="Booom!">
+<p>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 <code>:active</code> 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.
+<p>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
+<code>:active</code> may act as "<i>Yeah, it should be working</i>" information.
+<p>I didn't have much trouble understanding <code>:visited</code> 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.
+<p>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 <code>:visited</code>, 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 <code>:visited</code> and <code>:active</code>.
+</article>
+<script src="https://stats.ignore.pl/track.js"></script>