diff options
Diffstat (limited to 'files/ru/conflicting/web/css/_colon_is/index.html')
| -rw-r--r-- | files/ru/conflicting/web/css/_colon_is/index.html | 191 |
1 files changed, 0 insertions, 191 deletions
diff --git a/files/ru/conflicting/web/css/_colon_is/index.html b/files/ru/conflicting/web/css/_colon_is/index.html deleted file mode 100644 index c771129bd5..0000000000 --- a/files/ru/conflicting/web/css/_colon_is/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: ':any' -slug: conflicting/Web/CSS/:is -tags: - - CSS - - Experimental - - Псевдоклассы - - Руководство - - Экспериментальное -translation_of: Web/CSS/:is -translation_of_original: Web/CSS/:any -original_slug: Web/CSS/:any ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<h2 id="Summary" name="Summary">Описание</h2> - -<p><a href="/ru/docs/Web/CSS/Псевдо-классы" title="CSS/Pseudo-classes">Псевдокласс</a> <code>:any()</code> даёт возможность быстрого конструирования наборов похожих селекторов путём составления групп, в которых каждый из входящих элементов будет комбинироваться с элементами из других групп. Это альтернатива для прописывания комбинаций селекторов для одного элемента, который может находится в разных родителях.</p> - -<div class="note"><strong>Замечание: </strong>Этот псевдокласс все ещё находится в процессе стандартизации в <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches" title="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS селекторах уровня 4</em></a> под именем <code>:matches()</code>. Вполне вероятно, что синтаксис и имя <code>:-<em>vendor</em>-any() </code>будут изменены в ближайшем будущем, чтобы соответствовать спецификации.</div> - -<h2 id="Syntax" name="Syntax">Синтаксис</h2> - -<pre class="syntaxbox">:-moz-any( <em>selector</em>[, <em>selector</em>]* ) :-webkit-any( selector[, selector]* )</pre> - -<h3 id="Values" name="Values">Параметры</h3> - -<dl> - <dt><code>selector</code></dt> - <dd>Селектор. Это может быть просто селектор или несколько селекторов, состоящих из <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors" title="http://www.w3.org/TR/css3-selectors/#simple-selectors">CSS 3 простых селекторов</a> и может включать комбинацию потомков.</dd> -</dl> - -<div class="note"><strong>Замечание:</strong> Селекторы <strong>не</strong> могут содержать псевдо-элементы, допускается только комбинирование потомков.</div> - -<h2 id="Examples" name="Examples">Примеры</h2> - -<p>Например, следующий CSS:</p> - -<pre class="brush: css">/* на глубине 3 (или больше) неупорядоченные списки используют square */ -ol ol ul, ol ul ul, ol menu ul, ol dir ul, -ol ol menu, ol ul menu, ol menu menu, ol dir menu, -ol ol dir, ol ul dir, ol menu dir, ol dir dir, -ul ol ul, ul ul ul, ul menu ul, ul dir ul, -ul ol menu, ul ul menu, ul menu menu, ul dir menu, -ul ol dir, ul ul dir, ul menu dir, ul dir dir, -menu ol ul, menu ul ul, menu menu ul, menu dir ul, -menu ol menu, menu ul menu, menu menu menu, menu dir menu, -menu ol dir, menu ul dir, menu menu dir, menu dir dir, -dir ol ul, dir ul ul, dir menu ul, dir dir ul, -dir ol menu, dir ul menu, dir menu menu, dir dir menu, -dir ol dir, dir ul dir, dir menu dir, dir dir dir { - list-style-type: square; -} -</pre> - -<p>Может быть записано, как:</p> - -<pre class="brush: css">/* на глубине 3 (или больше) неупорядоченные списки используют square */ -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul, -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu, -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir { - list-style-type: square; -}</pre> - -<p>Однако, не нужно использовать это так: (Смотрите <a href="#Issues_with_performance_and_specificity">раздел о производительности</a> ниже.)</p> - -<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) { - list-style-type: square; -}</pre> - -<h2 id="Notes" name="Notes">Примечания</h2> - -<p>Особенно полезен при работе с <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">разделами и заголовками</a> в HTML5 . Теги {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут быть вложенными, без <code>:any()</code> стилизация их соответствия друг другу может быть сложной.</p> - -<p>Например, без <code>:any()</code>, стилизация всех элементов {{HTMLElement("h1")}} на разной глубине будет очень сложна:</p> - -<pre class="brush: css">/* Уровень 0 */ -h1 { - font-size: 30px; -} -/* Уровень 1 */ -section h1, article h1, aside h1, nav h1 { - font-size: 25px; -} -/* Уровень 2 */ -section section h1, section article h1, section aside h1, section nav h1, -article section h1, article article h1, article aside h1, article nav h1, -aside section h1, aside article h1, aside aside h1, aside nav h1, -nav section h1, nav article h1, nav aside h1, nav nav h1, { - font-size: 20px; -} -/* Уровень 3 */ -/* ... даже не думайте о нём*/ -</pre> - -<p>При использовании <code>:-any()</code>, это становится намного проще:</p> - -<pre class="brush: css">/* Уровень 0 */ -h1 { - font-size: 30px; -} -/* Уровень 1 */ -:-moz-any(section, article, aside, nav) h1 { - font-size: 25px; -} -/* Уровень 2 */ -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) h1 { - font-size: 20px; -} -/* Уровень 3 */ -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) h1 { - font-size: 15px; -}</pre> - -<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">Проблемы с производительностью и особенности</h3> - -<p>{{ bug("561154") }} в Gecko, где специфика <code>:-moz-any()</code> не корректна. Текущая реализация (как в Firefox 12) ставит <code>:-moz-any()</code> в категорию универсальных правил, что означает, что использование его в качестве селектора справа будет медленнее, чем использование селекторов по ID, классу, или тегу.</p> - -<p>Например:</p> - -<pre class="brush: css">.a > :-moz-any(.b, .c) -</pre> - -<p>медленнее, чем:</p> - -<pre class="brush: css">.a > .b, .a > .c -</pre> - -<p>а следующее быстрее:</p> - -<pre class="brush: css">:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c -</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}</td> - <td>12.0 (534.30){{property_prefix("-webkit")}}</td> - <td> </td> - <td> </td> - <td> - <p>5<br> - {{property_prefix("-webkit")}}</p> - </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 Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>5<br> - {{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> |