links

Nested Links

The other day I posted an image, quite literally as a thought exercise, about how you might accomplish "nested" links. That is, a big container that is linked to one URL that contains a smaller container or text link inside of it that goes to another URL. That's harder than it might seem at first glance. The main reason being that...

<!-- this is invalid and won't render as expected -->
<a href="#one">
  Outside
  </a><a href="#two">
    Inside
  </a>

Eric Meyer once called for more flexible linking, but even that doesn't quite handle a situation where one link is nested inside another.

(more…)

Having fun with link hover effects

A designer I work with was presenting comps at a recent team meeting. She had done a wonderful job piecing together the concept for a design system, from components to patterns and everything in between that would make any front-end developer happy.

But there was a teeny tiny detail in her work that caught my eye: the hover state for links was a squiggle.

(more…)

Hyperlinking Beyond the Web

Hyperlinks are the oldest and the most popular feature of the web. The word hypertext (which is the ht in http/s) means text having hyperlinks. The ability to link to other people’s hypertext made the web, a web — a set of connected pages. This fundamental feature has made the web a very powerful platform and it is obvious that the world of apps needs this feature. All modern platforms support a way for apps to register a URI (custom protocol) and also have universal links (handling web links in an app).

Let’s see why we’d want to take advantage of this feature and how to do it.

(more…)

CSS Basics: Styling Links Like a Boss

You are probably well acquainted with how links looks without any styling at all. That blue. That underline. That's a link in it's purest form. But what if we want to change things up a bit? Perhaps blue doesn't work with your website's design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just like any other element.

How to Disable Links

The topic of disabling links popped up at my work the other day. Somehow, a "disabled" anchor style was added to our typography styles last year when I wasn't looking. There is a problem though: there is no real way to disable an <a></a> link (with a valid href attribute) in HTML. Not to mention, why would you even want to? Links are the basis of the web.

At a certain point, it looked like my co-workers were not going to accept this fact, so I started thinking of how this could be accomplished. Knowing that it would take a lot, I wanted to prove that it was not worth the effort and code to support such an unconventional interaction, but I feared that by showing it could be done they would ignore all my warnings and just use my example as proof that it was OK. This hasn't quite shaken out for me yet, but I figured we could go through my research.

(more…)

:any-link

The :any-link pseudo-class in CSS provides a method for selecting elements that are the source anchor of a hyperlink.

If the term source anchor lost you, that's a fancy name for the href attribute on the HTML elements <a></a>, <link /> and <area />. (Why you would need to target an <area /> or <link /> in CSS is beyond me, but hey.) The HTML spec has a whole lot more information on that.

An element that accepts and contains a href attribute is a hyperlink and will be selected with :any-link. This becomes a handy way of selecting all link-based HTML elements that might otherwise appear unrelated and without touching the markup. Perhaps it exists because you might think :link would select all links, but it misses :visited, so this wraps them all up together.

Functionally, it's just like the attribute selector [href].

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag