initial commit

1 files changed, 249 insertions, 0 deletions

diff --git a/files/ru/web/css/_colon_is/index.html b/files/ru/web/css/_colon_is/index.html
new file mode 100644
index 0000000000..57985074be
--- /dev/null
+++ b/files/ru/web/css/_colon_is/index.html
@@ -0,0 +1,249 @@
+---
+title: ':is() (:matches(), :any())'
+slug: 'Web/CSS/:is'
+translation_of: 'Web/CSS/:is'
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> <code>:matches()</code> был переименован в <code>:is()</code> в <a href="https://github.com/w3c/csswg-drafts/issues/3258" style="white-space: nowrap;">CSSWG issue #3258</a>.</p>
+</div>
+
+<p><strong><code>:is()</code></strong> это функция <a href="/ru/docs/Web/CSS">псевдо-класс CSS</a> принимающая список селекторов как аргумент, и выбирает любой элемент, который может быть выбран одним из селекторов в этом списке. Это полезно при переписи огромных селекторов в более компактную форму.</p>
+
+<p>Заметьте, что в данный момент бразуеры поддерживают ее функционал как <code>:matches()</code>, или даже как более старый, префиксный псевдо-класс — <code>:any()</code>, включая старые версии Chrome, Firefox, и Safari. <code>:any()</code> работает точно таким же образом как и <code>:matches()</code>/<code>:is()</code>, за исключением того, что  <code>:any()</code> требует постановку префиксов и не поддерживает <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">комплексные селекторы</a>.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* Пример приведенный выше эквивалентен следующему */
+header p:hover,
+main p:hover,
+footer p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* Обратно-совместимая версия с:-*-any() и :matches()
+   (Это невозможно сгруппировать селекторы в одно правило,
+    так как присутствие одного неверного селектора аннулирует все правило.) */
+:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Кроссбраузерный_пример">Кроссбраузерный пример</h3>
+
+<pre class="brush: html notranslate">&lt;header&gt;
+  &lt;p&gt;Это мой параграф в шапке&lt;/p&gt;
+&lt;/header&gt;
+
+&lt;main&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;p&gt;Это первый&lt;/p&gt;&lt;p&gt;пункт списка&lt;/p&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;p&gt;Это второй&lt;/p&gt;&lt;p&gt;пункт списка&lt;/p&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/main&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;Это мой параграф в подвале&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<pre class="brush: css notranslate">:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+</pre>
+
+<pre class="brush: js notranslate">let matchedItems;
+
+try {
+  matchedItems = document.querySelectorAll(':is(header, main, footer) p');
+} catch(e) {
+  try {
+    matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
+  } catch(e) {
+    try {
+      matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
+    } catch(e) {
+      try {
+        matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
+      } catch(e) {
+        console.log('Your browser doesn\'t support :is(), :matches(), or :any()');
+      }
+    }
+  }
+}
+
+matchedItems.forEach(applyHandler);
+
+function applyHandler(elem) {
+  elem.addEventListener('click', function(e) {
+    alert('This paragraph is inside a ' + e.target.parentNode.nodeName);
+  });
+}</pre>
+
+<p>{{EmbedLiveSample("Cross-browser_example", "100%", 300)}}</p>
+
+<h3 id="Упрощение_списка_селекторов">Упрощение списка селекторов</h3>
+
+<p>Псевдо-класс <code>:is()</code> может великолепно упрощать ваши CSS селекторы. К примеру, следующий CSS:</p>
+
+<pre class="brush: css notranslate">/* 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 notranslate">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}</pre>
+
+<h3 id="Упрощение_селекторов_разделов">Упрощение селекторов разделов</h3>
+
+<p>Псевдо-класс <code>:is()</code>  особенно полезен  при работе с <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">заголовками и разделами</a> HTML5. C тех пор как {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} обычно используют вместе, без <code>:is()</code>, стилизовать их, чтобы они соответствовали друг друг, может быть не просто.</p>
+
+<p>К примеру, без <code>:is()</code>, стилизовать все {{HTMLElement("h1")}} элементы на разных уровнях может бы очень сложно:</p>
+
+<pre class="brush: css notranslate">/* Уровень 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>:is()</code>, как видно, это гораздо легче:</p>
+
+<pre class="brush: css notranslate">/* Уровень 0 */
+h1 {
+  font-size: 30px;
+}
+/* Уровень 1 */
+:is(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Уровень 2 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Уровень 3 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 15px;
+}</pre>
+
+<h3 id="Как_избежать_аннулирования_списка_селекторов">Как избежать аннулирования списка селекторов</h3>
+
+<p>В отличие от <a href="/ru/docs/Web/CSS/Selector_list">списка селекторов</a>, псевдо-класс <code>:is()</code> не аннулируется, когда из селекторов, попавший туда не поддерживается бразуером.</p>
+
+<pre class="brush: css notranslate">:is(:valid, :unsupported) {
+  ...
+}</pre>
+
+<p>Будет по прежнему определяться правильно и соответствовать <code>:valid</code> даже в браузерах, которые не поддерживают <code>:unsupported</code>, в то время как:</p>
+
+<pre class="brush: css notranslate">:valid, :unsupported {
+  ...
+}</pre>
+
+<p>Будет проигнорировано бразуерами, которые не поддерживают <code>:unsupported</code> даже если они поддерживают <code>:valid</code>.</p>
+
+<h3 id="Разница_между_is_и_where">Разница между :is() и :where()</h3>
+
+<p>Разница между этими двумя, в том что <code>:is()</code> учитывает спецификацию общего селектора (он принимает специфику своего самого конкретного аргумента), в то же время <code><a href="/en-US/docs/Web/CSS/:where">:where()</a></code> имеет значение спецификации равное 0. Это можно увидеть на <a href="/en-US/docs/Web/CSS/:where#Examples">примере на странице документации <code>:where()</code> </a>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#matches-pseudo", ":is()")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("css.selectors.is")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - Like <code>:is()</code>, but with 0 <a href="/en-US/docs/Web/CSS/Specificity">specificity</a>.</li>
+ <li><a href="/ru/docs/Web/CSS/Selector_list">Список селекторов</a></li>
+ <li><a href="/ru/docs/Web/Web_Components">Веб компоненты</a></li>
+</ul>