Who Ordered the Link States?

Published 17 years, 6 months past

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?

Comments (29)

  1. 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”.

  2. 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”.

  3. How about; Leave Visitor’s Happy Forever Amazed.

  4. Lady Vampires Have Fangs Aplenty

  5. The most memorable I’ve ever seen is Lord Vader’s Handle Formerly Anakin.

    Seen first years ago on CSS Discuss I think.

  6. @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

  7. 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

  8. (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.

  9. Pingback ::

    Bram.us » Link States Mnemonic

    […] “Lord Vader Hates Furry Animals” Spread the word! […]

  10. Little Ventriloquist Has Foul Accent

  11. I second Brian’s comment. I first learned about it at Dave Sheas CSS Crib Sheet.

  12. Lord Vader’s Handle Formerly Anakin … so geeky!

  13. Little Vladimir Hunger For Acceptance
    LoVe, Happiness Follows After
    LoVe, Hate, Fruits Aplenty

  14. Lost Vulcans Have FOund Apathy
    Las Vegas Has Fun Aplenty
    Laurie Vouchsafed Her Friend Annette
    Louis V Had Fun Abroad

  15. Louis
    Vuitton
    Handbags
    For
    All
    or

    Little
    Vermin
    Have
    Furry
    A*****es

  16. Link Value Hint For Authors

    Lazy Visitors Hate Following Anchors

  17. 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.

  18. LoVe?!? Hell, F**k All ;) Of course it would be better to have a non-swear phrase that is easy to remember.

  19. Lord Vader Hates Foolish Admirals

    He chokes them to death left and right. Furry animals? Come on.

  20. 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.

  21. 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 […]

  22. I don’t know about you, but I Loved Van Halen’s First Album.

  23. Lord Voldemort Has Foul Ambitions

    lol, nice to see Harry Potter is getting a little more exposure :P

  24. 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) […]

  25. Who Ordered mnemonics?
    Since L and V are commutative V-L-H-F-A is just alphabetical reverse order.

  26. Old thread, but….

    Las Vegas Has Four Aces

  27. Found this link in the Drupal Zen Html Reset CSS. Lol Mnemonics

  28. Lord Vader Forgets He’s Anakin.

  29. 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. […]

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview