diff options
Diffstat (limited to 'files/zh-cn/web/css/_colon_focus-visible')
| -rw-r--r-- | files/zh-cn/web/css/_colon_focus-visible/index.html | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/_colon_focus-visible/index.html b/files/zh-cn/web/css/_colon_focus-visible/index.html new file mode 100644 index 0000000000..ef432792ea --- /dev/null +++ b/files/zh-cn/web/css/_colon_focus-visible/index.html @@ -0,0 +1,126 @@ +--- +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> + +<pre>{{csssyntax}}</pre> + +<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> + +<div class="hidden">此页面的兼容性表格由结构化数据生成。如果你想贡献数据，请检出 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并提交 pull request.</div> + +<p>{{Compat("css.selectors.focus-visible")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{cssxref(":focus")}}</li> + <li>{{cssxref(":focus-within")}}</li> +</ul> |