meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

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»

    • #1
    • Comment
    • Mon 11 Jun 2007
    • 2218
    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”.

    • #2
    • Comment
    • Mon 11 Jun 2007
    • 2248
    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”.

    • #3
    • Comment
    • Mon 11 Jun 2007
    • 2252
    Brian wrote in to say...

    How about; Leave Visitor’s Happy Forever Amazed.

    • #4
    • Comment
    • Tue 12 Jun 2007
    • 0005
    Bob Monsour wrote in to say...

    Lady Vampires Have Fangs Aplenty

    • #5
    • Comment
    • Tue 12 Jun 2007
    • 0031
    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.

    • #6
    • Comment
    • Tue 12 Jun 2007
    • 0032
    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

    • #7
    • Comment
    • Tue 12 Jun 2007
    • 0034
    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

    • #8
    • Comment
    • Tue 12 Jun 2007
    • 0136
    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.

    • #9
    • Pingback
    • Tue 12 Jun 2007
    • 0530
    Received from Bram.us » Link States Mnemonic

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

    • #10
    • Comment
    • Tue 12 Jun 2007
    • 0640
    Adam wrote in to say...

    Little Ventriloquist Has Foul Accent

    • #11
    • Comment
    • Tue 12 Jun 2007
    • 0657
    Mat Jakob wrote in to say...

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

    • #12
    • Comment
    • Tue 12 Jun 2007
    • 0807
    Jonty wrote in to say...

    Lord Vader’s Handle Formerly Anakin … so geeky!

    • #13
    • Comment
    • Tue 12 Jun 2007
    • 0844
    Søren Hansen wrote in to say...

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

    • #14
    • Comment
    • Tue 12 Jun 2007
    • 0923
    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

    • #15
    • Comment
    • Tue 12 Jun 2007
    • 1121
    Peter wrote in to say...

    Louis
    Vuitton
    Handbags
    For
    All
    or

    Little
    Vermin
    Have
    Furry
    A*****es

    • #16
    • Comment
    • Tue 12 Jun 2007
    • 1431
    Patrice Levesque wrote in to say...

    Link Value Hint For Authors

    Lazy Visitors Hate Following Anchors

    • #17
    • Comment
    • Tue 12 Jun 2007
    • 2227
    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.

    • #18
    • Comment
    • Wed 13 Jun 2007
    • 0718
    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.

    • #19
    • Comment
    • Sat 16 Jun 2007
    • 1242
    Jonathan Dobres wrote in to say...

    Lord Vader Hates Foolish Admirals

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

    • #20
    • Comment
    • Mon 25 Jun 2007
    • 0839
    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.

    • #21
    • Pingback
    • Tue 24 Jul 2007
    • 2039
    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 [...]

    • #22
    • Comment
    • Fri 7 Dec 2007
    • 1301
    Carl wrote in to say...

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

    • #23
    • Comment
    • Wed 9 Jan 2008
    • 1742
    Pritthish Chakraborty wrote in to say...

    Lord Voldemort Has Foul Ambitions

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

    • #24
    • Pingback
    • Sun 20 Jan 2008
    • 1858
    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) [...]

    • #25
    • Comment
    • Wed 27 Feb 2008
    • 0547
    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.

    • #26
    • Comment
    • Fri 23 Mar 2012
    • 0846
    EarlyOut wrote in to say...

    Old thread, but….

    Las Vegas Has Four Aces

    • #27
    • Comment
    • Wed 18 Apr 2012
    • 1001
    Steven wrote in to say...

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

    • #28
    • Comment
    • Tue 21 Jan 2014
    • 0230
    B1L wrote in to say...

    Lord Vader Forgets He’s Anakin.

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


June 2007
SMTWTFS
May July
 12
3456789
10111213141516
17181920212223
24252627282930

Sidestep

Feeds

Extras