blob: 75d4997c7557093dbc69912ee849bdcb49ba6013 (
plain)
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
|
---
title: ':focus-visible'
slug: 'Web/CSS/:focus-visible'
tags:
- CSS
- Reference
- Web
- 伪类
- 布局
translation_of: 'Web/CSS/:focus-visible'
---
<div>{{CSSRef}}</div>
<p>当元素匹配{{cssxref(":focus")}}伪类并且客户端(UA)的启发式引擎决定焦点应当可见(在这种情况下很多浏览器默认显示“焦点框”。)时，<strong><code>:focus-visible</code> </strong>伪类将生效。</p>
<p>这个选择器可以有效地根据用户的输入方式(鼠标 vs 键盘)展示不同形式的焦点。</p>
<p>请注意Firefox通过较旧的前缀伪类 <code>:-moz-focusring</code> 支持类似的功能。更多细节请参考{{cssxref(":-moz-focusring")}}页面。</p>
<h2 id="语法">语法</h2>
{{csssyntax}}
<h2 id="示例">示例</h2>
<h3 id="基本示例">基本示例</h3>
<p>在这个例子中，<code>:focus-visible</code> 选择器利用客户端(UA)的行为决定是否匹配。比较一下，当你用鼠标点击控件和用键盘tab切换控件有何不同。请注意元素的表现与具有 <code>:focus</code> 样式的元素的区别。</p>
<pre class="brush: html"><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">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>，可以使用 <code>:focus-visible</code> 使其仅在键盘操作时才显示焦点样式。这和{{htmlelement("button")}}一类的原生控件表现一致。</p>
<pre class="brush: html"><custom-button tabindex="0" role="button">Click Me</custom-button></pre>
<pre class="brush: css">custom-button {
display: inline-block;
margin: 10px;
}
custom-button:focus {
/* Provide a fallback style for browsers
that don't support :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>你可以使用 <code>:focus-visible</code> 的polyfill <a href="https://github.com/WICG/focus-visible">focus-visible.js</a> 。</p>
<h2 id="可访问性关注点">可访问性关注点</h2>
<p>保证视觉焦点指示对低视力对人群可见。这对在强光环境下使用屏幕的人同样有益 (比如在户外的阳光下)。 <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> 要求视觉焦点指示至少在3到1。</p>
<p>可访问的视觉焦点指示: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">给你的网站一些焦点! 设计有效且可用的焦点指示的一些建议。</a></p>
<h2 id="规范">规范</h2>
<table>
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</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="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.selectors.focus-visible")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>{{cssxref(":focus")}}</li>
<li>{{cssxref(":focus-within")}}</li>
</ul>
|
