SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Link Attribute order question

    Hi,

    a {}
    a:link {}
    a:hover {}
    a:active {}
    a:visted {}

    It seems that some browsers require these to be declared in a specific order - can anyone tell me what order is correct?
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    link, visited, hover, active I believe.

    LoVe/HAte is an easy way to remember it

  3. #3
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - these little things help a lot
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't forget about :focus! It should go along with :hover.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In which case it's LoVe & F'n HAte.

  6. #6
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK focus - so what is this state exactly ? Surely the same as hover?
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

  7. #7
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lord
    Vader
    Former
    Handle
    Annakin

    (is that really really sad?)

    Focus is like hover but for keyboard users rather than just mouse-related. I usually just give it the same rules as hover.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Beeper
    OK focus - so what is this state exactly ? Surely the same as hover?
    Not the same, but equivalent.

    The :hover pseudo-class represents a state where the mouse cursor hovers over an element.

    The :focus pseudo-class represents a state where an element has keyboard focus.

    It's often overlooked, even by people who are otherwise well versed in web accessibility and usability. For someone who navigates by keyboard (out of preference or necessity) it can do all the difference if you get good visual feedback of which link/button has focus.

    You can style :focus similar to :hover, but I often find that I like a more subtle change for :hover and a much more drastic feedback for :focus.

    My reasoning behind that is that if you move the mouse cursor over something, you're already looking at it and all you need is some feedback that the element is 'active' (i.e., will respond to a click).

    When you're navigating by keyboard, the focus can move to the other end of the monitor screen when you tab from one element to the next. It can increase usability dramatically if the change is sufficiently noticeable, so that the eye is drawn to it. For links, you can achieve that by changing the background colour, for instance. By setting it to a saturated, brilliant colour – preferably one that doesn't exist elsewhere in the design – it will be more eye-catching.
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •