As I promised over two weeks ago, I’ve written some useful CSS that I’m going to share with you all. The first is used to identify links using relationships like rel="nofollow" and rel="tag", the second for identifying the language of a document being linked to, the third can be used either as a substitute for rel="external" on external links, or for identifying links to a particular site, and the fourth and final is Hixie’s Cat Attack Hack.

They’re not all new, some of you have probably seen or used similar variants before. However, that doesn’t make them any less useful, which is why I’m publishing them.

Relationships

The rel attribute is supposed to indicate a semantic link relationship from one resource to another. However, it has been very much abused lately for non-semantic, functional uses designed for a particular user agent (namely, search engines). The relationships I’m specifically referring to are Google’s nofollow, which I argued strongly against, and Technorati’s tag. (I know, I know, my current blog has them both cause they’re embedded in WordPress by default with no easy way to turn them off, but they will both be getting removed later).

a[rel~="nofollow"]::after {
    content: "\2620";
    color: #933;
    font-size: x-small;
}
a[rel~="tag"]::after {
    content: url(http://www.technorati.com/favicon.ico);
}

These make use of the attribute selector for space separated lists of values. Any a element with a relationship containing those values will be matched. Links with the nofollow relationship will be followed by a dark red skull and crossbones (?) and those with the tag relationship will be followed by the Technocrati icon. For the adventurous, you may wish to convert the Technorati icon to a data: URI; but if you do remember to either quote the data: URI or escape the special characters. See the CSS <uri> value for more information.

The nofollow style is a slight variation of the suggestion I found listed with the Nofollow Finder Greasmonkey script, and a slightly less irritating variation of Phil Ringnalda’s blinking lime.

Language

The hreflang attribute in HTML is used to indicate the language of the document being linked to; however, most user agents do absolutely nothing with it that is helpful for the user. So, basically, the only people that have used it in the past are people that actually care about semantics. Well, I’ve come up with a useful way to make use of it to identify links pointing to a document in a language I won’t be able to understand. Since I only understand English and because I don’t need to be explicitly told when a document is in English, those links won’t be indicated with this CSS.

:link[hreflang]:not([hreflang|=en])::after {
    content: " [" attr(hreflang) "]";
    font-size: xx-small;
    font-weight: 100;
    vertical-align: super;
}

Again, this makes use of the attribute selectors, as well as the commonly used :link pseudo-class. This first attribute selector matches any link with that attribute and the second matches when the attribute has a hyphen separated list of values beginning with en. The negation pseudo-class: :not(…) is a functional notation taking a simple selector.

External Links

Unlike the previous examples, this one is designed for use in an author stylesheet, not a user stylesheet. Many people make use of the non-standard rel=”external” relationship to indicate a link to an external site. However, adding that to each and every link is time consuming and and unnecessary. This style rule will place an north east arrow ( ?) after any link on your site to an external site.

[href^="http://"]:not([href*="lachy.id.au"])::after {
    content: "\2197";
}

It works by selecting any link with the href attribute beginning with “http://“, but does not contain your domain name. It uses two separate attribute selectors so that it will match when the URI uses the www. or not. So, the above will match not match either <a href=http://lachy.id.au…"> or <a href=http://www.lachy.id.au…">. If, you want to actually highlight links to a certain site, then just remove the negation pseudo-class, leaving just the two attribute selectors.

Hixie’s Cat Attack Hack

Anyone that regularly reads Hixie’s Natural Log will be aware of Hixie’s obsession with cats and those of us using Firefox will have noticed something very strange happenning with the autoscroll icon. When used, the normal autoscroll icon becomes extra large, there’s a picture of a cat in the background and the cursor becomes a pointer.

That trick, which I will call Hixie’s Cat Attack, makes use of the way Firefox inserts the autoscroll image as a direct descendant of the html element. This, which I will call Hixie’s Cat Attack Hack, simply reverses the effects of Hixie’s Cat Attack. This CSS, like the first two, should be placed in userContent.css in your profile directory.

html>img {
    width: 28px !important;
    height: 28px !important;
    background: none !important;
    cursor: normal !important;
}