精通CSS高级Web标准解决方案 Chapter 5 Styling Links

#精通CSS高级Web标准解决方案  
#Chapter 5 Styling Links  
In this chapter you will learn about  
• Ordering your link selectors based on the cascade  
• Creating stylized link underlines  
• Styling external links using attribute selectors  
• Making links behave like buttons  
• Creating visited-link styles  
• Creating pure CSS tooltips  

##Simple link styling  
The easiest way to style a link is to use the anchor type selector. For instance, this rule will make
all anchors red:  
    a {color: red;}

The first anchor contains a fragment
identifier, and when the user clicks that anchor, the page will jump to the second named anchor:  

    <p><a href="#mainContent">Skip to main content</a></p>
    ...
    <h1><a name="mainContent">Welcome</a></h1>

CSS has two special selectors called link pseudo-class selectors. The
:link pseudo-class selector is used to target links that have not been visited, and the :visited
pseudo-class selector is used to target visited links. In this example, all unvisited links will be
blue, and all visited links will be green:  
    a:link {color: blue;} /* Makes unvisited links blue */
    a:visited {color: green;} /* Makes visited links green */  

The other two selectors you can use for styling links are the :hover and :active dynamic pseudoclass
selectors. The :hover dynamic pseudo-class selector is used to target elements when they
are hovered over, and the :active dynamic pseudo-class selector targets elements when they
are activated. In the case of links, activation occurs when the link is clicked. In this example, links
will turn red when hovered over or clicked:  
    a:hover, a:active { color: red;}  

To ensure your pages are as accessible as possible, it is always a good idea to add a :focus
pseudo-class to your links when defining hover states. This will allow your links to take on the
same styles when they are tabbed to using the keyboard as they have when hovered over using
the mouse.  
    a:hover, a:focus { color: red;}  

Other elements can also use the :hover, :active, or :focus pseudo-class selectors. For
instance, you could add a :hover pseudo-class on your table rows, an :active pseudo-class on
your submit buttons, or a :focus pseudo-class on your input fields to highlight various forms of
interactivity. Unfortunately, IE 7 and below don’t support the use of pseudo-class selectors on
anything other than links, but all modern browsers do.  
    /* makes table rows yellow when hovered over */
    tr:hover {
    background: yellow;
    }    
    /* makes submit buttons in some browsers yellow when pressed */
    input[type="submit"]:active {
    background:yellow;
    }
    /* makes inputs yellow when selected */
    input:focus {
        background:yellow;
    }

One of the first things most people learn to use these selectors for is turning off the underline for
links, and then turning them back on when they are hovered over or clicked. This can be done by
setting the text-decoration property to none for unvisited and visited links and to underline for
hovered or active links:

    a:link, a:visited {text-decoration: none;}
    a:hover, a:focus, a:active {text-decoration: underline;}

In the previous example, the order of the selectors is very important. If the order is reversed, the
hover and active styles won’t work.

    a:hover, a:focus, a:active {text-decoration: underline;}
    a:link, a:visited {text-decoration: none;}

The reason for this is the cascade. In Chapter 1, you learned that when two rules have the same
specificity, the last rule to be defined wins out. In this situation, both rules have the same
specificity so the :link and :visited styles will override the :hover and :active styles. To make
sure this doesn’t happen, `it’s a good idea to apply your link styles in the following order:
a:link, a:visited, a:hover, a:focus, a:active
An easy way to remember this order is the phrase “Lord Vader Hates Furry Animals,” where L
stands for link, V stands for visited, H for hover, F for focus, and A for active.`  
###Simple link embellishments  
Designers tend to dislike link underlines, as they add too much weight and visual clutter to a
page. If you decide to remove link underlines, you could choose to make links bold instead. That
way, your page will look less cluttered, but the links will still stand out:

    a:link, a:visited {
    text-decoration: none;
    font-weight: bold;
    }  

