Who Ordered the Link States?
Thanks 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?
28 Responses»
James Herdman wrote in to say...
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”.
thacker wrote in to say...
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”.
Brian wrote in to say...
How about; Leave Visitor’s Happy Forever Amazed.
Bob Monsour wrote in to say...
Lady Vampires Have Fangs Aplenty
Brian Warren wrote in to say...
The most memorable I’ve ever seen is Lord Vader’s Handle Formerly Anakin.
Seen first years ago on CSS Discuss I think.
Dave S. wrote in to say...
@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
Paul Wilkins wrote in to say...
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
Philippe wrote in to say...
(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.
Received from Bram.us » Link States Mnemonic
[…] “Lord Vader Hates Furry Animals” Spread the word! […]
Adam wrote in to say...
Little Ventriloquist Has Foul Accent
Mat Jakob wrote in to say...
I second Brian’s comment. I first learned about it at Dave Sheas CSS Crib Sheet.
Jonty wrote in to say...
Lord Vader’s Handle Formerly Anakin … so geeky!
Søren Hansen wrote in to say...
Little Vladimir Hunger For Acceptance
LoVe, Happiness Follows After
LoVe, Hate, Fruits Aplenty
Jeff wrote in to say...
Lost Vulcans Have FOund Apathy
Las Vegas Has Fun Aplenty
Laurie Vouchsafed Her Friend Annette
Louis V Had Fun Abroad
Peter wrote in to say...
Louis
Vuitton
Handbags
For
All
or
Little
Vermin
Have
Furry
A*****es
Patrice Levesque wrote in to say...
Link Value Hint For Authors
Lazy Visitors Hate Following Anchors
dw wrote in to say...
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.
Ivan Zhekov wrote in to say...
LoVe?!? Hell, F**k All ;) Of course it would be better to have a non-swear phrase that is easy to remember.
Jonathan Dobres wrote in to say...
Lord Vader Hates Foolish Admirals
He chokes them to death left and right. Furry animals? Come on.
C.C. wrote in to say...
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.
Received from 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 […]
Carl wrote in to say...
I don’t know about you, but I Loved Van Halen’s First Album.
Pritthish Chakraborty wrote in to say...
Lord Voldemort Has Foul Ambitions
lol, nice to see Harry Potter is getting a little more exposure :P
Received from links for 2007-06-14 - Veldig Bra
[…] Eric Meyer: Who Ordered the Link States? Meyer rounds up his thinking on link states. (tags: css) […]
Ersin Sümer wrote in to say...
Who Ordered mnemonics?
Since L and V are commutative V-L-H-F-A is just alphabetical reverse order.
EarlyOut wrote in to say...
Old thread, but….
Las Vegas Has Four Aces
Steven wrote in to say...
Found this link in the Drupal Zen Html Reset CSS. Lol Mnemonics
B1L wrote in to say...
Lord Vader Forgets He’s Anakin.