Edit: Blocking does not work anymore in the recent versions of Chrome, at least.

Some time ago I was making CSS3 transitions for my blog, but I accidentally blocked myself from being able to navigate trough the affected <a> elements. I found the unexpected behavior odd, but interesting, because if I’d wanted the behavior I’d just used JavaScript.

Technically, the idea is to stretch HTML element so that it will cover the <a> element before the user can click and release the left mouse button. From browser’s viewpoint you aren’t therefore clicking on a link anymore, but rather on the overlaying element, which blocks the action. I also found that you can actually specify how fast the user has to click on the element for the link to work. This behavior could be reached by modifying the CSS transition’s second parameter, transition-duration, which I although removed from the code I pushed to Github. Here’s the one I did push:

*:active::after {
    position: fixed;
    background-color: transparent;
    height: 100%;
    width: 100%;
    transition: all linear;
} 

Including the code in your stylesheet will break every link on your website, no matter how fast they click on things. If you’d want to limit that, and only let users which click on things faster than in 60ms navigate your site, you would alter the code as so:

*:active::after {
    position: fixed;
    background-color: transparent;
    height: 100%;
    width: 100%;
    transition: all 60ms linear;
} 

I can’t really come up with any real use for this, but I’ll surely troll my co-workers on some idle Friday with this. I’ll update this posts later to let you know how long it took them to debug it, if I manage to convince its not my code which broke.

You can also include the CSS in your stylesheet with

@import url('https://raw.githubusercontent.com/jhvst/hrefstop/master/hrefstop.css'); 

Though please do make a local copy of the file as fast as you can, since hard-linking to Github isn’t all too kind.

Lastly, try to use any link on this page. I bet it does not work.