initial commit

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">&lt;input value="Default styles"&gt;&lt;br&gt;
+&lt;button&gt;Default styles&lt;/button&gt;&lt;br&gt;
+&lt;input class="focus-only" value=":focus only"&gt;&lt;br&gt;
+&lt;button class="focus-only"&gt;:focus only&lt;/button&gt;&lt;br&gt;
+&lt;input class="focus-visible-only" value=":focus-visible only"&gt;&lt;br&gt;
+&lt;button class="focus-visible-only"&gt;:focus-visible only&lt;/button&gt;</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">&lt;custom-button tabindex="0" role="button"&gt;Click Me&lt;/custom-button&gt;</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>