SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)

    Fancy focus styles causing a problem in some browsers

    Hallo all,

    I thought I would be totally awesome, but it's backfiring (doesn't it usually?).

    Currently, in browsers, a user only has access to title attributes when they mouse over something. Keyboarders get nix.

    I found this neat bit of CSS that seemed to do what I wanted without JS:

    Code:
    a[title]:focus:after {
      content: " "attr(title);
    }
    working, for instance, with
    <a href="foo" title="FOO"><img src="foo.jpg" alt="foo"></a>

    where, upon focussing on an anchor who has a title attribute, the keyboarder gets to see the text in the title attribute. I was stoked to find a non-JS solution.

    This was great, because the guy I'm working for love icons, which are terrible for usability. The languages are represented by flags, which are ridiculous for a number of reasons (Belgians will of course have to choose either a Dutch flag or a French flag depending on which language they speak), so I was very careful with alt text etc. Still, when there are images, if you're keyboarding, some title text would really, really help.

    The problem? Certain browsers (namely Gecko but Opera will do it too) put focus on things which are clicked. The result seems to be that one must click on the flags twice to get them to do anything. Chrome and Safari, who don't do this (why Stu Nichols' click-dropdowns don't work in those browsers), are fine.

    I ran into something similar when dealing with onclick and onfocus events in Javascript recently. The solution I got from Raffles, to set a delay on focus events, isn't really an option here. This needs to work for non-JS as well (I'm open to an elegant JS solution for showing titles onfocus on anchors though... I didn't know if I really wanted to do the whole rich tooltips thing though).

    So I'm here to ask, must I abandon this CSS code, or is there some way I don't know about to get around this issue?

    If there isn't a practical and accessible way around this, I'll have to remove it.

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Duh, I stupid. Why didn't I just use the same solution as I used for Blake Haswell's Javascript, where focus and hover also conflicted??

    a[title]:focus:after {
    content: " " attr(title);
    }

    a[title]:focus:hover:after {
    content: "";
    }


    Duh. : )

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Not stupid, just tangled in code. Now that you've posted the solution, I don't have to go hunting for it later when I have the same problem.

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You'll see it if you use Blake's Suckerfish Part deux. Try clicking on any of the dropdown links in Firefox or IE6. While Opera also acts weird with focus, I think it was ok. Gecko was the main problem. I originally tried the element:focus:hover thing with his menu and was happy that it worked. I dunno why I didn't think of it then with this. I just used it for Teh Evil Popup I was forced to create... focusing on the popup (or its close button) now can also give title text. Yay.


Tags for this Thread

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
  •