initial commit

1 files changed, 232 insertions, 0 deletions

diff --git a/files/ru/web/css/_colon_checked/index.html b/files/ru/web/css/_colon_checked/index.html
new file mode 100644
index 0000000000..66316fe2d2
--- /dev/null
+++ b/files/ru/web/css/_colon_checked/index.html
@@ -0,0 +1,232 @@
+---
+title: ':checked'
+slug: 'Web/CSS/:checked'
+tags:
+  - CSS
+  - Макет
+  - Псевдоклассы
+  - Руководство
+translation_of: 'Web/CSS/:checked'
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Псевдо-классы" title="Псевдоклассы">псевдоклассы</a> <strong><code>:checked</code></strong> CSS находит любые элементы <strong>radio </strong>(<code>&lt;input type="radio"&gt;</code>), <strong>checkbox </strong>(<code>&lt;input type="checkbox"&gt;</code>) или <strong>option</strong> ({{ HTMLElement("option") }} внутри {{ HTMLElement("select") }}), которые выбраны или включены. Пользователь может изменить это состояние, нажав на элемент, или выбрав другое значение, в этом случае <code>:checked</code> повторно не применится к элементу, а сохранится.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: css">input:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}
+</pre>
+
+<h3 id="Examples" name="Examples">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">element:checked { стили }</pre>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Example_selectors" name="Example_selectors">Примеры селекторов</h3>
+
+<pre class="brush: css">/* любой "кликабельный" элемент */
+:checked {
+  width: 50px;
+  height: 50px;
+}
+
+/* только радиокнопки */
+input[type="radio"]:checked {
+  margin-left: 25px;
+}
+
+/* только чекбоксы */
+input[type="checkbox"]:checked {
+  display: none;
+}
+
+/* только элементы option */
+option:checked {
+  color: red;
+}
+</pre>
+
+<dl>
+ <dt><code>input[type="radio"]:checked</code></dt>
+ <dd>Находит, все отмеченные на странице, радиокнопки</dd>
+</dl>
+
+<dl>
+ <dt><code>input[type="checkbox"]:checked</code></dt>
+ <dd>Находит все отмеченные чекбоксы</dd>
+ <dt><code>option:checked</code></dt>
+ <dd>Находит все отмеченные option</dd>
+</dl>
+
+<h3 id="Использование_скрытых_чекбоксов_чтобы_хранить_некоторые_булевские_значения_в_CSS">Использование скрытых чекбоксов, чтобы хранить некоторые булевские значения в CSS</h3>
+
+<p>Пседокласс <code>:checked</code> применяется к скрытым чекбоксам в начале вашей страницы, которые могут использоваться, чтобы хранить некоторые динамические значения, используемые в CSS правилах. Следующий пример показывает, как скрывать/показывать некоторые расширяемые элементы, нажимая на кнопку (<a class="internal" href="/@api/deki/files/6246/=expandable-elements.html" title="Expandable elements through the :checked pseudoclass">открыть это демо</a>).</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="utf-8" /&gt;
+&lt;title&gt;Расширяемые элементы&lt;/title&gt;
+&lt;style&gt;
+#expand-btn {
+    margin: 0 3px;
+    display: inline-block;
+    font: 12px / 13px "Lucida Grande", sans-serif;
+    text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
+    padding: 3px 6px;
+    border: 1px solid rgba(0, 0, 0, 0.6);
+    background-color: #969696;
+    cursor: default;
+    border-radius: 3px;
+    box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
+}
+
+#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {
+    background: #B5B5B5;
+    box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
+}
+
+#isexpanded, .expandable {
+    display: none;
+}
+
+#isexpanded:checked ~ * tr.expandable {
+    display: table-row;
+    background: #cccccc;
+
+}
+
+#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
+    display: block;
+    background: #cccccc;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;input type="checkbox" id="isexpanded" /&gt;
+
+&lt;h1&gt;Расширяемые элементы&lt;/h1&gt;
+&lt;table&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;&lt;th&gt;Колонка #1&lt;/th&gt;&lt;th&gt;Колонка #2&lt;/th&gt;&lt;th&gt;Колонка #3&lt;/th&gt;&lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+        &lt;tr class="expandable"&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;/tr&gt;
+        &lt;tr&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;/tr&gt;
+        &lt;tr&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;/tr&gt;
+        &lt;tr class="expandable"&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;/tr&gt;
+        &lt;tr class="expandable"&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;td&gt;[текст ячейки]&lt;/td&gt;&lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;p&gt;[какой-то текст примера]&lt;/p&gt;
+&lt;p&gt;&lt;label for="isexpanded" id="expand-btn"&gt;Показать скрытые элементы&lt;/label&gt;&lt;/p&gt;
+&lt;p class="expandable"&gt;[другой текст для примера]&lt;/p&gt;
+&lt;p&gt;[какой-то текст примера]&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Использование_скрытых_чекбоксов_чтобы_хранить_некоторые_булевские_значения_в_CSS', '', '', '', 'Web/CSS/:checked') }}</p>
+
+<h3 id="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values" name="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values">Использование скрытых радиокнопок, чтобы хранить некоторые булевские значения в CSS</h3>
+
+<p>Также вы можете псевдокласс <code>:checked</code>, чтобы скрывать радиокнопки для того, чтобы создать, например, <strong>галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши</strong>. Загрузите <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">это демо</a> как вариант решения.</p>
+
+<div class="note"><strong>Замечание:</strong> Для аналагично эффекта, но основанного на псевдоклассе <a class="internal" href="/ru/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a> и без скрытых радиокнопок, смотрите <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">это демо</a>, взятое со страницы <a class="internal" href="/ru/docs/CSS/:hover" title="CSS/:hover">:hover</a>.</div>
+
+<h2 id="Specifications" name="Specifications">Спецификации</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-checked', ':checked') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Определяет семантику в HTML.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Ссылается к Селекторам Уровня 3.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Определяет псевдокласс, но не семантику.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</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>1.0</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</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>2.1</td>
+   <td>{{ CompatGeckoMobile(1.0) }}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>