by PJ Doland and Jack Shedd
The Problem With REL.
In [an earlier post][1], we recommended the use of the REL attribute for indicating that content was “not suitable for work.” The REL attribute has obvious benefits:
- REL isn’t widely (or even sparsely) implemented. With the notable exception of Google’s use of REL for it’s ‘nofollow’ tag, it is difficult to think of a user-agent that actually does anything with the REL attribute.
- REL was designed to specifically indicate a destination anchor’s relation to a source anchor.
- REL allows for user-definable types, making it simple to extend.
However, there are several problematic issues that might make us question our decision to use the REL attribute as a means of indicating that content is “not suitable for work”:
- REL is not a global attribute. It applies only to A elements. Using it elsewhere would be a violation of the specification.
- REL, semantically, is an indication of the destination anchor’s properties. The REL attribute does not apply to the content inside the A tags that enclose it.
- The attribute selector of the CSS 2.1 specification is not widely supported in web-browsers (i.e IE6). This would make styling the elements problematic.
When taken as a whole, we can easily see that our original implementation would be functionally limited to A elements only. This would restrict an author’s ability to style and mark other types of content he might deem “not suitable for work.”
Have Some Class
Numerous commenters pointed out that the CLASS attribute may be a better choice for the NSFW tag. The CLASS attribute has several advantages:
- CLASS is a global attribute, applicable to any element.
- CLASS is widely supported by browsers as a CSS selector.
- CLASS allows for user-definable types, making it simple to extend.
However, it has a fairly significant semantic failing:
- CLASS indicates qualities pertaining to the content within the tags it extends. It does not extend other attribute values–particularly, the HREF attribute.
For the idea to really work well, authors will need a way to mark destination anchors as possibly offensive. If we rely on CLASS alone we fail to be semantically accurate.
Just Use ‘em Both
Imagine a paragraph, much like this paragraph. Within that paragraph we link to a [pornographic][2] website.
Before NSFW, the source for the paragraph above would look something like:
Imagine a paragraph, much like this paragraph. Within that paragraph we link to a <a href="http://www.whitehouse.com">pornographic</a> website.
Using just the CLASS attribute, we can transform our source into:
Imagine a paragraph, much like this paragraph. Within that paragraph we link to a <a href="http://www.whitehouse.com" class="nsfw">pornographic</a> website.
The problem lies with the word pornographic. The word, itself a child of the A element, isn’t NSFW at all. It’s a perfectly wholesome word. The objectionable portion is the destination anchor of the A element. We need a way to tell our visitor’s user-agent that the concern is the destination link.
Using an NSFW REL attribute would do just this.
Imagine a paragraph, much like this paragraph. Within that paragraph we link to a <a href="http://www.whitehouse.com" rel="nsfw">pornographic</a> website.
But limiting our solution to REL is short-sighted.
Imagine a paragraph, much like this paragraph. Within that paragraph we link to a <a href="http://www.google.com">giant penguin cock</a> website.
The phrase “giant penguin cock” is bound to offend someone. The destination anchor itself is harmless. Semantically, we want to let our visitor’s user-agent know that within our A element, the user may encounter a word, or phrase, or paragraph, or image, that is NSFW. REL would be the incorrect attribute under that scenario. CLASS would work much better.
Imagine a paragraph, much like this paragraph. Within that paragraph we link to a <a href="http://www.google.com" class="nsfw">giant penguin cock</a> website.
And of course, we could also…
Imagine a paragraph, much like this paragraph. Within that paragraph we link to a <a href="http://www.whitehouse.com" rel="nsfw" class="nsfw">giant penguin cock</a> website.
Now everything about that element is offensive (and appropriately marked).
Implementation!
Unfortunately, browser developers are often slow to implement new ideas. How can we make use of this impromptu standard now?
In the case of inappropriate content, the solution is simple. We can just ask the browser to hide the child elements from the user. We will leave the portion of the layout where those elements would appear blank. This way the user knows that something has been hidden.
.nsfw { visibility:hidden; }
Or, we could force the element to be completely removed from the layout, leaving no indication it ever existed:
.nsfw { display:none }
REL is trickier.
The CSS 2.1 specification outlines the syntax for an [attribute selector][3]. In theory, we should be able to write a simple CSS rule much like our CLASS examples above.
*[rel=nsfw] { visibility:hidden; } *[rel=nsfw] { display:none }
Safari 2, Firefox, Opera 9 and IE7 all support the above CSS rule. IE6 does not.
We’ll need a cheap javascript routine to enable support in IE6.
16 Comments
You might want to check out the microformats.org website, with many examples of the use of rel to add semantic value to links (and also extensive use of the class attribute for this too). Also, there is an attribute ‘rev’ which may get around your second problem with rel above. Your idea seems compatible with the microformats initiative, you may get better traction if you can bring it up in that community.
Interesting concept, but I don’t think it will catch on. Remember goat cx is technically a prank, and that sort of stuff would not be coded with any hint or clue. But it may work for other responsible coders.
I think the HTML markup needs to support a tag like NSF and have an attribute such as ‘work’, ‘kids’, ‘wife’ etc.
This would be way more flexible and work well for a multitude of use cases.
Funny geeky idea, but don’t you find it slightly ethnocentric to standardize in a universal spec a very western set of moral/cultural values?
Of course, goatse is probably off limits on all continents, but what about corner cases like female breasts, that you can see on huge billboards over here in france.
For the jQuery crowd: $(’*[@rel=nsfw],.nsfw’).hide();
No need for css, just the one line
Generally, I object people that can’t even write valid Web URLs (hint: trailing slash). But of course, rel=nsfw is a good idea. Just take care that it is also a multi-valued attribute just like class, e.g. rel=”nsfw nofollow”.
“Just take care that it is also a multi-valued attribute just like class, e.g. rel=”nsfw nofollow”.”
In that case, again for the jQuery crowd, you could do something like this:
$(’[@rel*=nsfw],.nsfw’).hide();
I think you may be re-inventing the wheel:
http://www.w3.org/PICS/
–Bob.
But in your paragraph case, you don’t actually just want to mark the link and the contents of the link as NSFW. Because if you do, and someone hides NSFW content as you suggest, the remainder of the paragraph makes no sense.
If only the target of a link is NSFW, you don’t want to hide it, you want to indicate it as such. So the “default” styling for NSFW should be to hide class=”nsfw”, and color (e.g.) red rel=”nsfw”. And people should avoid putting NSFW words inside the <a> tag (as in your example) because hiding just the tag leads to an incomprehensible sentence.
So ideally, your link to whitehouse.com would be rel=”nsfw” and so clearly marked, but the text would describe the site in a SFW way; whitehouse.com itself would have <body class=”nsfw”>, and be hidden.
Gerv
Greasemonkey script: http://userscripts.org/scripts/show/6916
Should NSFW contain the reason why it is NSFW? How would you add that?
class=”nsfw-language” rel=”nsfw-pr0n”
?
I wonder if NSFW should be extended to content in the current page:
…
I think you should use “upmga” instead of “nsfw.” That would stand for:
“Uptight People Might Get Offended”
With “upmga” it would no longer be ethnocentric as only uptight people would need filter the content. ;-)
Everything offends someone. I can view rotten.com and ogrish at work and my boss will come by and chuckle. People’s standards and environments are different. This is silly.
For the current page, a META tag of some sort is probably what you want.
Technically, ‘rel’ indicates the properties of the destination resource in relation to the targeting resource. So rel=”stylesheet” means “the relationship of that document to this one is that it’s a style sheet for this document”. Given this, rel=”nsfw” could mean “that document is a NSFW version of this one” or “”that document is NSFW as compared to this one”.
The key being that ‘rel’ describes a relationship between the targeting and targeted documents. I’m not sure that NSFW is a concept that applies there.
The ‘class’ attribute, of course, has no such restrictions, which is why most microformats use ‘class’ to contain their semantic information.
I want to echo what Eric said. This is a semantic abuse of the rel attribute (just as nofollow is).