2012-12-24 15:44, Stan Brown wrote:
>> a.showURL:after { content: "[URL: "
>> "
http://yourserver.com/"attr(href) attr(title) "]";
>> padding:0 0.25em; text-decoration:underline }
>> }
[...]
> I think this has promise. It would mean having two show-URL-type
> styles, one for external links (my original) and one for internal
> (your suggestion), but that doesn't seem like much of a burden.
It's possible to distinguish between internal and external links using
classes, of course, but you can avoid the need for extra classes if it
is ok to distinguish between relative and absolute URLs in links.
Usually internal links are relative, external aren't. This means you
could use something like the following:
a[href]:after {
content: "[URL:
http://www.example.com/" attr(href) "]";
padding:0 0.25em;
}
a[href ^= "http"]:after {
content: "[URL: " attr(href) attr(title) "]";
}
The selector [href ^= "http"] matches an element with an href attribute
that has a value starting with "http".
This is a bit simplistic, and it postulates that no relative link starts
with "http". (I'm using "http" and not "http://" to cover "https://",
too.) More seriously, it fails for URLs like "//
www.example.com",
"/foo/bar", and "../foo", because the URLs won't be resolved in CSS -
they are just treated as strings. And naturally e.g. "ftp://" links
would be incorrectly treated as relatuve in this setup.
Regarding text-decoration: underline, I don't see why you would
underline a URL that is clearly indicated as a URL with the "[URL: " and
"]" wrappers. Besides, the :after pseudo-element content will be
underlined anyway if the link itself is. It's really a problem how to
prevent that, but on the other hand, is there any reason to underline
links in print media, especially if they are a followed by their URLs in
brackets?
I might also consider adding word-break: break-all to allow free line
breaking within the URL, but that's debatable. Long URLs might otherwise
cause messy appearance, but on the other hand, URLs shouldn't really be
*freely* wrapped even when inside wrappers.
> Follow-up question: I'm using the title="..." attribute in the
> <a href> tag to show the last date I accessed an external link.
It's a bit odd.
> I confess I've never understood the _purpose_ of title="...", since the
> link text in <a>...</a> serves that purpose,
The idea is that the title attribute may provide an advisory title that
is not essential for the page content but helps the user to see, without
following the link, additional information about the destination of the
link. Jakob Nielsen, the usability expert, wrote about this as early as
in 1998: "Using Link Titles to Help Users Predict Where They Are Going",
http://www.useit.com/alertbox/980111.html
For example, your link text might be something as short as "WCAG 2.0"
and the advisory title might be "Web Content Accessibility Guidelines
(WCAG) 2.0 - W3C Recommendation 11 December 2008". This should not be an
excuse for using cryptic abbreviations as link texts; but it might be OK
in a context where the abbreviation has been explained or can otherwise
be assumed to be known - the advisory title would then be just a
friendly reminder.
However, although the basic idea is good, the implementation of title
attributes as tooltips in browsers is lousy: tiny font (unaffected by
CSS) in box that vanishes after a few seconds. The progress of CSS has
made "CSS tooltips" a better idea: write the advisory title as normal
content after the link, wrap it in an element, make it initially hidden,
and make it appear (in a positioned element) on mouseover.
> but its _function_ seems
> to be to pop up a tool tip in graphical browsers,
That's one of its functions. It may also matter to search engines, and
speech browsers may give the user optional access to it. But although
these are useful features, the most important feature is the tooltip
effect, which not that good an idea. (And if you use a "CSS tooltip",
you probably should not use the title attribute, since the effect would
be annoying.)
> and I like the idea
> of showing how old a link is.
I would say that the date would be a suitable part of an advisory title
but not an advisory title as such. When displayed as a title tooltip or
in a CSS tooltip, a mere date or a date preceded by e.g. "Last verified"
might look a bit odd.
> Is there a better way to show when an external link was last
> verified, or is that not even worth doing?
Well, it could be displayed as part of the information in a CSS tooltip.
But I would not do it. No matter how you formulate the explanation of
the date, people will often take it as indicating the last update time
of the linked document.
--
Yucca,
http://www.cs.tut.fi/~jkorpela/