initial commit

1 files changed, 186 insertions, 0 deletions

diff --git a/files/ru/web/css/_colon_invalid/index.html b/files/ru/web/css/_colon_invalid/index.html
new file mode 100644
index 0000000000..3c8c6c3051
--- /dev/null
+++ b/files/ru/web/css/_colon_invalid/index.html
@@ -0,0 +1,186 @@
+---
+title: ':invalid'
+slug: 'Web/CSS/:invalid'
+tags:
+  - Псевдо-классы
+translation_of: 'Web/CSS/:invalid'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:invalid</code> находит любые {{ HTMLElement("input") }} или {{ HTMLElement("form") }} элементы, контент которых не проходит <a href="/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation" title="en/HTML/HTML5/Constraint_validation">валидацию</a>, в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что позволяет пользователю видеть и исправлять ошибки.</p>
+
+<p>По умолчанию, Gecko не применяет стили к псевдо-классу <code>:invalid</code>. Однако, применяет стили (красное "свечение", используя свойство {{ Cssxref("box-shadow") }}) к псевдо-классу {{ Cssxref(":-moz-ui-invalid") }}, который применяется в подгруппе случаев для <code>:invalid</code>.</p>
+
+<p>Вы можете отключить свечение, используя следующий CSS или полностью изменить внешний вид некорректных полей.</p>
+
+<pre class="brush: css">:invalid {
+  box-shadow: none;
+}
+
+:-moz-submit-invalid {
+  box-shadow: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow:none;
+}
+</pre>
+
+<h2 id="Замечания">Замечания</h2>
+
+<h4 id="Радиокнопки">Радиокнопки</h4>
+
+<p>Если любая из радиокнопок в группе (т.е., с одинаковым атрибутом <code>name</code>) имеет атрибут <code>required</code>, псевдо-класс <code>:invalid</code> применяется ко всем из них, если ни одна из кнопок группы не выбрана.</p>
+
+<h2 id="Example2" name="Example2">Пример</h2>
+
+<p>Этот пример представляет собой простую форму, цвета элементов которой зелёные, когда данные корректные, и красные, когда нет.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label&gt;Введите URL:&lt;/label&gt;
+  &lt;input type="url" /&gt;
+  &lt;br /&gt;
+  &lt;br /&gt;
+  &lt;label&gt;Введите эл. почту:&lt;/label&gt;
+  &lt;input type="email" required/&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}</pre>
+
+<p>{{ EmbedLiveSample('Example2',600,150) }}</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('HTML WHATWG', '#selector-invalid', ':invalid') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-invalid', ':invalid') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Определяет семантику в HTML и ограничения проверки.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-validity', ':invalid') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Определяет псевдо-класс, но не семантику.</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>Базовая поддержка ({{ HTMLElement("input") }})</td>
+   <td>10.0</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>10</td>
+   <td>10.0</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>Применяется к {{ HTMLElement("form") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("13") }}</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>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.0</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>Применяется к {{ HTMLElement("form") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("13") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ cssxref(":valid") }}</li>
+ <li>{{ cssxref(":-moz-submit-invalid") }}</li>
+ <li>{{ cssxref(":required") }}</li>
+ <li>{{ cssxref(":optional") }}</li>
+</ul>
+
+<p>{{ languages( { "fr": "fr/CSS/:invalid" }) }}</p>