1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
---
title: ':focus-visible'
slug: 'Web/CSS/:focus-visible'
translation_of: 'Web/CSS/:focus-visible'
---
<div>Псевдокласс <strong><code>:focus-visible</code></strong> применяется, в то время как элемент соответствует псевдоклассу <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">:focus</span></font>, и UA ({{glossary("User Agent")}}) определяет с помощью эвристики, что фокус должен быть сделан очевидным для элемента.</div>
<p>Этот селектор полезен для предоставления другого индикатора фокуса, основанного на модальности ввода пользователя (мышь против клавиатуры).</p>
<p>Обратите внимание, что Firefox поддерживает аналогичную функциональность через старый псевдокласс с префиксом <code>:-moz-focusring</code>.</p>
<h2 id="Синтаксис">Синтаксис</h2>
{{CSSSyntax}}
<h2 id="Пример">Пример</h2>
<h3 id="Базовый_пример">Базовый пример</h3>
<p>В этом примере селектор <code>:focus-visible</code> использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щёлкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью <code>:focus</code>.</p>
<pre class="brush: html notranslate"><input value="Default styles"><br>
<button>Default styles</button><br>
<input class="focus-only" value=":focus only"><br>
<button class="focus-only">:focus only</button><br>
<input class="focus-visible-only" value=":focus-visible only"><br>
<button class="focus-visible-only">:focus-visible only</button></pre>
<pre class="brush: css highlight[9] notranslate">input, button {
margin: 10px;
}
.focus-only:focus {
outline: 2px solid black;
}
.focus-visible-only:focus-visible {
outline: 4px dashed darkorange;
}
</pre>
<p>{{EmbedLiveSample("Basic_example", "100%", 300)}}</p>
<h3 id="Выборочное_отображение_индикатора_фокусировки">Выборочное отображение индикатора фокусировки</h3>
<p>Пользовательский элемент управления, такой как кнопка <a href="/en-US/docs/User:Andreas_Wuest/Custom_Elements">настраиваемого элемента</a>, может использовать: focus-visible для выборочного применения индикатора фокуса только к фокусу клавиатуры. Это соответствует собственному поведению фокуса для таких элементов управления, как {{htmlelement ("button")}}.</p>
<pre class="brush: html notranslate"><custom-button tabindex="0" role="button">Click Me</custom-button></pre>
<pre class="brush: css highlight[13, 19] notranslate">custom-button {
display: inline-block;
margin: 10px;
}
custom-button:focus {
/* Обеспечьте резервный стиль для браузеров,
которые не поддерживают: focus-visible */
outline: none;
background: lightgrey;
}
custom-button:focus:not(:focus-visible) {
/* Remove the focus indicator on mouse-focus for browsers
that do support :focus-visible */
background: transparent;
}
custom-button:focus-visible {
/* Draw a very noticeable focus style for
keyboard-focus on browsers that do support
:focus-visible */
outline: 4px dashed darkorange;
background: transparent;
}</pre>
<p>{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 300)}}</p>
<h2 id="Polyfill">Polyfill</h2>
<p>You can polyfill <code>:focus-visible</code> using <a href="https://github.com/WICG/focus-visible">focus-visible.js</a>.</p>
<h2 id="Accessibility_concerns">Accessibility concerns</h2>
<h3 id="Low_vision">Low vision</h3>
<p>Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> requires that the visual focus indicator be at least 3 to 1.</p>
<ul>
<li>Accessible Visual Focus Indicators: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators</a></li>
</ul>
<h3 id="Cognition">Cognition</h3>
<p>It may not be obvious as to why the focus indicator is appearing and disappearing if a person is using mixed forms of input. For users with cognitive concerns, or who are less technologically literate, this lack of consistent behavior for interactive elements may be confusing.</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}</td>
<td>{{Spec2("CSS4 Selectors")}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("css.selectors.focus-visible")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{CSSxRef(":focus")}}</li>
<li>{{CSSxRef(":focus-within")}}</li>
</ul>
|
