diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/css/_colon_-moz-focusring | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/ru/web/css/_colon_-moz-focusring')
| -rw-r--r-- | files/ru/web/css/_colon_-moz-focusring/index.html | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/files/ru/web/css/_colon_-moz-focusring/index.html b/files/ru/web/css/_colon_-moz-focusring/index.html new file mode 100644 index 0000000000..02c26e1b68 --- /dev/null +++ b/files/ru/web/css/_colon_-moz-focusring/index.html @@ -0,0 +1,94 @@ +--- +title: ':-moz-focusring' +slug: 'Web/CSS/:-moz-focusring' +tags: + - Фокус + - псевдокласс +translation_of: 'Web/CSS/:-moz-focusring' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Описание">Описание</h2> + +<p>Псевдокласс <strong>:-moz-focusring</strong> является расширением браузера Mozilla, которое подобно псевдоклассу {{cssxref (":focus")}}, но взаимодействует только с элементом при наличии у него фокуса. При этом рамка фокуса или другой индикатор располагается вокруг элемента.</p> + +<p>Если :-moz-focusring распознается конкретной платформой, то и <strong>:focus</strong> тоже. Однако обратное не всегда верно и зависит от того, активированы ли пользовательские настройки для отрисовки фокуса и как именно действует фокус по отношению к этому элементу. Независимо от того, имеют ли место пользовательские настройки отрисовки фокуса, многое также зависит от настроек операционной системы и других факторов. В связи с этим точное поведение этого псевдокласса может варьироваться от платформы к платформе.</p> + +<blockquote> +<p><strong>Примечание.</strong> Разработчики склонны использовать псевдокласс <strong>:-moz-focusring</strong> для различия между состояниями фокуса, когда пользователь активирует фокусировку с помощью мыши и клавиатуры. Это также потенциально полезно при создании пользовательского элемента с последующим намерением изменить его стиль на основе его поведения.</p> +</blockquote> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">:-moz-focusring</pre> + +<h2 id="Пример">Пример</h2> + +<p>Для определения внешнего вида элемента во время фокусировки на нем можно использовать этот псевдоселектор следующим образом:</p> + +<pre class="brush: css">mybutton:-moz-focusring { + outline: 2px dotted; +} +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<p>Этот псевдокласс пока еще не определен ни в одной спецификации, хотя и прошел этап обсуждения в рабочей группе. По его итогам было решено внести его в группу селекторов 4 или 5.</p> + +<h2 id="Совметимость_с_браузерами">Совметимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Особенность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Особенность</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{bug("418521")}}</li> +</ul> |
