Who Ordered the Link States?
Published 17 years, 4 months pastThanks to everyone who shared their thinking on the ordering of link states. It looks like a minority of people were in favor of my preferred ordering, which is: Link-Visited-Hover-Focus-Active.
The reasoning is fairly straightforward, and starts with the assumption that a person who uses solely a keyboard to navigate won’t ever encounter a hover effect. Thus, for such users, the states might as well simply be LVFA. For them, the placement of the hover styles is irrelevant.
On the flip side, a person using a mouse to navigate will have far more links in hover states than focus states. Once a link is selected (clicked) by a mouse-wielder, the link enters the active state until the user lets go of the mouse button. Then it’s both in focus and hovered, at least until the mouse cursor moves away. (It’s also either visited or unvisited, but that’s not relevant to the question at hand.)
So in this situation, I want to provide a visual cue that the link has in fact been clicked, even though the mouse button is no longer down. I want this to happen regardless of the hover states of the link. Therefore, the focus styles need to come after the hover styles. If not, the focus color will only take effect once the mouse moves away from the link, thus exiting the hover state and removing the hover color.
Yes, this will only take hold in browsers that update the focus state while asking for the requested page. While that isn’t all browsers, it’s most of them, from what I can tell. Safari 2.x seems to be the notable exception. (I didn’t test 1.x, and haven’t installed 3.x yet because I don’t want to lose 2.x.)
So what mnemonics can we use to keep this ordering straight? I’ve come up with a few.
- LoVe’s Hurts Fade Away
- Luther Vandross Hits Fabulous Arpeggios
- Lord Vader Hates Furry Animals
- Lusty Vampires Hunger For Absinthe
- Lord Voldemort Has Foul Ambitions
What do you have?
Comments (29)
I had actually forgotten about the :focus pseudoclass until recently. So prior to that point I remembered it as LoVe HAndles. I’m kind of at a loss with how to handle the “f”.
Meyer–
Thanks for sharing your reasoning and arguments. It is appreciated.
Am hoping that down the road, you will revisit your Reset style sheet and conclude any thoughts regarding the reset of “background-color”.
How about; Leave Visitor’s Happy Forever Amazed.
Lady Vampires Have Fangs Aplenty
The most memorable I’ve ever seen is Lord Vader’s Handle Formerly Anakin.
Seen first years ago on CSS Discuss I think.
@Brian Warren – that would be the work of Matt Haughey actually, as seen here in 2003:
http://www.mezzoblue.com/archives/2003/11/25/css_crib_she/#c018081
LoVe Hate ForevA
LoVe Her For Always
LoVe Hurts, Find Antidote
Link (from Zelda) Visited and gave his Hoverboard to us to Focus our Active imaginations
(slightly OT) You can run the WebKit nightly builds, should be the same as Safari 3.0 beta. Those can co-exist nicely with Safari 2.0.
Pingback ::
Bram.us » Link States Mnemonic
[…] “Lord Vader Hates Furry Animals” Spread the word! […]
Little Ventriloquist Has Foul Accent
I second Brian’s comment. I first learned about it at Dave Sheas CSS Crib Sheet.
Lord Vader’s Handle Formerly Anakin … so geeky!
Little Vladimir Hunger For Acceptance
LoVe, Happiness Follows After
LoVe, Hate, Fruits Aplenty
Lost Vulcans Have FOund Apathy
Las Vegas Has Fun Aplenty
Laurie Vouchsafed Her Friend Annette
Louis V Had Fun Abroad
Louis
Vuitton
Handbags
For
All
or
Little
Vermin
Have
Furry
A*****es
Link Value Hint For Authors
Lazy Visitors Hate Following Anchors
Somewhere along the line I learned it as Love Vegetables, Hate Asparagus.
So, just add a little coarse language and it becomes Love Vegetables, (Hate) F**king Asparagus.
LoVe?!? Hell, F**k All ;) Of course it would be better to have a non-swear phrase that is easy to remember.
Lord Vader Hates Foolish Admirals
He chokes them to death left and right. Furry animals? Come on.
Back in the day (late ’90s-2000), when I was just starting out with CSS and only used LVHA, I trained a co-worker named Larry who himself came up with “Larry’s Very Hairy, Actually”. It’s worked for me ever since.
Pingback ::
webtouch.dk » Linkfarver der skifter efter klik
[…] gode måder at bruge a:visited på, uden at det behøver ødelægge designet (husk i øvrigt altid LoVeHAte reglen, og spar dig selv for mange timers […]
I don’t know about you, but I Loved Van Halen’s First Album.
Lord Voldemort Has Foul Ambitions
lol, nice to see Harry Potter is getting a little more exposure :P
Pingback ::
links for 2007-06-14 - Veldig Bra
[…] Eric Meyer: Who Ordered the Link States? Meyer rounds up his thinking on link states. (tags: css) […]
Who Ordered mnemonics?
Since L and V are commutative V-L-H-F-A is just alphabetical reverse order.
Old thread, but….
Las Vegas Has Four Aces
Found this link in the Drupal Zen Html Reset CSS. Lol Mnemonics
Lord Vader Forgets He’s Anakin.
Pingback ::
Lord Vader Hates Furry Animals › der tag und ich
[…] Und eigentlich hätte ich da schon deutlich früher mal stolpern können, denn Eric Meyer (der mit dem Reset!) schrieb schon 2007 darüber. […]