initial commit

1 files changed, 126 insertions, 0 deletions

diff --git a/files/ru/web/css/_colon_focus-visible/index.html b/files/ru/web/css/_colon_focus-visible/index.html
new file mode 100644
index 0000000000..3859888faa
--- /dev/null
+++ b/files/ru/web/css/_colon_focus-visible/index.html
@@ -0,0 +1,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>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Базовый_пример">Базовый пример</h3>
+
+<p>В этом примере селектор <code>:focus-visible</code> использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щелкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью <code>:focus</code>.</p>
+
+<pre class="brush: html notranslate">&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 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">&lt;custom-button tabindex="0" role="button"&gt;Click Me&lt;/custom-button&gt;</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>