You can then reapply the underlines when the links are hovered over or activated, reinforcing
their interactive status:  

    a:hover, a:focus, a:active {
    text-decoration: underline;    
    font-weight: bold;    
    }

However, it is possible to create a low-impact underline using borders instead. In the following
example, the default underline is removed and replaced with a less obtrusive dotted line. When
the link is hovered over or clicked, this line turns solid to provide the user with visual feedback
that something has happened:  

    a:link, a:visited {
    text-decoration: none;
    border-bottom: 1px dotted #000;
    }
    a:hover, a:focus, a:active {
    border-bottom-style: solid;
    }

###Fancy link underlines  
You can create some very interesting effects by using images to create your link underlines.For
instance, I have created a very simple underline graphic comprised of diagonal lines (see Figure
5-1).  
You can then apply this image to your links using the following code:  

    a:link, a:visited {
    color:#666;
    text-decoration: none;
    background: url(/img/underline1.gif) repeat-x left bottom;
    }  

You do not have to stop with link and visited styles. In this example, I have created an animated
GIF for the hover and active states, which I apply using the following CSS:  

    a:hover, a:focus, a:active {
    background-image: url(/img/underline1-hover.gif);
    }

When you hover over or click the link, the diagonal lines appear to scroll from left to right, creating
an interesting pulsing or poling effect. Not all browsers support background image animations, but
those that do not will usually display the first frame of the animation, ensuring that the effect
degrades nicely in older browsers.  
hint:Remember to use animation carefully, as it can cause accessibility problems
for some users. If in doubt, always remember to check the Web Content
Accessibility Guidelines (WCAG 1.0) at www.w3.org/TR/WAI-WEBCONTENT.    
 
##Visited-link styles  
Designers and developers often forget about the visited-link style and end up styling visited links
the same as unvisited ones. However, a separate visited-link style can help orientate users,
showing them which pages or sites they have already visited and avoiding unnecessary
backtracking.  
You can create a very simple visited-link style by adding a check box to every visited link:  

    a:visited {
    padding-right: 20px;
    background: url(/img/check.gif) no-repeat right middle;
    }

##Styling link targets  
As well as linking to a specific document, you can use a link containing a fragment identifier to
point people to a particular part of a page.` You do this by adding a hash character, followed by
the ID of the element you want to link to, at the end of your href.` This can be extremely useful if
you want point to a specific comment in a long comment thread.For instance, say I wanted to link to the third comment on this page.  

    <a href="http://example.com/story.htm#comment3">
    A great comment by Simon
    </a>

When you click the preceding link, you will be taken to the appropriate document, and the page
will scroll down to the comment3 element. Unfortunately, if the page is quite busy, it is often
difficult to tell to which element the link has sent you. To get around this problem, `CSS 3 allows
you to style the target element using the :target pseudo-class. `In this next example, I am going
to highlight the target element by giving it a yellow background (see Figure 5-3).  

    .comment:target {
    background-color: yellow;
    }  

If you wanted to be even cleverer, you could choose to give the element an animated background
image that fades from yellow to white, thus simulating the yellow fade technique popularized by
companies like 37 Signals.  

    .comment:target {
    background-image: url(img/fade.gif);
    }

The target selector is supported by all recent versions of Safari and Firefox, but isn’t supported
by Internet Explorer at the time of writing.

##Highlighting different types of links  
On many sites, it is difficult to tell if a link points to another page on that site or to a different site
altogether. We have all clicked a link expecting it to go to another page in the current site, only to
be whisked away somewhere different and unexpected.  
A better solution would be to indicate external links somehow and let the user decide to leave the
site, open the link in a new window, or more probably these days, open it in a new tab. You can
do this by adding a small icon next to any external links.  
The easiest way to include an external link icon on your page is to add a class to any external
links and apply the icon as a background image. In this example, I have created space for the
icon by giving the link a small amount of right padding and then applied the icon as a background
image at the top right of the link (see Figure 5-5).it is not a particularly smart  as you
have to manually add your class to each external link.  

    .external {
    background: url(/img/externalLink.gif) no-repeat right top;
    padding-right: 10px;
    }  

