8 ms·

Please don't use a {outline:none;}

98 points by utkarshkukreti 16y ago

wahnfrieden 16y ago
I like this trend of making single-page domain names out of what would just be a blog post advocating something with clear points and logic. They feel like they'll have more impact when linking someone to them.
- duck 16y ago
  I know I have seen lots of these, but I can't really remember any of them now. I can think of http://two.sentenc.es/ http://two.sentenc.es/. What are some more examples?
  - joelg87 16y ago
    Here is another: http://whatifgoogledoesit.com/ http://whatifgoogledoesit.com/
    - Semiapies 16y ago
      I dunno, random-generation pages like this or http://whatthefuckshouldimakefordinner.com http://whatthefuckshouldimakefordinner.com (which has thrown me some neat recipes) seem a bit different from single-essay sites.
  - Samuel_Michon 16y ago
    http://www.comicsanscriminal.com/ http://www.comicsanscriminal.com/
    - user24 16y ago
      http://www.comicfuckingsans.com http://www.comicfuckingsans.com (my little parody of the comic sans hate)
  - eru 16y ago
    http://foldr.com/ http://foldr.com/ http://foldl.com/ http://foldl.com/
  - cpach 16y ago
    http://giveupandusetables.com/ http://giveupandusetables.com/
    - theb83 16y ago
      http://shouldiusetablesforlayout.com/ http://shouldiusetablesforlayout.com/
      - ramen 16y ago
        That page would look nicer if the text were vertically centered. I know a really easy way to do that using tables.
  - telemachos 16y ago
    The winner, pehaps, for longest one-word domain name? http://dowebsitesneedtolookexactlythesameineverybrowser.com/ http://dowebsitesneedtolookexactlythesameineverybrowser.com/
    - user24 16y ago
      aw man, I opened this in Fx and Ch, hoping they'd done some html acrobatics and got it displaying completely differently in each browser but, actually, their site looks exactly the same in every browser...
      - telemachos 16y ago
        I think it's from a while back (it's Dan Cederholm's push to help people get over that concern). Also Firefox and Chrome almost certainly aren't the browser people would be worried about in such a case. Break out a vm and try an older version of IE.
  - iron_ball 16y ago
    http://isthisyourpaperonsingleservingsites.com/ http://isthisyourpaperonsingleservingsites.com/
- scrrr 16y ago
  Youve been played. Its less about advocating anything but more about the page rank of the domains it links to. Lets not be naive. The content here is almost zero and could be summarized with one simple english sentence containing the word 'because'.
pilif 16y ago
yesterday I was in the position of having to download the driver software for the logitech unified remote receiver in order to get my mouse working. While I had a working keyboard, there was no way to move the mouse cursor. I was wondering where the focus rectangle had gone and now I know. Very timely submission indeed. In the end, I had to temporarily plug another mouse to actually navigate to the driver download page.
- j_s 16y ago
  Windows Accessibility to the rescue! Left ALT+left SHIFT+NUM LOCK: Toggles MouseKeys on and off "Instead of using the mouse, you can use the arrow keys on your keyboard or the numeric keypad to move the mouse." http://www.microsoft.com/enable/training/windowsvista/mousekeys.aspx http://www.microsoft.com/enable/training/windowsvista/mousek...
  - shubber 16y ago
    Right. "Mousekeys to the rescue." The painful, awkward "got it takes forever to move the cursor... Ah! Missed!" rescue. If Mousekeys is the solution, your problem is pretty bad.
- wahnfrieden 16y ago
  If you have Firefox or Chrome there's an easier way to click links. In FF, hit ' and then start typing the text of a link - press enter once it matches. Chrome is similar but doesn't let you search within only links - but you can use ctrl-f to highlight a link, and press escape then enter.
gkoberger 16y ago
In theory, HTML5 (in the loose, HTML+CSS+JS sense) should reduce the need for outline:none. Before, it was necessary because any input using an image (for rounded corners, box shadows, etc) would look horrible with it. Now, however, a majority of common input styles can be done using CSS- which is compatible with the browser's default outlining.
StavrosK 16y ago
This is why I love Opera's shift+arrow navigation. There's a large outline that's added by Opera regardless of the style, and it's much more visually intuitive than tabbing along.
- Luyt 16y ago
  If I tap the Control key once, Konqueror will show tooltip letters at the side of each link on the page; it then enters a mode in which I can press a letter key to activate that link.
  - StavrosK 16y ago
    That's interesting... What if there are more than 36 links?
    - Groxx 16y ago
      2 letters.
  - pornel 16y ago
    Opera has similar feature if you press / and type fragment of link label.
    - wahnfrieden 16y ago
      Firefox equivalent is '
    - StavrosK 16y ago
      "/" searches everything, "," searches links. Both very useful.
