Re: :here for Links (:current link state)

Ernest Cline wrote:
> I am willing to be convinced that :here is a good idea, but I haven't seen
> any supporting reasons given as to why it would be.

If you are as willing to listen as you say you are, please allow me try
again to describe exactly what the feature is that we've been discussing
(I guess I didn't explain it very well before). This time I'll give a
couple examples.

> I agree that for a user (who has no control over the format that the
> author  has chosen for his local URLs) [href^="#'} cannot serve as an
> adequate  substitute for the proposed :here.  However, I have not seen
> a reason  presented why a user would care about differntiating between
> links in the  current page and those that are not.  Unless someone can
> come up with a  reason other than the user might think that its a neat
> idea, I see this as  being something that would add bloat to CSS
> without purpose.

The reason is that it's a huge hassle to acheive this important feature
with existing methods. Furthermore, because it's somewhat complex to
achieve, many web authors simply don't bother.

Here are two examples:

Example 1:
Go to the W3C home page, http://www.w3.org.
The links at the top are all a certain link style, right?
Take a look at the link to Technical Reports. Now click that link.
When the new page comes up, the nav bar text is still right where it was,
but now the Technical Reports text has a different appearance and is no
longer a link.

Benefits: (1) Lets visitors know "you are here", and (2) removes the link
to the current page, which is unnecessary and could even confuse some
visitors.

How was this achived? Here's part of the HTML code for the nav bar:
<div class="banner">
...
<a class="bannerLink" ... href="/Consortium/Activities">Activities</a> |
<span class="currentSection">Technical Reports</span> |
<a class="bannerLink" ... href="/Help/siteindex">Site Index</a> |
<a class="bannerLink" ... href="/2002/03/new-to-w3c">New Visitors</a> |
...
</div>

As you can see, in order to achieve this effect (instead of simply reusing
the same nav bar code on every page), someone (1) removed the <a>...</a>
tags that had surrounded "Technical Reports", and (2) wrapped that text in
a <span> to assign it a class (currentSection) so that they could style it
via CSS. Someone had to go in and do this manually; or if it was
script-generated, someone had to code a script to properly generate a
different nav bar for every page or section of the web site. This is done
on thousands of sites, and it's a lot of hassle.

Example 2:
Go to http://www.zeldman.com.
View the orange nav bar at top left and notice that the current page
("daily report") looks different. Click any of the links in the nav bar.
It's the same on the rest of the pages: In the nav bar, the current page
has a different style. (By the way, this rollover is pure CSS; no
JavaScript, no images.)

To achieve this effect, Zeldman used a different method than was used in
Example 1. Here's part of the HTML:
<ul>
<li id="secondarytop"><a href="/" ...>daily report</a></li>
<li id="glam"><a href="/glamorous/" ...>glamorous</a></li>
<li id="classics"><a href="/classics/" ...>classics</a></li>
<li id="about"><a href="/about/" ...>about</a></li>
<li id="contact"><a href="/contact/" ...>contact</a></li>
<li id="essentials"><a href="/essentials/" ...>essentials</a></li>
<li id="pubs"><a href="/pubs/" ...>pubs</a></li>
<li id="tour"><a href="/tour/" ...>tour</a></li>
</ul>

Zeldman added an id for every link (he could have put the id in either the
<a> or <li>). Then, in order to apply a different style, he embedded a
style sheet in each page with some page-specific CSS. For the daily report
page:
<style type="text/css">
#secondarytop a:visited {
	font-weight: normal;
	background: #c60;
	color: #fff;
	text-decoration: none;
	}
</style>

This is the same technique described in "Eric Meyer on CSS" (p. 115). The
technique allows Zeldman to use the same nav bar HTML code on every page,
but it requires him to add a different page-specific style sheet to each
page where no embedded style sheet would otherwise have been necessary.
(Not a huge deal on a small site, but need I remind you that many sites
are hundreds or thousands of pages.) The other disadvantage of this
method, compared to example 1, is that the current page still behaves like
a link.

If there was a :here, :local, or :current pseudo-class, none of this extra
coding would be required. The effect would be achieved simply by adding
the following to a *global* style sheet:
a:current {style rules}

This is much more than a "neat idea." This is the way the web *should*
look and how it should behave. There is a need for it. Webmasters have
been implementing this feature continuously from day one on the web,
despite the fact that there's never been an easy way to do so. Thousands
of sites still do this today. It has always been possible to achieve with
existing standards alone, but it's always been a big hassle that requires
changing every page (and difficult to do with SSIs and the like). If it
was easy, more sites would do this. Many sites have given up and no longer
bother.

The following is a quotation from the book DHTML and CSS for the World
Wide Web, Visual QuickStart Guide, by Jason Cranford Teague (2nd edition,
Peachpit Press, 2001). This is a Note, highlighted on a grey background,
on page 397:

THE MISSING LINK STYLE?
Although the four link states provided by CSS are very useful, I recommend
that a fifth state -- current -- be added to the standard to help Web
designers create more versatile pages. A current attribute would allow Web
designers to set the appearance of a link if it is the same as the page
that is currently being displayed (the URL for the Web page is the same as
the href, for example). This attribute would allow designers to use CSS to
show which page a visitor is on without having to hard-code a special link
style into every page.

Larry

Received on Tuesday, 1 April 2003 01:57:40 UTC