As you learned in Chapter 1, attribute selectors allow you to target an element based on the
existence or value of an attribute. CSS 3 extends the ability with substring matching. As the name
suggests, these selectors allow you to target an element by matching your chosen text to part of
the attribute’s value. CSS 3 is not an official specification yet, so using these advanced selectors
may invalidate your code. However, the majority of standards-compliant browsers support these
nifty CSS 3 selectors.  
This technique works by first targeting any links that start with the text http: using the [att^=val]
attribute selector:  

    a[href^="http:"] {
    background: url(/img/externalLink.gif) no-repeat right top;
    padding-right: 10px;
    }  

This should highlight all external links. However, it will also pick up internal links using absolute
rather than relative URLs. To avoid this, you need to reset any links to your own site by removing
the external link icon. This is done by matching links that point to your domain name, removing
the external link icon, and resetting the right padding (see Figure 5-6).  

    a[href^="http://www.yoursite.com"],
    a[href^="http://yoursite.com"] {
    background-image: none;
    padding-right: 0;
    }  

You could even highlight nonstandard protocols such as the AOL instant messaging protocol
(AIM), with a little AIM buddy icon (see Figure 5-7):  

    a[href^="aim:"] {
    background: url(img/im.png) no-repeat right top;
    padding-right: 10px;
    }
    <a href="aim:goim?screenname=andybudd">instant message</a>  

###Highlighting downloadable documents and feeds  
Another common frustration is clicking a link thinking it will take you to a page and discovering
that the site has started downloading a PDF or Microsoft Word document. Luckily, `CSS can help
us distinguish these types of links as well. This is done using the [att$=val] attribute selector,
which targets attributes that end in a particular value, such as .pdf or .doc`:  

    a[href$=".pdf"] {
        background: url(img/pdfLink.gif) no-repeat right top;
        padding-right: 10px;
    }

    a[href$=".doc"] {
        background: url(img/wordLink.gif) no-repeat right top;
        padding-right: 10px;
    }  

Last, many people have RSS feeds on their websites. The idea is for people to copy these links
into their feed readers. However, inadvertently clicking one of these links may take you to a page
of seemingly meaningless data. To avoid possible confusion, you could highlight RSS feeds using
a similar method, with your own RSS icon:  

    a[href$=".rss"], a[href$=".rdf"] {
        background: url(img/feedLink.gif) no-repeat right top;
        padding-right: 10px;
    }

All these techniques can help to improve the user experience on your site.  

hint:Unfortunately, IE 6 and below don’t support the attribute selector. Luckily, you
can create a similar effect by adding a class to each element using JavaScript
and the DOM. One of the best ways to do this is with Simon Willison’s excellent
getElementBySelector function; you can find more details at
http://simonwillison.net/2003/Mar/25/getElementsBySelector/.
Alternatively, jQuery allows you to do something very similar.  

##Creating links that look like buttons  
Anchors are inline elements, which means they only activate when you click the contents of the
link. However, there are instances when you may want to create more of a button-like effect with
a larger clickable area. You can do this by setting the display property of the anchor to block and
then changing the width, height, and other properties to create the style and hit area you desire.  

    a {
    display: block;
    width: 6.6em;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    border: 1px solid #66a300;
    background-color: #8cca12;
    color: #fff;
    }
    The resulting link should now look like Figure 5-8.  