- pornel 16y ago
  I expect that other browser will follow Opera and just stop supporting :focus {outline:none} if designers keep mindlessly copy Eric's reset.
arnorhs 16y ago
That's a pretty poor title for an article. It's a naive to blame it on the outline property. You can do whatever you want with the outline, just remember to make it do something else when it receives focus. This applies both to input boxes as well as <a> tags. I have a default styling when I code PSDs into HTML/CSS that makes all a:focus elements have an opacity of 0.8. It doesn't look as bad and insures that all <a> elements will have a focus behavior.
oozcitak 16y ago
I don't think it is good idea to use alternative styling for focus outlines. People who prefer navigating with their keyboards rely on their browser's native outline style for feedback. If you really must remove the outline, do it for hover and active states only, and leave the focus styling to the browser: a:hover, a:active { outline: none; } /* Requires IE > 6 */ See Patrick Lauke's article for more tests and reading: http://people.opera.com/patrickl/experiments/keyboard/test http://people.opera.com/patrickl/experiments/keyboard/test
- lovskogen 16y ago
  Recommending default outline style is the same as recommending a default blue link style. A designer will know how to make the focus style match the site design.
xinsight 16y ago
I'm sure the author means well, but I doubt this passive approach (where everyone else has to fix the problem) combined with the irritating, holier-than-thou tone will get much traction. A little greasemonkey script to add outline, along with some visual examples of would be far more effective way to advocate the issue.
- Semiapies 16y ago
  Doing something that inconveniences or irritates people gets you griped at. A greasemonkey script wouldn't "advocate" anything; its use would be the (admittedly reasonable) action of someone not waiting for everyone else to get a clue and do something right.
  - falldowngoboom 16y ago
    The browser defaults for outline are ugly, that's why so many people set outline to none. So, some visual examples that show sexy outline stylings seems a more reasonable approach. The author dismisses all aesthetic concerns and loses credibility with the aesthetically minded people he's trying to convince.
xcvgreghre 16y ago
-------- http://ta.gg/4wt http://ta.gg/4wt ------ -------- http://ta.gg/4wt http://ta.gg/4wt ------ -------- http://ta.gg/4wt http://ta.gg/4wt ------ -------- http://yep.it/fyphgj http://yep.it/fyphgj ------ Gold autumn, personality Men’s clothing + Shoes, Travel bag that grabs an eye coat + Chao packet Free transport -------- http://yep.it/fyphgj http://yep.it/fyphgj ------ -------- http://ta.gg/4wt http://ta.gg/4wt ------ -------- http://ta.gg/4wt http://ta.gg/4wt ------ -------- http://ta.gg/4wt http://ta.gg/4wt ------
pbhogan 16y ago
Deriving authority for this statement form Eric Meyer is misleading. Eric didn't say don't use outline: none, he said make sure you have focus styles. Browser defaults are ugly and inconsistent. Ordering designers everywhere to not override that is like telling Picasso to paint realistically because some people find his work inaccessible. Asking designers nicely to make sure they have elegant focus styles is both appealing to their ability and sensibility without insulting their creativity.
- jerf 16y ago
  Has the text changed since you posted this? You're all but quoting them in your first paragraph, except they say it more emphatically.
- rimantas 16y ago
  > Browser defaults are ugly and inconsistent. These defaults are extremely consistent within the same browser, and wast majority of normal people tend to use on browser for the most of their browsing.
- hasenj 16y ago
  For the record, Picasso's paintings are horrible. I have no idea why the dude is famous.
- deleted 16y ago
  [deleted]
sdghrth 16y ago
-------- http://ta.gg/4wt http://ta.gg/4wt ------ -------- http://ta.gg/4wt http://ta.gg/4wt ------ -------- http://ta.gg/4wt http://ta.gg/4wt ------ -------- http://yep.it/fyphgj http://yep.it/fyphgj ------ Gold autumn, personality Men’s clothing + Shoes, Travel bag that grabs an eye coat + Chao packet Free transport -------- http://yep.it/fyphgj http://yep.it/fyphgj ------ -------- http://ta.gg/4wt http://ta.gg/4wt ------ -------- http://ta.gg/4wt http://ta.gg/4wt ------ -------- http://ta.gg/4wt http://ta.gg/4wt ------
jsavimbi 16y ago
Usually "design vanity" or total ignorance of accessibility. That's a pretty ignorant statement intended as fact. When designing and developing applications with advanced functionality, it is sometimes necessary to override the outline in favor of the intended user functionality. That is why you can set outline to zero or none. Just peruse jQuery and stop being a standards fascist.

