initial commit

1 files changed, 172 insertions, 0 deletions

diff --git a/files/ru/web/css/visibility/index.html b/files/ru/web/css/visibility/index.html
new file mode 100644
index 0000000000..933c5ddbdf
--- /dev/null
+++ b/files/ru/web/css/visibility/index.html
@@ -0,0 +1,172 @@
+---
+title: visibility
+slug: Web/CSS/visibility
+tags:
+  - CSS
+  - Web
+  - Расположение CSS
+  - Свойства CSS
+  - Шаблон
+translation_of: Web/CSS/visibility
+---
+<div>{{CSSRef}}</div>
+
+<p>Свойство <strong><code>visibility</code></strong> скрывает или показывает элемент без изменения разметки документа. Также скрывает строки и столбцы {{HTMLElement("table")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/visibility.html")}}</div>
+
+
+
+<p>Чтобы скрыть и удалить элемент из разметки, установите свойству {{cssxref("display")}} значение <code>none</code>, вместо использования <code>visibility</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* Значения */
+visibility: visible;
+visibility: hidden;
+visibility: collapse;
+
+/* Глобальные значения */
+visibility: inherit;
+visibility: initial;
+visibility: unset;
+</pre>
+
+<p>Свойство <code>visibility</code> указывается в качестве одного из значений ниже.</p>
+
+<h3 id="Значения">Значения</h3>
+
+<ul>
+ <li>Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью <code>{{Cssxref("display")}}: none</code> примененного к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы.</li>
+ <li>Для XUL элементов размер всегда равен 0, независимо от других стилей, влияющих на размер, хотя отступы продолжают учитываться.</li>
+ <li>Для других элементов <code>collapse</code> обрабатывается также, как <code>hidden</code></li>
+</ul>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Значение по умолчанию, элемент виден.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Элемент не виден (полностью прозрачный, ничего не отображается), но продолжает влиять на шаблон. Потомки элемента могут быть показаны с помощью свойства <code>visibility:visible</code>. Элемент не может получить focus (например, при навигации с помощью <a href="/ru/docs/Web/HTML/Global_attributes/tabindex">tabindex</a>).</dd>
+ <dt><code>collapse</code></dt>
+</dl>
+
+<h3 id="Синтаксис_2">Синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Интерполяция">Интерполяция</h2>
+
+<p>Значения видимости изменяются между <em>видим</em> и <em>не видим</em>. Интерполяция будет, если одно из начальных или конечных значений будет видимо или нет. Если одно из значений <code>visible</code>, интерполируется как дискретный шаг, где значения временной функции от <code>0</code> до <code>1</code> для <code>visible</code> и другие значения временной функции (которые происходят только в начале/конце перехода, или как результат функции <code>cubic-bezier()</code> cо значениями вне [0, 1]) ближе к конечной точке.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Базовый_пример">Базовый пример</h3>
+
+<h4 id="HTML">HTML </h4>
+
+<pre class="brush: html">&lt;p class="visible"&gt;Первый параграф виден.&lt;/p&gt;
+&lt;p class="not-visible"&gt;Второй параграф не виден.&lt;/p&gt;
+&lt;p class="visible"&gt;Третий параграф также виден. Заметь, второй параграф занимает место.&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.visible {
+  visibility: visible;
+}
+
+.not-visible {
+  visibility: hidden;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Базовый_пример')}}</p>
+
+<h3 id="Пример_с_таблицой">Пример с таблицой</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre><code>&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;1.1&lt;/td&gt;
+    &lt;td class="collapse"&gt;1.2&lt;/td&gt;
+    &lt;td&gt;1.3&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr class="collapse"&gt;
+    &lt;td&gt;2.1&lt;/td&gt;
+    &lt;td&gt;2.2&lt;/td&gt;
+    &lt;td&gt;2.3&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;3.1&lt;/td&gt;
+    &lt;td&gt;3.2&lt;/td&gt;
+    &lt;td&gt;3.3&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</code></pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre><code>.collapse {
+  visibility: collapse;
+}
+
+table {
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid gray;
+}</code></pre>
+
+<p>{{EmbedLiveSample('Пример_с_таблицой')}}</p>
+
+<h2 id="Соображения_доступности">Соображения доступности</h2>
+
+<p>Использование <code>visibility</code> со значением <code>hidden</code> на элементе удалит его из <a href="/ru/docs/Learn/%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D1%8C/What_is_accessibility#%D0%A1%D0%BF%D0%B5%D1%86%D0%B8%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_API_%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%B0">дерева доступности</a>. Это приведёт к тому, что элемент и все его дочерние элементы больше не будут показаны в скринридерах.</p>
+
+<h2 id="Примечания">Примечания</h2>
+
+<ul>
+ <li>Поддержка <code>visibility:collapse</code> отсутствует или частично не работает в некоторых современных браузерах. Во многих случаях может не корректно работать <code>visibility:hidden</code> со столбцами и строками.</li>
+ <li><code>visibility:collapse</code> может изменить шаблон таблицы, если таблица содержит вложенные таблицы, пока <code>visibility:visible</code> не указан явно для вложенной таблицы.</li>
+</ul>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Определяет значение <code>collapse</code> применимым к flex элементам</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-visibility-property', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет <code>visibility</code> как анимирумое.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.properties.visibility")}}</p>