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;
}
I happened across your article while looking for something else, and see that you wish to disable “nofollow” in WordPress. Here’s a link to a plugin (not my plugin) that I’ve read it does the job nicely.
http://blog.taragana.com/index.php/archive/wordpress-15-plugin-strip-nofollow-tag-from-comment-urls/
I like the idea of presenting the hreflang-value with CSS; actually, with a little modification, I use it in my own weblog now (I am one of those who do care about semantics 😉 …)
Pity XHTML2 will most likely disable this functionality by making hreflang a list instead of a single value 🙁
BTW: When I present the value of hreflang the way you suggest, I don’t find any way to make the line that the browser draws under the link stop before the generated language-flag. Do you have any idea?
Oskar, that’s easy. Here’s some modifed CSS that works well for your needs
div.storyBody a[hreflang] {
padding-right: 1em;
}
div.storyBody a[hreflang]:after {
content: "\A0" attr(hreflang);
font-size: 75%;
line-height: 0;
vertical-align: super;
margin-right: -1.5em;
}
Thx! I was very surprised to come back here and find some help! I really appreciate that.
I played with the CSS you suggested; it would work finde in my context, right. However, as soon as I put something other than a 2-letter-code in the “a:after {content:…}“, especially if the generated content is not of equal length for the respective languages, it fails. It seems the two basic problems are that 1) the content is generated within the a-tag, making it a link (also a behavior I might want to change) and 2) there is no way to set a text-decoration… 🙁
hi!
i have a question. is that external link identifier to be used with wordpress only? i really need something like that for my website, but i cant get it to work.
thank you
pierlo
Pierlo, the CSS will work regardless of the CMS, it just requires a browser that supports the attribute selectors and the
::after
pseudo-element. If you post a link to your site, I could take a quick look and let you know what you’ve done wrong.