With the link now displaying as a block-level element, clicking anywhere in the block will activate
the link.
If you look at the CSS, you’ll see that the width has been explicitly set in ems. By their nature,
block-level elements expand to fill the available width, so if the width of their parent elements
were greater than the required width of the link, you would need to apply the desired width to the
link. This would likely be the case if you wanted to use such a styled link in the main content area
of your page. However, if your styled links were going in a sidebar, for example, you would
probably just set the width of the sidebar and not worry about the width of the links.
You may wonder why I am using line-height to control the height of the button instead of
height. Well, this is actually a handy little trick for centering the text in the button vertically. If you
were to set a height, you would probably have to use padding to push the text down and fake
vertical centering. However, text is always vertically centered in a line box, so by using lineheight
instead, the text will always sit in the middle of the box. There is one downside, though. If
the text in your button wraps onto two lines, the button will be twice as tall as you want it to be.  
The only way to avoid this is to size your buttons and text in such a way that the text won’t wrap,
or at least won’t wrap until your text size has been increased beyond a reasonable amount.
If you choose to use this technique, make sure that you only use it on things that are actually links
and don’t update the server. Otherwise, you may experience some undesirable results. When
Google accelerator launched, people found that content in their CMS or web application was
mysteriously disappearing. Sometimes, the entire contents of a site would vanish overnight. It
turns out that the authors of these tools had used anchor links rather than form elements for their
delete buttons. Google accelerator would spider these links in order to cache them and
inadvertently delete the content! Search engines spiders can have the same effect, recursively
deleting vast swathes of data. For that reason, you should never use links to make changes on
the server. Or to put it in technical terms, links should only ever be used for GET requests, and
never for POST requests.  

###Simple rollovers  
In the bad old days, people used large and overly complicated JavaScript functions to create
rollover effects. Thankfully, using the :hover pseudo-class allows us to create rollover effects
without the need of JavaScript. You can extend the previous example to include a very simple
rollover effect simply by setting the background and text color of the link when hovered over (see
Figure 5-9):  
    a:hover,
    a:focus {
    background-color: #f7a300;
    border-color: #ff7400;
    }  

### Rollovers with images  
for more complicated buttons, you
will probably want to use background images.I have created three button
images: one for the default state, one for the hover and focus states and one for the active state
(see Figure 5-10).    
The code for this example is very similar to the preceding example. The main difference is that
background images are being used instead of borders and background colors.  

    a:link, a:visited {
    display: block;
    width: 203px;
    height: 72px;
    text-indent: -1000em;
    background: url(/img/button.png) left top no-repeat;
    }
    a:hover, a:focus { background-image: url(/img/button-over.png);
    }
    a:active {
    background-image: url(/img/button-active.png);
    }  

This example uses fixed-width and fixed-height buttons, which is why I have set explicit pixel
dimensions in the CSS. To get the exact text treatment I wanted, I have included the button text
on the graphic and then hidden the anchor text off the screen with a large negative text indent.
However, there is nothing to stop you from creating oversized button graphics or using a
combination of background colors and images to create a fluid or an elastic button.  
 
###Pixy-style rollovers  
there is another way. Instead of swapping in
multiple background images, use a single image and switch its background position instead.
Using a single image has the added benefit of reducing the number of server requests as well as
allowing you to keep all your button states in one place. This method is known as the Pixy
method after the nickname of its creator, Petr Staníček (you can find more information at his
website: http://wellstyled.com/css-nopreload-rollovers.html).
Begin by creating your combined button image (see Figure 5-11). In this case, I am limiting the
button to an up state, an over state, and an active state. However, you could also include a
visited state if you desired.  
The code is almost identical to the previous example. However, this time, you align the
background image so the normal state is in the center and then shift the background to the right
or left for the hover and active states.  

    a:link, a:visited {
    display: block;
    width: 203px;
    height: 72px;
    text-indent: -1000em;
    background: url(/img/buttons.png) -203px 0 no-repeat;
    }
    a:hover, a:focus {
    background-position: right top;
    }
    a:active {
    background-position: left top;
    }

Unfortunately, Internet Explorer still makes a round-trip to the server to request a new image,
even though all you are doing is changing the alignment of the image. This causes a slight flicker,
which can be a little annoying. To avoid the flicker you need to apply the rollover state to the link’s
parent element, for example, its containing paragraph.  
    p {
    background: url(/img/ buttons.png)
    no-repeat right top;
    }

The image will still disappear for an instant while it is being reloaded. However, during this time,
the same image will be revealed underneath, hiding the flicker.
An alternate way to remove the flicker is to include the following line of code in your Internet
Explorer specific CSS file, which turns background caching on.  

    html {
    filter: expression(document.execCommand("BackgroundImageCache",
    false, true));
    }

###CSS sprites  
Multiple requests to the server can have a dramatic effect on the performance of your site, so the
Pixy method aims to reduce the number of requests by including all your button states in a single
image. But why stop there? Why not go one step further and include all your icons or even your
site navigation in a single image? That way, you could reduce the number of calls to the server
from multiple figures to just two or three. This is exactly what CSS sprites are—a single image
containing a multitude of different icons, buttons, or other graphics. Many large websites use this
technique including the Yahoo! homepage. In fact, we use the same technique for the Clearleft
site navigation (see Figure 5-12).  

    #nav li a {
    display: block;
    text-indent: -9999px;
    height: 119px;
    width: 100px;
    background-image: url('/img/nav.png');
    background-repeat: no-repeat;
    }
    #nav li.home a,
    #nav li.home a:link,
    #nav li.home a:visited {
    background-position: 0 0;
    }  
    #nav li.home a:hover,
    #nav li.home a:focus,
    #nav li.home a:active {
        background-position: 0 -119px;
    }
    #nav li.who-we-are a,
    #nav li.who-we-are a:link,
    #nav li.who-we-are a:visited {
    background-position: -100px 0;
    }
    #nav li.who-we-are a:hover,
    #nav li.who-we-are a:focus,
    #nav li.who-we-are a:active {
    background-position: -100px -119px;
    }  

By using this technique, you can cut down on the requests the web browser makes to your
server, considerably speeding up the download times. Furthermore, using sprites keeps all your
buttons, icons, and miscellaneous graphics in one location, improving maintainability. So it’s a
win-win situation.  
###Rollovers with CSS 3  
CSS 3 includes a number of properties like text-shadow, box-shadow, and border-radius that
make it possible to create heavily styled buttons that require no images whatsoever. To create
such a button, I will start with the code from our first example:  

    a {
    display: block;
    width: 6.6em;
    height: 1.4em;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    border: 1px solid #66a300;
    background-color: #8cca12;
    color: #fff;
    }

Next, I’ll add curved borders and a drop shadow. I’m also going to give the button text a subtle
drop shadow (see Figure 5-13).  
    a {
    display: block;
    width: 6.6em;
    height: 1.4em;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    border: 1px solid #66a300;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background-color: #8cca12;
    color: #fff;
    text-shadow: 2px 2px 2px #66a300;
    -moz-box-shadow: 2px 2px 2px #ccc;  
    -webkit-box-shadow: 2px 2px 2px #ccc;
    box-shadow: 2px 2px 2px #ccc;
    }  

