|
| |
|
|
gorilla
Posts: 2974
From: Denmark
Status: offline
 |
Link order is IMPORTANT - 3/26/2004 2:05:51
For the record and because it comes up so very very often:
- An anchor has five states, not four.
- The order is important if you get it wrong you're likely to come to grief: -
- link
- visited
- hover
- focus
- active
You can very easily specify different styles for each state simply by doing something similar to the very simple example below adding or deleting the various possibilities as pleases you:
a:link {
background: red;
}
a:visited {
background: blue;
}
a:hover {
background: green;
}
a:focus {
background: yellow;
}
a:active {
background: pink;
}
Or whatever ......
Most people forget about or don't know about focus. It is used for by those who navigate using a keyboard or specially adapted devices for handicapped and many many moblile telephones. Googlebot takes notice of it too.
Further notes:
If you go and read the spec. (Yes I know I always say that I always say that because if you don't read the spec, and/or you don't validate how do you think you'll track down problems?)
http://www.w3.org/TR/REC-CSS2/selector.html
You'll see that it says:
quote:
5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus
Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases:
The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device).
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).
These pseudo-classes are not mutually exclusive. An element may match several of them at the same time.
CSS doesn't define which elements may be in the above states, or how the states are entered and left. Scripting may change whether elements react to user events or not, and different devices and UAs may have different ways of pointing to, or activating elements.
User agents are not required to reflow a currently displayed document due to pseudo-class transitions. For instance, a style sheet may specify that the 'font-size' of an :active link should be larger than that of an inactive link, but since this may cause letters to change position when the reader selects the link, a UA may ignore the corresponding style rule.
Clearly therefore the following statements are true:
- The active state is brief.
- The active state is not always obvious.
- Browsers do not have to acknowledge its existence. Although in fact most of them do.
- Anybody who doesn't test their pages in a real live browser or better yet in several real live browsers and relies on "preview mode" is asking for trouble, and to be quite frank IMO deserves it too. Using ALT+TAB and hitting the refresh key isn't exactly difficult.
Most problems arise because people either don't get the order right (see above) or in the case of more technically minded people because they have made unwarranted assumptions.
All five states - link, visited, hover, focus, active, have the same specificity - which for some reason or another (said the Gorilla getting sniffy) isn't how developers seem to think about links.
So lets make it really clear all five states are equally important, UAs therefore apply each rule in turn. Therefore a:link will override a:visited if you get it wrong and it appears later in the style rules.
This makes perfect sense, is good logic and therefore good mathematics too. The alternative would be to let browser manufacturers treat arbitrary selectors as more important than others which would confuse the not only the recommendation, but everyone else as well.
As it appears (said the Gorilla getting even sniffier having spent several hours last night with an unbelievably uncomprehending "practising" professional) that <ahem>some</ahem> browser manufacturers aren't competent enough to keep up as it is, and can't even wrap their heads around the meaning of a simple figure like 100% this would be a recipe for disaster.
Get the order right, read the spec, validate, validate, validate.
< Message edited by gorilla -- 3/26/2004 2:45:07 >
_____________________________
Mháircaish
Signature self-censored to protect the sensibilities of the thin-skinned  .
May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower
|
|
|
|
lilblackgirl
Posts: 288
Joined: 5/16/2002
From:
Status: offline
|
RE: Link order is IMPORTANT - 3/26/2004 11:30:58
thanks buddy.
see, we can learn more here than just coding.
_____________________________
You look like you're about to do something stupid. I'm in.
| |
|
|
|
Peppergal
Posts: 2204
Joined: 9/20/2002
Status: offline
|
RE: Link order is IMPORTANT - 3/26/2004 11:35:32
quote:
The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).
These pseudo-classes are not mutually exclusive. An element may match several of them at the same time.
Does this mean it will allow users to navigate to the next link using the keyboard? Like setting up a tab order on a form?
_____________________________
Northeast PA / Poconos/ Lake Wallenpaupack Real Estate
wallenpaupacklakeproperty.com
Karen's Real Estate Blog
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
