dive into mark

You are here: dive into markArchivesApril 2006New focus indicator for Firefox

Tuesday, April 25, 2006

New focus indicator for Firefox

We’re considering — considering — changing the look of the focus indicator in Firefox. I’ve whipped up a Greasemonkey script (Bright Focus) to demonstrate the proposal.

Screenshot of a link:

[focus indicator around a link]

A text box:

[focus indicator around a text box]

And a button:

[focus indicator around a button]

Love it? Hate it? Leave comments here or in bug 251198.

Filed under , , ,

89 comments

  1. Would this be overideable on a per-site basis using CSS? It seems a little heavy and obtrusive to me, and as a web designer I would want to be able to change the color, width, etc. depending on the site I was developing.

    Comment by Dan Wilkinson — Tuesday, April 25, 2006 @ 4:38 pm

  2. I would immediately change this in userChrome.css. Frankly, my first thought was “Ew.”

    Comment by Jason Rhyley — Tuesday, April 25, 2006 @ 4:45 pm

  3. Actually, I quite like it. It’s suddenly so much easier to see what you’re supposed to be looking at.

    Comment by Phil Wilson — Tuesday, April 25, 2006 @ 5:19 pm

  4. Yes, you would still be able to override the appearance as a web author with !important CSS rules, just like you can now. And you wouldu still be able to override it on the client with userContent.css or an extension or Greasemonkey script, just like you can now.

    Comment by Mark — Tuesday, April 25, 2006 @ 5:30 pm

  5. I like it! Vote for ‘yes’.

    Comment by Aaron Suggs — Tuesday, April 25, 2006 @ 5:58 pm

  6. It puts the ‘b’ back in subtle. I’m gonna have to vote no. However, it’s not far from Safari’s focus indicator. Maybe if you soften the blue, blur the edges, and round the corners.

    Pete

    Comment by Pete Lacey — Tuesday, April 25, 2006 @ 6:24 pm

  7. I don’t know if I like it or not. Not a huge fan of that particular shade, but I like the idea in general. It would sure be nice to have just a little more of a hint where you are.

    Comment by Elaine Nelson — Tuesday, April 25, 2006 @ 6:46 pm

  8. What happened to the rounded corners for text fields and buttons?

    Comment by Aaron Leventhal — Tuesday, April 25, 2006 @ 8:46 pm

  9. I usually don’t bother with a mouse, so anything that helps me spot focus is a good thing. Focus indicators in Windows tend to be subtle, inconspicuous or invisible. These new focus rings make a big difference to my ability to drive a web-browser sans mouse.

    Over the years I have observed many (perhaps most?) users click on a web page link or control without giving focus to the clicked object. This seems to happen at least occasionally to most people. These brighter focus indicators give feedback that SOMETHING has happened to the clicked object. This visual feedback is a very nice side effect.

    If a brighter focus indicator of some kind were to become the default in a future Firefox release, I bet that most users would acclimatize to it faster than they habituated to invisible focus indicators!

    Comment by Alan Cantor — Tuesday, April 25, 2006 @ 9:41 pm

  10. I’d rather that be something I could turn on rather than something I’d have to turn off.

    Comment by Jim Biancolo — Tuesday, April 25, 2006 @ 10:10 pm

  11. If it was styleable (and it was suggested it would be in an earlier comment) then a definite yes - although the default style should possibly be a little different.

    Comment by Ross — Wednesday, April 26, 2006 @ 3:29 am

  12. I like the idea, but I would suggest a color somewhere in between your proposed color and the current, practically invisible, border. I imagine many of the more design sensitive site owners would become a bit annoyed when a bright blue box suddenly appeared when links were selected.

    Comment by Joshua Kaufman — Wednesday, April 26, 2006 @ 5:30 am

  13. It’s a minor point in the big scheme of things, but there’s an ugly moire effect caused by the square highlight around the cicular radio buttons.

    Comment by Dave S — Wednesday, April 26, 2006 @ 6:29 am

  14. Idea is great, the styling is not. Shamelessly ripping Apple’s UI off is the way to go here.

    Comment by Bob Aman — Wednesday, April 26, 2006 @ 7:26 am

  15. Tastes vary, so let users select colour, size, shape, etc. of alternative focus indicators. Make them easy to customize. Don’t force users to to mess with CSS if that’s not their thing.

    Perhaps offer two or three built-in choices, plus customize, e.g.,

    Tools –> Options –> Advanced –> Accessibility

    Use enhanced focus indicators…

    ( ) Blue
    ( ) Red
    ( ) Black
    Customize…
    Colour…
    Thickness…
    etc.

    Comment by Alan Cantor — Wednesday, April 26, 2006 @ 8:21 am

  16. It looks good on inputs, but only on those. Isn’t there a possibility to give buttons a native focus look? That would be good.
    The link focus however looks terrible.

    Comment by Arpad Borsos — Wednesday, April 26, 2006 @ 11:12 am

  17. don’t like it at all. should not be activated by default

    Comment by Jeffrey — Wednesday, April 26, 2006 @ 11:15 am

  18. its really just too… out there, you know what i mean? its too bright, and not subtle enough… try making it not as bright…, mayb semi-tranparent

    Comment by razishaban — Wednesday, April 26, 2006 @ 11:15 am

  19. I love it on links, and it’d probably be good for frame borders, though I fear doing it by default would just cause more authors to force them off at the expense of the user.
    On form controls, on the other hand, I’m not sure. They certainly don’t fit with my theme, but it might be a good thing to break nativeness considering the benefits.

    Comment by Robert Marshall — Wednesday, April 26, 2006 @ 11:27 am

  20. It’s the proposal for default view? Awful. It will destroy more designs than any other idea I’ve ever seen.

    Please, leave it off by default - it’s probably good thing for accessibility, but not for general audience.

    Comment by gandalf — Wednesday, April 26, 2006 @ 11:54 am

  21. Voting for something between this and the old one.

    Comment by tr — Wednesday, April 26, 2006 @ 11:56 am

  22. Interesting to see how would it be rendered upo different background colors and patterns…

    Comment by Veeven — Wednesday, April 26, 2006 @ 11:58 am

  23. I like the text box focus, and the button focus would look good with some curves and fade. I don’t really like the link focus. It would look particularly obnoxious on link text that spans multiple lines.

    Comment by David Sickmiller — Wednesday, April 26, 2006 @ 12:12 pm

  24. > What happened to the rounded corners for text fields and buttons?

    Fixed. I had to change the “outline-*” properties to “-moz-outline-*”. Apparently some of them are Mozilla-internal-only (not part of any version of CSS). I’ll try to update the screenshots to match sometime tonight.

    Note to people complaining about the color: I split out the FOCUS_COLOR at the top of the script! If you don’t like it, find the “right” color and post it!

    Comment by Mark — Wednesday, April 26, 2006 @ 12:16 pm

  25. Pingback by » Mark Pilgrim: New focus indicator for Firefox - Mozilla News
  26. imho turning browser.display.use_focus_colors on by default would be better.
    At least as long as borders (or outlines) with alpha-transparency are impossible.

    Comment by malte — Wednesday, April 26, 2006 @ 12:28 pm

  27. I like idea, but don’t like how it look. May be ugly color…
    I like only one view - indicator on input form.

    Comment by Didaio — Wednesday, April 26, 2006 @ 12:33 pm

  28. Mark, if you use any hardcoded color the result will be invisible on some sites. That’s why the current focus outline uses “invert”…

    Comment by Boris — Wednesday, April 26, 2006 @ 12:41 pm

  29. The change does look nice. Two suggestions on making the appearance a bit nicer:

    1. Let the site designer decide the color of the outline.
    2. Make the color of the outline the same as the color of the text.

    Either way, it should make it look nice with the existing color scheme. I’m leaning towards number 2 because it will be easier and it keeps people from dealing with a non-standard style element.

    Comment by Casey — Wednesday, April 26, 2006 @ 12:51 pm

  30. I think it’s too much. The existing seems fine unless you’re getting feedback that it’s not from the general public. What you’re proposing seems like it would be a good pref?

    Comment by Rafael — Wednesday, April 26, 2006 @ 12:54 pm

  31. That would really be a reason to switch back to Internet Explorer.

    Comment by Tom — Wednesday, April 26, 2006 @ 1:19 pm

  32. !important should not be needed to override any default style. In fact, it’s not needed today. E.g. a:focus { outline: none } works, but it probably won’t with brightfocus.user.js.

    Comment by Dao — Wednesday, April 26, 2006 @ 1:25 pm

  33. By the way … #fc6 looks nice, too. :)

    Comment by Dao — Wednesday, April 26, 2006 @ 1:46 pm

  34. This seems like quite a usability improvement, although it has to be made sure that the line/color is both unobtrusive and fitting in the design (i.e. background color) of websites as well. Perhaps finetune it a bit, but it would certainly be lovely to include this in coming releases.

    Comment by bram — Wednesday, April 26, 2006 @ 2:06 pm

  35. Wholeheartedly hate it. Congrats :-)

    Maybe uglier than IE. Would deserve an award then (couldn’t coerce myself into digging IE to check).

    Ripping off Apple’s design as others suggested would of course help immensely, as usual.

    But there’s room for improvement even there: Safari’s implementation is plenty nice, but it is always blue, disregarding the system-wide user-selected highlight tint (used to show selection and focus), which exists precisely to address the otherwise inevitable “hate that color” phenomenon (and half of previous comments).

    So?

    So match Safari’s subtle rendering if you can, but first of all use the tint that you know THE USER likes enough to choose or keep as default in the system-wide pref that’s already there.

    DON’T listen to requests for app-specific settings on something already handled system-wide.

    Here I’m guessing other platforms have such a thing as a user-selectable highlight color, never really checked, if not just use the highlight color that is “normal” on those platforms (which may not be user-selectable but still variable as part of a theme or something).

    But most importantly DO NOT, repeat DO NOT, suppose that the default will do on platforms which allow it changed, that’s MS-level stupidity. Precisely what IE mac extended to its whole interface, re-implementing somewhat “normal” widgets for no reason instead of just using what’s there, then letting the user discover that eeew, it wasn’t the normal interface at all, once anything changes system-wide (any Kaleidoscope user still out there?)

    Comment by VRic — Wednesday, April 26, 2006 @ 2:56 pm

  36. In my userContent.css, I have

    *.focus {
    outline: 1px red dotted;
    }

    Accomplishes the same thing (unless I’m missing something), and is completely customizable. Once you get used to it, you won’t want to browse without it.

    Comment by Jay K — Wednesday, April 26, 2006 @ 3:17 pm

  37. Too blatant as is, the bright blue distracts too much from what it’s indicating. The idea is good though - having a clearer indication of focused objects would be handy.

    Comment by Simon — Wednesday, April 26, 2006 @ 4:07 pm

  38. I think the idea to make it stand out better is a good one, but the color is a bit garish. I think sticking to the current border style and considering a translucent png for the background would be worth considering. I’d try a light green or yellow 66% opacity PNG.

    $0.02

    Comment by Josh Peters — Wednesday, April 26, 2006 @ 4:56 pm

  39. I’m slightly confused, how is this better than what is already functioning fine? I do think the example is too over the top and would actually prefer, almost like a tooltip, a big red arrow with a balloon that says ‘You Are Here’ than the example.

    Comment by gary — Wednesday, April 26, 2006 @ 6:40 pm

  40. If you’re using a trunk build, try these: 0 1 2 3 4. And try out your prefered color: http://design-noir.de/bugzilla/focus-indication?c=CSS_COLOR_CODE

    Comment by Dao — Wednesday, April 26, 2006 @ 7:39 pm

  41. Yes I wanted something like this since trying themes like brushed and charamel which had the indicator for location and search bar.

    Comment by tropic — Wednesday, April 26, 2006 @ 11:39 pm

  42. +1 for the hack.
    Very good Mark!

    Comment by Rocco Pellegrini — Thursday, April 27, 2006 @ 5:57 am

  43. I like the concept of making the focus more apparent, but I admit I don’t like the look of this green highlighting. If there is a native color that can be borrowed to make it fit in a platform better, that should be considered.

    Whatever the case this should be seriously tested on users before being dropped into an official release because this is a very noticeable change in the UI that could be a love it or hate it thing. And if too many people hate it, well, that’s not good.

    Comment by Mark — Thursday, April 27, 2006 @ 1:47 pm

  44. Mark, since you asked for scripts, here’s mine: http://software.josh-peters.name/JP_Bright_Focus.user.js

    My changes are the border color and the inclusion of a translucent png background (which is available through FF’s support of data: urls)

    Enjoy.

    Comment by Josh Peters — Thursday, April 27, 2006 @ 3:03 pm

  45. Drawing more attention to the focus indicator would be useful for even the most novice users because they have to click on a text area to fill out a form, something my highly intelligent 70+ year old parents have taken years to learn how to do.

    BUT, aesthetically, even the current focus indicator (the skinny dotted line) which is almost invisible is unattractive because, even to the novice, it looks like a rendering engine mistake (unless the outline were color-co-ordinated with the color scheme of the page).

    I would applaud the ability to turn the focus indicator off, actually, despite the street cred I lose in the wise eyes of the keyboard junkies (who ARE right, but who don’t dress well).

    As long as you have a focus indicator OFF/DIM/BRIGHT/CUSTOMIZED option at the top of the Advanced tab, I would actually consider it a step forward despite my fear of yet another visual distraction on my screen. I would keep it on OFF or DIM unless I was filling out a long form. And it might teach me to use the keyboard more, I concede.

    But how could anyone actually customize it to match every color scheme on the planet? There’s no way.

    What the Norton Password Manager does is WAY SMART: they highlight the text field itself in a very attractive bright green background with black text. I’m sure you’ve already considered and rejected that option for some reason, but that’s what works for me aesthetically. Am I wrong? Whole pages could revert to what you have, just an outline, but green instead of turquoise.

    Green is calmer than turquoise, and warmer, I think.

    But what do *I* know?

    Comment by Cassady — Thursday, April 27, 2006 @ 3:43 pm

  46. The default setting could be BRIGHT, i.e. what you show above, for the sake of novice users, who would benefit greatly from understanding the focus concept.

    Comment by Cassady — Thursday, April 27, 2006 @ 3:48 pm

  47. (Followup to my comment 19)
    Okay, I’ve used it for a bit longer and I’m now totally sold on the textbox outlines, as long as they’re not rounded. The rounded outlines on radio buttons are still ugly sans-Cairo, but are not as bad as square ones.
    If this is made a pref that the user has to explicitly enable, I think it should be hard for pages to disable it.

    Comment by Robert Marshall — Thursday, April 27, 2006 @ 6:50 pm

  48. Robert: Because of anti-aliasing and translucent borders, this most likely won’t make it into a non-cairo release.
    And it shouldn’t be a pref that the user would have to explicitly enable. But that’s just my opinion.

    Comment by Dao — Friday, April 28, 2006 @ 2:59 am

  49. I think the box around the active link is a turnoff. The others are ok.

    Comment by Seth — Friday, April 28, 2006 @ 3:41 am

  50. Could it not start off dim/dotted and get brighter over time, being reset to dim on each change of focus.
    I’m assuming its use is for when your attention has been called away from the screen. Your gaze returns to the screen, but you’ve lost the cursor/focus. As you are filling in a form, you can predict where the cursor/focus will go after a press of tab, so little highlight is needed (unless the tab order is bananas). When you are called away from the form for a few seconds, a bright indication of where you are would be useful.

    Comment by Bobby — Friday, April 28, 2006 @ 5:49 am

  51. Put me down for a no vote. Ew!

    Comment by scott — Friday, April 28, 2006 @ 1:49 pm

  52. WHY???

    Seriously, what are the benefits of deviating from the system default rendering (at least on Windows)? And why shouldn’t this be an extension?

    ~Grauw

    Comment by Laurens Holst — Saturday, April 29, 2006 @ 6:50 am

  53. When activating type ahead link find feature, the link is not properly highlighted. After the find box goes away and the green highlight disappears, the blue highlighting works, then using find next will have the highlighting.

    Comment by Greg — Sunday, April 30, 2006 @ 12:53 pm

  54. Lovely. Don’t know how I lived without it.

    Comment by Andrew Sidwell — Sunday, April 30, 2006 @ 4:34 pm

  55. You know, at first I had a reaction similar to “oh. my. wha.” But after looing at it a few times and thinking about it, it probably does more good than harm, and over time will seem like a normal browser feature. That being said, I definitely see having many options with it, such as color and on/off setting. OR, might even be nice to have a hotkey that invokes it. Like a “where was I?” type of thing. $.02

    Comment by Ryan — Monday, May 1, 2006 @ 10:06 pm

  56. I hate it! IE5 on the Mac used to have this type of highlighting by default. Ugh. Please, no, don’t do it!!

    Comment by Dogsthatchasecars — Tuesday, May 2, 2006 @ 6:20 am

  57. No No No!

    Comment by Jon — Tuesday, May 2, 2006 @ 12:29 pm

  58. My computer use is split pretty evenly between PC and Mac and I definitely appreciate the field highlighting on the Mac, especially over the existing dotted style indicators on Windows.

    I’ve had your Greasemonkey script installed all evening and honestly I’ve noticed plenty of benefit: For example, when tracking back and forth between photographs on Flickr, the previous thumbnail is highlighted really nicely.

    I can completely see where the opposition comes from, in so far as in the current presentation the outlines are not very pretty. I can quite understand some upset if they were shipped as a new feature as-is. However, on a Cario build with anti-aliasing, and perhaps reducing the intensity by lowering the alpha value for the border colour itself I think there’d be less resistance. Furthermore, you could perhaps achieve a smoother effect by using something like CSS3’s ‘box-shadow’ property. I don’t know where Gecko 1.9 (2.0?) stands on implementing that, but again it could be aesthetically preferable and worth holding out for.

    As for platform integration: On the Mac I think it needs to be exactly the same as in Safari and every other application. System-wide blue with a glow.

    On Windows it’s a harder call. Obviously it’s non-standard UI but I think it’s enough of a benefit to include. If someone got accustomed to this and moved to a different browser, I suspect they’d miss it even if they were sceptical now. I would favour using the same colour as for text selection (except where that colour is white, of course).

    As a related aside: I was recently in a discussion about the focus indicator in Firefox, since awareness of the CSS outline property is increasing and many are going to make a design-over-usability decision and take opportunity to switch the ‘ugly’ dots off - especially when they’ve used a negative text-indent image replacement technique (which causes the outline to extend off the edge of the page). When implemented, I think it would be wise to have this effect somehow protected from being disabled in the same way.

    I also don’t think this should be a visible preference, either.

    Comment by Ben Ward — Tuesday, May 2, 2006 @ 1:29 pm

  59. why not make the same color has the Flash tabulation (yellow border)

    Comment by goetsu — Tuesday, May 2, 2006 @ 4:29 pm

  60. It’s okay as long as I can customize that focus with CSS.

    Comment by Cliftonite — Tuesday, May 2, 2006 @ 5:09 pm

  61. This is a great idea! Too often, I can’t see which item has the focus. I like this immensely. And, NO, do not make this something a site can override. I absolutely hate it when a site tries to change my settings.

    Comment by W^L+ — Wednesday, May 3, 2006 @ 1:22 am

  62. I like it.

    Comment by Tim — Wednesday, May 3, 2006 @ 2:35 am

  63. Yikes. Please, no. No, no, no. That would be moving backwards to the IE5/Mac look — not something to aspire to.

    Comment by David — Wednesday, May 3, 2006 @ 9:25 am

  64. There has to be a better way. Once a browser starts infringing on a designers style, then you instantly start making the crowd that you are working with, angry. If you have to implement it,… you could at least make the option off by default, AND give the designer and the user the option to turn it on for a specific site.

    Comment by Jeremy — Wednesday, May 3, 2006 @ 10:52 am

  65. no deal!

    Comment by clint — Wednesday, May 3, 2006 @ 1:45 pm

  66. No, please no. It breaks my eyes.

    Comment by Rob — Wednesday, May 3, 2006 @ 3:12 pm

  67. I like it, but why not just leave it as a Greasemonkey script and promote it as such? Or better yet, why not make Greasemonkey part of the software?

    Comment by Kylir — Wednesday, May 3, 2006 @ 6:09 pm

  68. I’m not particularly fond of this proposed change, but if you put it into place it should utilize the CSS border property, but be easily overridden, much the way links are. Do not force the use of !important, implement it exactly as you do link colors and text-decoration. Do not force a design or style upon designers, developers or users. That said, you should provide the user an easy method to set custom or override styles, just as they can now.

    Ultimately, the better way to handle this is to encourage and educate developers in the use of :focus. Many of us have begun using it, but prefer to choose when and where it should be used (form fields vs. links, or in-line links vs. nav links).

    Comment by Alex — Wednesday, May 3, 2006 @ 10:25 pm

  69. no, no, no - why dont you leave the styling to the site designers?

    Comment by Damien — Thursday, May 4, 2006 @ 7:31 pm

  70. NO! Adding colors to sites is a bad idea, you will never be able to find a color that works with every site so it’s not worth it. Dotted and black/gray like it is now works everywhere, ugly blueish don’t.

    Comment by Emil Stenström — Sunday, May 7, 2006 @ 8:02 am

  71. Hate it. Form elements on websites must default to the native OS look. Users are used to seeing the native focus indicators of the OS, everything else might confuse them. The fact that (only) textfields on Windows have no focus indicator apart from the blinking cursor is Windows’ problem, not Firefox’s.

    Comment by Markus — Sunday, May 7, 2006 @ 8:38 am

  72. its cool but make it thinner - like 1px or aliased 1,5px…

    Comment by tmk — Sunday, May 7, 2006 @ 9:09 am

  73. I think it’s generally an excellent idea. I appreciate it when someone has set the background of focussed form elements to light up, or to change the colour of the border.

    However, I don’t like the way it’s currently been implemented. I think it’s too bold and stark — it increases the visibility too much, I feel. A more subtle approach would be better, since then it’s almost subconscious. Or you might have it flash momentarily and then disappear?

    Also I don’t like the way links and buttons are outlined. I find I don’t need to know which link/button I’ve just clicked on ;) I would stick to just highlighting form elements, or include it but switch it off by default.

    It’s an excellent accessibility feature though. I would welcome this in a future version of Firefox, with a greater ability to customise it — i.e. change the colour, change what method of highlighting (border colour, background colour, even an arrow icon).

    Comment by Mark Kenny — Sunday, May 7, 2006 @ 12:51 pm

  74. I installed the new focus indicators for a client last week. She has painful mouse-induced repetitive strain injuries. The only way she prevents flair-ups is to avoid using a mouse as much as possible. So I am teaching her ways to drive Windows by keyboard.

    Within 30 minutes after I made the change, she was navigating web pages with a new found ease. She is elated!

    Comment by Alan Cantor — Sunday, May 7, 2006 @ 6:47 pm

  75. I’ve always found the focus indicator in Konqueror and Safari very helpful, and often find myself including some sublte CSS:hover changes to highlight forms fields when designing pages. So here’s the thing: the indicators need to not be gaudy, plus they also can’t interfere with CSS:hover effects.

    Comment by James — Monday, May 8, 2006 @ 1:18 am

  76. Implementing this *feature* will be one sure way to anger the legions of web developers out there. DON’t DO IT!

    Some people might like it. Personally, I like sites that make your current selection clear. This should be done as part of the style of the site, not the browser. It is the site’s designer’s responsibility to make their site useable, not the browser’s.

    There are products like Grease-Monkey that allow people to override a specific site’s design, if they deem it necessary. A browser-wide change like this would kill Firefox as a web development bechmark / reference browser.

    Most people do not use the keyboard for browsing - only for filling in web forms with many fields.

    Comment by Stephen Martindale — Monday, May 8, 2006 @ 8:16 am

  77. That is UGLY!!!!

    Comment by Coviti — Monday, May 8, 2006 @ 10:41 am

  78. no sir, don’t like it.

    Comment by amber — Monday, May 8, 2006 @ 3:46 pm

  79. Don’t worry, somebody will write an extension solving the “ugly focus inicator” problem soon! At least I hope so…

    Comment by Doctor — Tuesday, May 9, 2006 @ 4:38 am

  80. That’s just plain ugly!

    Comment by Tinus — Tuesday, May 9, 2006 @ 10:33 am

  81. I don’t like it. The styling wouldn’t work well unless the site had a similar color scheme. I like the idea of having it as a option that’s default is off.

    Comment by kramer — Friday, May 12, 2006 @ 7:04 am

  82. It’s a good idea but not very sexy, ideally we could have a -moz option to overule it.

    Comment by Tom — Friday, May 12, 2006 @ 1:28 pm

  83. Eewch!

    Comment by Lord Palmerston — Friday, May 12, 2006 @ 5:18 pm

  84. Do it.

    Sure, there will be people who complain.

    I like the idea, because frankly, the default indicator on Windows is near-invisible. If I knew something like this could have been done long ago, I’d have been using it then.
    This was like scratching an itch I didn’t know I even had - really good.

    Of course, if you threw in an easy way for novices to go in and change things, such as adding in a couple of png images, or making the highlights appear only at the corners, like a holder effect of some sort… ;)

    Comment by Xial — Sunday, May 14, 2006 @ 12:00 pm

  85. Pingback by Eau Salée Lunaire » UserStyles.org - Bend the will of the web around your browser’s finger.
  86. Addition to #61
    Sure, the color demonstrated here is not attactive, and does not fit with all sites. However, there is a definite usability increase from making it clear that a particular element is selected. There are potentially other ways to achieve this goal, so hopefully those who hate it will come up with other viable suggestions. Still, there are already too many sites that put design in front of usability(1), so whatever we end up with should not be site controllable.

    (1) One internal site where I work is designed so that users MUST be using IE at 768×1024 resolution and default text size. Changing any of those factors makes it unusable, which is NOT friendly for our older employees. That’s an example of why these things should not be accessible to site designers.

    Comment by W^L+ — Thursday, May 18, 2006 @ 5:11 am

  87. I honestly don’t see the point of your script. Is it just a demo?

    What you’re describing here can be shown via the usercontent.css file modification listed in comment 36. Modifying that CSS so it uses prettier images/border options might be a better solution in the long run than making a system default change.

    I’d respectfully suggest that you put this CSS trick on the Firefox Tips and Tricks page http://www.mozilla.org/support/firefox/tips or the MozillaZine Knowledge Base.

    Comment by matt — Friday, May 19, 2006 @ 11:54 am

  88. Yes, it’s just a demo. It was a port of a userContent.css snippet posted to that Mozilla bug I referenced in the original post. I made it into a Greasemonkey script because I’m big on Greasemonkey and lots of people who read this site have it installed, and it’s easier than explaining how to edit userContent.css files.

    The same effect is also available as a Stylish script for those of you who have Stylish installed.

    I’m also working on an extension that incorporates this effect as an option.

    Comment by Mark — Friday, May 19, 2006 @ 12:58 pm

  89. Absolutely wonderful idea. Looks great on my ~150 dpi screen on winxp. Doesn’t bother me at all that the curves are not antialiased. Also using highlight focus extension from:

    https://addons.mozilla.org/firefox/1310/

    This one just creates a highlight for text entry boxes, and disappears when you start entering text. Very nice effect. For those who find this hack to be too much check it out. Subtle, yet very useful. I personally love the highlight for all elements, since I rarely use the mouse when browsing and the default dotted highlight is hard to pick out when tabbing/find-as-you-type/hit-a-hinting around a page.

    Comment by Greg — Friday, May 19, 2006 @ 3:57 pm

Respond privately

I am no longer accepting public comments on this post, but you can use this form to contact me privately. (Your message will not be published.)



Recent Stuff For You, Special Price Stay Here
  • Greasemonkey Hacks
Good Stuff Buy The Cow Go Away
Dive Into Python
Powered by Google Drink The Milk Don't Steal

 

posts / comments
© 2001-8 Mark Pilgrim