I like this trend of making single-page domain names out of what would just be a blog post advocating something with clear points and logic. They feel like they'll have more impact when linking someone to them.

duck 16y ago
I know I have seen lots of these, but I can't really remember any of them now. I can think of http://two.sentenc.es/ http://two.sentenc.es/. What are some more examples?
- joelg87 16y ago
  Here is another: http://whatifgoogledoesit.com/ http://whatifgoogledoesit.com/
  - Semiapies 16y ago
    I dunno, random-generation pages like this or http://whatthefuckshouldimakefordinner.com http://whatthefuckshouldimakefordinner.com (which has thrown me some neat recipes) seem a bit different from single-essay sites.
- Samuel_Michon 16y ago
  http://www.comicsanscriminal.com/ http://www.comicsanscriminal.com/
  - user24 16y ago
    http://www.comicfuckingsans.com http://www.comicfuckingsans.com (my little parody of the comic sans hate)
- eru 16y ago
  http://foldr.com/ http://foldr.com/ http://foldl.com/ http://foldl.com/
- cpach 16y ago
  http://giveupandusetables.com/ http://giveupandusetables.com/
  - theb83 16y ago
    http://shouldiusetablesforlayout.com/ http://shouldiusetablesforlayout.com/
    - ramen 16y ago
      That page would look nicer if the text were vertically centered. I know a really easy way to do that using tables.
- telemachos 16y ago
  The winner, pehaps, for longest one-word domain name? http://dowebsitesneedtolookexactlythesameineverybrowser.com/ http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  - user24 16y ago
    aw man, I opened this in Fx and Ch, hoping they'd done some html acrobatics and got it displaying completely differently in each browser but, actually, their site looks exactly the same in every browser...
    - telemachos 16y ago
      I think it's from a while back (it's Dan Cederholm's push to help people get over that concern). Also Firefox and Chrome almost certainly aren't the browser people would be worried about in such a case. Break out a vm and try an older version of IE.
- iron_ball 16y ago
  http://isthisyourpaperonsingleservingsites.com/ http://isthisyourpaperonsingleservingsites.com/
scrrr 16y ago
Youve been played. Its less about advocating anything but more about the page rank of the domains it links to. Lets not be naive. The content here is almost zero and could be summarized with one simple english sentence containing the word 'because'.

pilif 16y ago

yesterday I was in the position of having to download the driver software for the logitech unified remote receiver in order to get my mouse working. While I had a working keyboard, there was no way to move the mouse cursor. I was wondering where the focus rectangle had gone and now I know. Very timely submission indeed. In the end, I had to temporarily plug another mouse to actually navigate to the driver download page.

j_s 16y ago
Windows Accessibility to the rescue! Left ALT+left SHIFT+NUM LOCK: Toggles MouseKeys on and off "Instead of using the mouse, you can use the arrow keys on your keyboard or the numeric keypad to move the mouse." http://www.microsoft.com/enable/training/windowsvista/mousekeys.aspx http://www.microsoft.com/enable/training/windowsvista/mousek...
- shubber 16y ago
  Right. "Mousekeys to the rescue." The painful, awkward "got it takes forever to move the cursor... Ah! Missed!" rescue. If Mousekeys is the solution, your problem is pretty bad.
wahnfrieden 16y ago
If you have Firefox or Chrome there's an easier way to click links. In FF, hit ' and then start typing the text of a link - press enter once it matches. Chrome is similar but doesn't let you search within only links - but you can use ctrl-f to highlight a link, and press escape then enter.

gkoberger 16y ago

In theory, HTML5 (in the loose, HTML+CSS+JS sense) should reduce the need for outline:none. Before, it was necessary because any input using an image (for rounded corners, box shadows, etc) would look horrible with it. Now, however, a majority of common input styles can be done using CSS- which is compatible with the browser's default outlining.

StavrosK 16y ago

This is why I love Opera's shift+arrow navigation. There's a large outline that's added by Opera regardless of the style, and it's much more visually intuitive than tabbing along.

