From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:42:52 -0500
Subject: initial commit

---
 files/ru/web/css/_colon_out-of-range/index.html | 140 ++++++++++++++++++++++++
 1 file changed, 140 insertions(+)
 create mode 100644 files/ru/web/css/_colon_out-of-range/index.html

(limited to 'files/ru/web/css/_colon_out-of-range')

diff --git a/files/ru/web/css/_colon_out-of-range/index.html b/files/ru/web/css/_colon_out-of-range/index.html
new file mode 100644
index 0000000000..2d84e58b58
--- /dev/null
+++ b/files/ru/web/css/_colon_out-of-range/index.html
@@ -0,0 +1,140 @@
+---
+title: ':out-of-range'
+slug: 'Web/CSS/:out-of-range'
+tags:
+  - CSS
+  - Псевдоклассы
+  - Руководство
+translation_of: 'Web/CSS/:out-of-range'
+---
+<div>{{CSSRef}}</div>
+
+<div></div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:out-of-range</code> находит элементы, значение которых находится вне диапазона их ограничений. Он позволяет странице показывать, когда значение элемента находится вне допустимого диапазона. Значение будет вне диапазона, если оно меньше или больше, чем минимальное и максимальное значения.</p>
+
+<div class="note"><strong>Замечание:</strong> этот псевдокласс применяется только к элементам с заданным диапазоном ограничений. При отсутствии такого ограничения, элемент не может быть ни "в зоне допустимых значений", ни "вне диапазона".</div>
+
+<h2 id="Пример" name="Пример">Пример</h2>
+
+<div id="example">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html; highlight:[3]">&lt;form action="" id="form1"&gt;
+    &lt;ul&gt;Приминаются значения между 1 и 10.
+        &lt;li&gt;
+            &lt;input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"&gt;
+            &lt;label for="value1"&gt;Your value is &lt;/label&gt;
+        &lt;/li&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[5]">li {
+    list-style: none;
+    margin-bottom: 1em;
+}
+input {
+    border: 1px solid black;
+}
+input:in-range {
+    background-color: rgba(0, 255, 0, 0.25);
+}
+input:out-of-range {
+    background-color: rgba(255, 0, 0, 0.25);
+    border: 2px solid red;
+}
+input:in-range + label::after {
+    content:' НОРМАЛЬНОЕ';
+}
+input:out-of-range + label::after {
+    content:'вне диапазона!';
+}</pre>
+</div>
+
+<div>{{EmbedLiveSample('Пример',600,140)}}</div>
+
+<div></div>
+
+<h2 id="Спецификации"><span>Спецификации</span></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('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Определяет, когда <code>:out-of-range</code> находит элементы в HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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>Поддержка &lt;input&gt;</td>
+   <td>10.0</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>11.0</td>
+   <td>5.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Поддержка &lt;input&gt;</td>
+   <td>2.3</td>
+   <td>{{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref(":in-range")}}</li>
+ <li><a href="/ru/docs/Web/Guide/HTML/Forms/Data_form_validation">Руководство валидации данных в формах</a></li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf