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;
}