Luyt 16y ago
If I tap the Control key once, Konqueror will show tooltip letters at the side of each link on the page; it then enters a mode in which I can press a letter key to activate that link.
- StavrosK 16y ago
  That's interesting... What if there are more than 36 links?
  - Groxx 16y ago
    2 letters.
- pornel 16y ago
  Opera has similar feature if you press / and type fragment of link label.
  - wahnfrieden 16y ago
    Firefox equivalent is '
  - StavrosK 16y ago
    "/" searches everything, "," searches links. Both very useful.
pornel 16y ago
I expect that other browser will follow Opera and just stop supporting :focus {outline:none} if designers keep mindlessly copy Eric's reset.

arnorhs 16y ago

That's a pretty poor title for an article. It's a naive to blame it on the outline property. You can do whatever you want with the outline, just remember to make it do something else when it receives focus. This applies both to input boxes as well as <a> tags. I have a default styling when I code PSDs into HTML/CSS that makes all a:focus elements have an opacity of 0.8. It doesn't look as bad and insures that all <a> elements will have a focus behavior.

oozcitak 16y ago

I don't think it is good idea to use alternative styling for focus outlines. People who prefer navigating with their keyboards rely on their browser's native outline style for feedback. If you really must remove the outline, do it for hover and active states only, and leave the focus styling to the browser: a:hover, a:active { outline: none; } /* Requires IE > 6 */ See Patrick Lauke's article for more tests and reading: http://people.opera.com/patrickl/experiments/keyboard/test http://people.opera.com/patrickl/experiments/keyboard/test

lovskogen 16y ago
Recommending default outline style is the same as recommending a default blue link style. A designer will know how to make the focus style match the site design.

xinsight 16y ago

I'm sure the author means well, but I doubt this passive approach (where everyone else has to fix the problem) combined with the irritating, holier-than-thou tone will get much traction. A little greasemonkey script to add outline, along with some visual examples of would be far more effective way to advocate the issue.

Semiapies 16y ago
Doing something that inconveniences or irritates people gets you griped at. A greasemonkey script wouldn't "advocate" anything; its use would be the (admittedly reasonable) action of someone not waiting for everyone else to get a clue and do something right.
- falldowngoboom 16y ago
  The browser defaults for outline are ugly, that's why so many people set outline to none. So, some visual examples that show sexy outline stylings seems a more reasonable approach. The author dismisses all aesthetic concerns and loses credibility with the aesthetically minded people he's trying to convince.

xcvgreghre 16y ago

-------- http://ta.gg/4wt http://ta.gg/4wt ------ -------- http://ta.gg/4wt http://ta.gg/4wt ------ -------- http://ta.gg/4wt http://ta.gg/4wt ------ -------- http://yep.it/fyphgj http://yep.it/fyphgj ------ Gold autumn, personality Men’s clothing + Shoes, Travel bag that grabs an eye coat + Chao packet Free transport -------- http://yep.it/fyphgj http://yep.it/fyphgj ------ -------- http://ta.gg/4wt http://ta.gg/4wt ------ -------- http://ta.gg/4wt http://ta.gg/4wt ------ -------- http://ta.gg/4wt http://ta.gg/4wt ------

pbhogan 16y ago

Deriving authority for this statement form Eric Meyer is misleading. Eric didn't say don't use outline: none, he said make sure you have focus styles. Browser defaults are ugly and inconsistent. Ordering designers everywhere to not override that is like telling Picasso to paint realistically because some people find his work inaccessible. Asking designers nicely to make sure they have elegant focus styles is both appealing to their ability and sensibility without insulting their creativity.

jerf 16y ago
Has the text changed since you posted this? You're all but quoting them in your first paragraph, except they say it more emphatically.
rimantas 16y ago
> Browser defaults are ugly and inconsistent. These defaults are extremely consistent within the same browser, and wast majority of normal people tend to use on browser for the most of their browsing.
hasenj 16y ago
For the record, Picasso's paintings are horrible. I have no idea why the dude is famous.
deleted 16y ago
[deleted]

sdghrth 16y ago

jsavimbi 16y ago

Usually "design vanity" or total ignorance of accessibility. That's a pretty ignorant statement intended as fact. When designing and developing applications with advanced functionality, it is sometimes necessary to override the outline in favor of the intended user functionality. That is why you can set outline to zero or none. Just peruse jQuery and stop being a standards fascist.