Dotted frame around links and keyboard navigation
I think everyone knows what it is. Some browsers, in particular, Firefox and Internet Explorer 8, draw a single-pixel dotted frame around the links and inside the buttons when the user clicks on them. If the site consists of bare html, most likely, they will not deliver discomfort. But if all the links are somehow stylized, you (or your designer) will most likely want to get rid of it. Especially since this frame may appear in an inappropriate place:
This frame is nothing but the css-outline property, so the very first and most often recommended way to turn off this frame for links is to specify a simple css-rule:
But, as you can guess, you can’t just take it away and remove it, because this frame means focus on the active element. When you work with a mouse, this function may seem completely useless - and so it is clear that the active element is the one under the cursor. But when navigating from the keyboard, this frame lets you know which element has focus now. When applying the above rules in Firefox and IE8, the links will still participate in the traversal by pressing the tab key, but it will be impossible to understand which link is highlighted.
')
Other systems have other behaviors. The very first approach that I would like to point out is the standard behavior of Windows XP and above — by default, the focus on the controllers is not drawn. But, when you first press the tab key, the focus appears and no longer disappears. The same behavior is typical of Internet Explorer 6 and 7 browsers. Another approach is for Opera. She does not think that the links should be moved using the tab key, shifting the focus only to form controllers. And the links allow you to navigate using other mechanisms - Shift + arrows or control + arrows. With this approach, the css-outline property for links does not matter.
It is clear that to achieve the behavior of the Opera is hardly possible, and not necessary, it will be unusual for users of these browsers. But you can try to emulate the behavior of Internet Explorer 6 and 7. To do this, you can remove the frame not just to focus, but directly while clicking. As you know, in addition to the pseudo-class: focus there is another -: active. It is responsible for the state of the link between the mousedown and mouseup events. If you hang the same outline: none on it, the frame will not appear at the moment of clicking with the mouse. But it will appear immediately after the release, because the link will be in focus. This can be solved by removing the frame for the induced element, i.e. The code will be:
This method advises using Patrick H. Lauke, the web evangelist of Opera Software (Pepelbey, hello!). But it still leaves two unpleasant moments: the focus is still not going anywhere, and after the mouse is retracted, it will appear again. Therefore, if the link is processed by javascript, and does not lead to another page, you should remove the focus from it after clicking. The second point - when navigating from the keyboard, the focus will disappear, as it is not difficult to guess, when you hover the mouse.
All information on the focus behavior can be summarized in one table:
The absence of green circles in the last column is a good result.
A possible solution to the problem is to completely abandon the dotted frame of the focus and make a change in the background color or something else. This option may not look so bad when interacting with the mouse. The minus of the solution is that if there is insufficient allocation of a quick glance, it will not be enough to determine the link in focus.
When looking for a solution to such problems, all the time there is a feeling that you are struggling with windmills. Browsers have long been a whole ecosystem of its features and unique details. And users, choosing a browser, choose all these little things of behavior. Perhaps the best solution would be to give up trying to change what users chose. And if, suddenly, some of these little things do not like most of the users of the browser, perhaps it is worth changing it in the browser? Picture from xkcd to the topic .
This frame is nothing but the css-outline property, so the very first and most often recommended way to turn off this frame for links is to specify a simple css-rule:
a: focus {
outline: none;
} Or even this:
a {
outline: none;
}
But, as you can guess, you can’t just take it away and remove it, because this frame means focus on the active element. When you work with a mouse, this function may seem completely useless - and so it is clear that the active element is the one under the cursor. But when navigating from the keyboard, this frame lets you know which element has focus now. When applying the above rules in Firefox and IE8, the links will still participate in the traversal by pressing the tab key, but it will be impossible to understand which link is highlighted.
')
Other systems have other behaviors. The very first approach that I would like to point out is the standard behavior of Windows XP and above — by default, the focus on the controllers is not drawn. But, when you first press the tab key, the focus appears and no longer disappears. The same behavior is typical of Internet Explorer 6 and 7 browsers. Another approach is for Opera. She does not think that the links should be moved using the tab key, shifting the focus only to form controllers. And the links allow you to navigate using other mechanisms - Shift + arrows or control + arrows. With this approach, the css-outline property for links does not matter.
It is clear that to achieve the behavior of the Opera is hardly possible, and not necessary, it will be unusual for users of these browsers. But you can try to emulate the behavior of Internet Explorer 6 and 7. To do this, you can remove the frame not just to focus, but directly while clicking. As you know, in addition to the pseudo-class: focus there is another -: active. It is responsible for the state of the link between the mousedown and mouseup events. If you hang the same outline: none on it, the frame will not appear at the moment of clicking with the mouse. But it will appear immediately after the release, because the link will be in focus. This can be solved by removing the frame for the induced element, i.e. The code will be:
a: active, a: hover {
outline: none;
}
This method advises using Patrick H. Lauke, the web evangelist of Opera Software (Pepelbey, hello!). But it still leaves two unpleasant moments: the focus is still not going anywhere, and after the mouse is retracted, it will appear again. Therefore, if the link is processed by javascript, and does not lead to another page, you should remove the focus from it after clicking. The second point - when navigating from the keyboard, the focus will disappear, as it is not difficult to guess, when you hover the mouse.
All information on the focus behavior can be summarized in one table:
The absence of green circles in the last column is a good result.
What else can you do
A possible solution to the problem is to completely abandon the dotted frame of the focus and make a change in the background color or something else. This option may not look so bad when interacting with the mouse. The minus of the solution is that if there is insufficient allocation of a quick glance, it will not be enough to determine the link in focus.
Small lyrical digression
When looking for a solution to such problems, all the time there is a feeling that you are struggling with windmills. Browsers have long been a whole ecosystem of its features and unique details. And users, choosing a browser, choose all these little things of behavior. Perhaps the best solution would be to give up trying to change what users chose. And if, suddenly, some of these little things do not like most of the users of the browser, perhaps it is worth changing it in the browser? Picture from xkcd to the topic .
Source: https://habr.com/ru/post/94246/
All Articles