A few days ago, Mark Pilgrim wrote up some details on how to automatically
insert an image before off-site links, using Movable Type macros. I
don't like doing it that way; it's possible with pure CSS (assuming you
have a browser that supports CSS3 selectors -- this means Mozilla, in
case you hadn't guessed). If you are using Mozilla, you'll see a little world icon (
) after each external link. Read on for a description of how the technique works.
Mark's method works by using MT macros to assign a class of "offsite"
to off site links, and then styling those links accordingly. Using CSS3
selectors, we can style off-site links directly without having to assign
them a class or run any server-side code. Here's the code to do it, and
then we'll discuss how it works.
/* Add an external-link icon to absolute links */
div.blogbody a[href^="http:"] {
background: url(/images/remote.gif) right center no-repeat;
padding-right: 12px;
}
div.blogbody a[href^="http:"]:hover {
background: url(/images/remote_a.gif) right center no-repeat;
}
/* ...but not to absolute links in this domain... */
div.blogbody a[href^="http://www.kryogenix.org"] {
background: transparent;
padding-right: 0px;
}
div.blogbody a[href^="http://www.kryogenix.org"]:hover {
background: transparent;
}
/* ...or to the "google for $postTitle" link for each entry */
div.blogbody a[href^="http:"].googlelink {
background: transparent;
padding-right: 0px;
}
div.blogbody a[href^="http:"].googlelink:hover {
background: transparent;
}
This all works by using the CSS3 "starts-with" selector,
^=, on attributes. Where we have a selector
a[href^="http:"], that means "select all a
tags where the href attribute starts
with the string http:". This will select all
absolute links, i.e., those that are not given as a link relative to
where the current page is. That's our first selector: it says "add this
background image and a bit of right padding to all absolute links".
(Note that the technique of adding a little bit of padding and then
putting an icon inside that padding as a background image, to make it look as though the icon is part of the flow of the page, is one that I got from Eric Meyer on CSS.)
(Ignore the second rule for the moment.)
Now, all outside links are absolute links (because they're not on the
same server as the current page), but some internal site links may also
be absolute (for instance, permalinks often are). So our third rule
removes the background and padding we applied above for absolute links
that point to my domain. (You'll have to customise this bit for your own
domain.)
Ignoring the fourth rule for a little bit, the fifth rule does the
same as the third rule, for absolute links with class "googlelink". This
is because posts here have a "search Google for the post title" link,
which is itself a small icon; it looks a bit daft to have a small
representative icon (the magnifying glass) followed up by another small
icon! So this suppresses the "external link" indicator for that particular link (which is defined as class "googlelink" in the MT templates).
Note that flashy people could have defined the third and fifth rules
as one rule, because you can add multiple selectors on a rule; this
should work:
div.blogbody a[href^="http://www.kryogenix.org"], div.blogbody a[href^="http:"].googlelink {
etc etc etc
}
but I wanted to take my time over this, because CSS3 selectors aren't
all that widely supported.
What about those rules that we ignored, the second, fourth, and
sixth? Well, they apply to the absolute external links in exactly the
same way as rules 1, 3, and 5, but they add the pseudo-class
:hover. So when you mouseover one of our external
links, these new styles apply. All this does is switch in a new version
of the background image (in this case, an animated spinning version of the world image).
The images come from Matterform's excellent QBullets
collection.
So, there you have it. Fortunately, Internet Explorer, which doesn't
support CSS3 selectors, doesn't partially apply them or anything; our
selectors above just don't match anything and hence the view in IE is
unchanged (you just don't get the neat icons).
For those of you who are Mozillaless and remain unclear on what this
should all look like, here's a screenshot. See how the "Show, Don't
Sell" link, which is external, has the icon, whereas the "more detailed
writeup" link, which is a link to somewhere else on kryogenix.org, does
not.
Sir Andrew Leggatt
Chief Surveillance Commissioner
Devon from Knight Rider
One and the same? You be the judge. What could this mean? Is the Knight Foundation really controlling the British public? Are we to see Security Service agents travelling around in an implausibly massive black lorry? Worrying.
-----