Figure 5-13. A rounded corner button using only CSS  
To re-create the gradient, Safari 4 beta supports a proprietary value called -webkit-gradient.
While I would never normally recommend the use of proprietary code, this may provide a hint of
where CSS is heading in the future. This proprietary value takes a number of different arguments
including the type of gradient (liner or radial), the direction of the gradient (in this case, top-left to
bottom-left), a starting color, an end color, and any stops along the way. Obviously, if you didn’t
want to use this proprietary code, you could simply produce your own background image gradient
instead.  
a {
display: block;
width: 6.6em;
height: 1.4em;
line-height: 1.4;
text-align: center;
text-decoration: none;
border: 1px solid #66a300;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#abe142), to(#67a400));
background-color: #8cca12;
color: #fff;
text-shadow: 2px 2px 2px #66a300;
-moz-box-shadow: 2px 2px 2px #ccc;
-webkit-box-shadow: 2px 2px 2px #ccc;
box-shadow: 2px 2px 2px #ccc;
}
Last, Safari includes another proprietary property called box-reflect, which as the name
suggests, allows you to create reflections of an object. This property contains a number of
different arguments including the position and distance of the reflection along with a masking
image. Interestingly, you can use the –webkit-gradient value to automatically generate this
mask. In this instance, I’m positioning the reflection 2 pixels below the button and using a mask
that fades to white (see Figure 5-14).
a {
display: block;
width: 6.6em;
height: 1.4em;
line-height: 1.4;
text-align: center;
text-decoration: none;
border: 1px solid #66a300;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#abe142), to(#67a400));
background-color: #8cca12;
color: #fff;
text-shadow: 2px 2px 2px #66a300;
-moz-box-shadow: 2px 2px 2px #ccc;
-webkit-box-shadow: 2px 2px 2px #ccc;
box-shadow: 2px 2px 2px #ccc;
-webkit-box-reflect: below 2px -webkit-gradient
(linear, left top, left bottom, from(transparent),
color-stop(0.52, transparent), to(white));
}
There is some debate around whether these types of effects should be done using CSS or not, so
it’s uncertain if they will ever make it into the official specification. Because of this and the lack of
cross-browser support, it would be unwise to use these techniques in a production environment.
However, that shouldn’t stop you from playing around with them on your personal sites just as
long as you realize that they’re invalid CSS and may get removed or changed in future versions
of the browser.
Pure CSS tooltips
Tooltips are the little yellow text boxes that pop up in some browsers when you hover over
elements with title tags. Several developers have created their own custom, stylized tooltips using
a combination of JavaScript and CSS. However, it is possible to create pure CSS tooltips by
using CSS positioning techniques. This technique requires a modern, standards-compliant
browser like Firefox to work properly. As such, it is not a technique you would add to your day-today
arsenal. However, it does demonstrate the power of advanced CSS and gives you a hint of
what will be possible when CSS is better supported.
As with all of the examples in this book, you need to start with well-structured and meaningful
HTML:
<p>
<a href="http://www.andybudd.com/" class="tooltip">
Andy Budd<span> (This website rocks) </span></a> is a web developer based in
Brighton England.
</p>
I have given the link a class of tooltip to differentiate it from other links. Inside the link, I have
added the text I wish to display as the link text, followed by the tooltip text enclosed in a span. I
have wrapped my tooltip text in brackets so that the sentence still makes sense with styles turned
off.
The first thing you need to do is set the position property of the anchor to relative. This allows
you to position the contents of the span absolutely, relative to the position of its parent anchor.
You do not want the tooltip text to display initially, so you should set its display property to none:
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
When the anchor is hovered over, you want the contents of the span to appear. This is done by
setting the display property of the span to block, but only when the link is hovered over. If you
were to test the code now, hovering over the link would simply make the span text appear next to
the link.
To position the contents of the span below and to the right of the anchor, you need to set the
position property of the span to absolute and position it 1 em from the top of the anchor and 2
ems from the left.
a.tooltip:hover span {
display: block;
position: absolute;
top: 1em;
left: 2em;
}  
hint:Remember, an absolutely positioned element is positioned in relation to its
nearest positioned ancestor or, failing that, the root element. In this example,
we have positioned the anchor, so the span is positioned in relation to that.  
And that’s the bulk of the technique. All that is left is to add some styling to make the span look
more like a tooltip. You can do this by giving the span some padding, a border, and a background
color:
a.tooltip:hover span, a.tooltip:focus span {
display:block;
position:absolute;
top:1em;
left:2em;
padding: 0.2em 0.6em;  
border:1px solid #996633;
background-color:#FFFF66;
color:#000;
}
In Firefox, the applied technique should look something like Figure 5-15.