Arie (arie) wrote in xxcustomization,
Arie
arie
xxcustomization

CSS and hyperlinks, making them "pretty" without making them incorrect.

If you come across a user who has an a{} definition it's important that you look at all of their hyperlink overrides very carefully before merging any of them together. In some cases the a{} definition can be merged with another definition (such as a:hover{}) but in many cases it can't be merged with other definitions. In order to determine what can and can't be merged you have to know what each of the hyperlink definitions do.

The a{} definition applies to ALL links whether they have been visited or not.

The a:link{} definition applies only to links that are unvisited.

The a:hover{} definition applies only when the mouse cursor "hovers" over the link.

The a:visited{} definition applies only to visited links.

The a:active{} definition applies only to the currently active link.

What can and can't be merged.

Example 1:
Before After - Correct After - Incorrect
a {
font-size: 6pt;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: line-through;
}
a:hover {
text-decoration: underline;
}
N/A a:link {
text-decoration: none;
font-size: 6pt;
}
a:visited {
text-decoration: line-through;
}
a:hover {
text-decoration: underline;
}
The definitions in the "Before" column will make all links 6pt font size, it will have no text decoration on unvisited links, a line-through on visited links and an underline on hover.

The a{} definition in the example cannot be merged with any of the other hyperlink definitions.

A common mistake is to merge the a{} definition with the a:link{} definition. However, doing this will cause the font-size adjustment to only work on unvisited links, any visited links will appear in the default font size for the style/page, rather than desired font size for links.


Example 2:
Before After - Correct After - Incorrect
a {
cursor: crosshair;
}
a:hover {
text-decoration: underline;
}
a:hover {
cursor: crosshair;
text-decoration: underline;
}
a {
cursor: crosshair;
text-decoration: underline;
}
The above "Before" definitions will make all links have a crosshair cursor when the mouse is over them and an underline on hover.

The a{} definition can be merged with the a:hover{} definition because it is creating an effect that is only visible upon "hovering" over the link.

You cannot do the reverse and merge the a:hover{} definition into the a{} definition because all links (visited & unvisited) would have an underline whether the mouse is over them or not, and the user only wants an underline when the mouse is over the link.


Example 3:
Before After - Correct After - Incorrect
a {
cursor: crosshair;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:active {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a {
text-decoration: none;
}
a:hover {
cursor: crosshair;
text-decoration: underline;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:active {
text-decoration: none;
}
a:hover {
cursor: crosshair;
text-decoration: underline;
}
The above "Before" definitions will make all links have a crosshair cursor when the mouse is over them, will have no text decoration on unvisited, visited, and active links and will have an underline when the mouse hovers over them.

The a{} definition (the crosshair) can be merged with the a:hover{} definition because it creates an effect that is only visible on hover. The a:link{}, a:visited{} and a:active{} definitions can be moved to the a{} definition since the user wants to have no text decorations on any links unless the mouse is hovering over them.

This is where its important to look at the entire set of hyperlink definitions. It would be easy to merge only part of the override. In this case all three of the sets of definitions given will accomplish what the user wants, the last set is just not fully merged.




Its important to note that in all of the above examples the overrides given for "Before" and "After - Correct" will do what the user wants. Do not pass up an otherwise acceptable answer just because some of the hyperlink definitions aren't merged as fully as they could be. The important thing is that they work and that they are correct (they are correctly written and they do everything the user wants to do without leaving something out).

My intent here was to let everyone know about some common misconceptions I'd been seeing that could lead to a user's overrides being rewritten in such a way that they no longer function the way they wanted, not to say that we should reject answers that aren't merged in the ways described in the above examples. As long as the overrides are well written and function properly that's all we're really after. Full merging is nice, but not something that --by itself-- should cause you to pass over an answer.
  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

  • 7 comments