New link type proposal, a:external {}

Today’s CSS specification allows for the browser to distinguish between a few different types of links. Two such types are regular links and visited links.

a:link { }
a:visited { }

By default, visited links are purple. This is a concept that we’re all very familiar with, both as web developers and web users. It’s simple, it’s useful and it’s only really possible because the browser itself is doing the link tracking for us.

Imagine if web developers were tasked with manually applying such a style to each and every link? We’d have to implement some sort of system to track which links our users are clicking on and then programmatically apply a style like <a class=”visited”>s</a> to each link. Would anyone go through the trouble? Nope. We’d be missing out on lots of useful information because it would be nearly impossible to implement.

Thankfully, we don’t have that problem with visited links, but we do have a problem with another type of link. The external type.

An external link is a link that goes to a different domain than the one that the current page resides at. A link can either be internal or external. It would be trivially easy for a browser to apply a pseudo style called a:external for us on the appropriate links. Wouldn’t that be nice to have? Definitely.

Implementing this manually is certainly easier to do than with the visited case. Sites like Wikipedia have been doing it for a long time. You could do it with a little bit of js, or by adding a class=”external” to all the right links. But, it’s still an extra step that only the most conscientious web developers will bother to take. If it were built into the browser and given a subtle default style, then we’d all benefit from it despite the lack of effort or knowledge from the large majority of web developers.

How can we go about making this happen? Who makes all these CSS spec decisions? Can I edit the Firefox source myself and submit a patch?

8 Responses to “New link type proposal, a:external {}”

  1. Dan McKinley Says:

    What about subdomains? Are those external? They are for some people but not for others. Same domain, but https:// instead of http://? Different ports? What about http://foo.com vs. http://www.foo.com?

    I would like the idea but the implementation seems more than trivial. And if that’s true the odds that results from all of the major browsers would match seem low.

    However you definitely do know which links are external when you’re coding your application. With the concerns above it winds up being easier for you to code a control (or whatever this concept is called in your web framework of choice) that renders an anchor with class=”external” on it.

  2. Udi Says:

    No, keep it simple. External means different top-level domain. That should be the default and I think that will suffice for most cases where this would be useful.

    After that, you’re welcome to not style a:external and do something more complex on your own with a custom style.

  3. Udi Says:

    The value here comes in picking a simple default to apply when webmasters neglect to do the work on their own. (I’ve already implemented this for our new site, as you know)

  4. Jon Williams Says:

    CSS level 3 selectors can accomplish some of this functionality. I matched on links beginning with “mailto:” and the “after:” selector to type email links.

  5. Vin Turk Says:

    There are code snippets (either in the form of a js that you include, or wordpress/blog plugins) that automatically detect a link not associated with your domain, and style that link differently (defined by you). The main problem with these are exactly what you mentioned above: they are not implemented at the browser level…its up to the web master, CMS, or platform to identify and style the links differently.

    There is another issue when relying on a webmaster: Most large publications have editors that submit content using a defined workflow such as:
    1)editor/journalist writes article and uploads it into system
    2)article is sent to another user for approval or more editing
    3)article is categorized or taxonomy applied
    4)article is published to public site.

    Relying on an journalist to flag these types of links is a worthless endeavor.

    Udi, you mention “The value here comes in picking a simple default to apply when webmasters neglect to do the work on their own. (I’ve already implemented this for our new site, as you know)”.

    Im looking at all the blog comments and most user’s links are external, yet its the same styling for all the links.

  6. Udi Says:

    Hey Vin,

    I was referring to the new startup that I’m currently developing with Dan. Not this blog.

    Thanks,
    Udi

  7. GactGlalo Says:

    Today good day :)
    The interesting name of a site – breasy.com
    I yesterday 5 hours
    looked in a network So I have found your site :)
    The interesting site but does not suffice several sections!
    However this section is very necessary!
    Best wishes for you!
    Forgive I is drunk :))

  8. niceunreabe Says:

    Hi people

    As a fresh breasy.com user i just want to say hello to everyone else who uses this site <:-)