initial commit

6 files changed, 894 insertions, 0 deletions

diff --git a/files/ru/web/css/@media/index.html b/files/ru/web/css/@media/index.html
new file mode 100644
index 0000000000..93f12082be
--- /dev/null
+++ b/files/ru/web/css/@media/index.html
@@ -0,0 +1,384 @@
+---
+title: '@media'
+slug: Web/CSS/@media
+translation_of: Web/CSS/@media
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>At-правило <code>@media</code> в <a href="/ru/docs/Web/CSS">CSS</a> связывает набор операторов, ограниченных фигурными скобками, в CSS блок, применяется при соблюдении условия одного или нескольких <a href="/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиазапросов</a>.</p>
+
+<div class="blockIndicator note">
+<p>В JavaScript, at-правило <code>@media</code> может быть получено с помощью {{domxref("CSSMediaRule")}}, интерфейса объектной модели CSS.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<p>At-правило <code>@media</code> можно разместить не только на верхнем уровне CSS, но и внутри любого фрагмента <a href="/ru/docs/Web/CSS/At-rule#Conditional_group_rules">условной группы-правил</a>.</p>
+
+<pre class="brush: css"><code>/* На верхнем уровне кода */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* Вложено в другое условное at-правило */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}</code></pre>
+
+<p>Для рассмотрения синтаксиса медиазапросов, см. <a href="/ru/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax">Использование медиазапросов</a>.</p>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<p>A <code>&lt;media-query&gt;</code> is composed of a optional media type and/or a number of media features.</p>
+
+<h2 id="Media_types" name="Media_types">Типы</h2>
+
+<dl>
+ <dt>all</dt>
+ <dd>Подходит для всех устройств.</dd>
+ <dt>print</dt>
+ <dd>Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on <a href="/en/CSS/Paged_Media" title="https://developer.mozilla.org/en/CSS/Paged_Media">paged media</a>, and the <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">media section of the Getting Started tutorial</a> for information about formatting issues that are specific to paged media.</dd>
+ <dt>screen</dt>
+ <dd>Предназначен в первую очередь для цветных компьютерных экранов.</dd>
+ <dt>speech</dt>
+ <dd>Предназначен для синтезаторов речи.</dd>
+</dl>
+
+<div class="note"><strong>Примечание:</strong> CSS2.1 и Media Queries 3 определили несколько дополнительных зачений (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>), но они устарели в <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> и не рекомендуется к использованию.</div>
+
+<h2 id="Media_features" name="Media_features">Media Features</h2>
+
+<p>Each <em>media feature</em> tests for one specific feature of the browser or device.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>Имя</th>
+   <th>Summary</th>
+   <th>Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/width"><code>width</code></a></td>
+   <td>Viewport width</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/height"><code>height</code></a></td>
+   <td>Viewport height</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/aspect-ratio"><code>aspect-ratio</code></a></td>
+   <td>Width-to-height aspect ratio of the viewport</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/orientation"><code>orientation</code></a></td>
+   <td>Orientation of the viewport</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a></td>
+   <td>Pixel density of the output device</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/scan"><code>scan</code></a></td>
+   <td>Scanning process of the output device</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/grid"><code>grid</code></a></td>
+   <td>Is the device a grid or bitmap?</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/update-frequency"><code>update-frequency</code></a></td>
+   <td>How quickly (if at all) can the output device modify the appearance of the content</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/overflow-block"><code>overflow-block</code></a></td>
+   <td>How does the output device handle content that overflows the viewport along the block axis?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/overflow-inline"><code>overflow-inline</code></a></td>
+   <td>Can content that overflows the viewport along the inline axis be scrolled?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/color"><code>color</code></a></td>
+   <td>Number of bits per color component of the output device, or zero if the device isn't color.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/color-index"><code>color-index</code></a></td>
+   <td>Number of entries in the output device's color lookup table, or zero if the device does not use such a table.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/@media/display-mode">display-mode</a></code></td>
+   <td>The display mode of the application, as specified in the web app manifest's <a href="/en-US/docs/Web/Manifest#display">display member</a>.</td>
+   <td>Defined in the <a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest spec</a>.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/monochrome"><code>monochrome</code></a></td>
+   <td>Bits per pixel in the output device's monochrome frame buffer, or 0 if the device is not monochrome.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/inverted-colors"><code>inverted-colors</code></a></td>
+   <td>Is the user agent or underlying OS inverting colors?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code></a></td>
+   <td>Is the primary input mechanism a pointing device, and if so, how accurate is it?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/hover"><code>hover</code></a></td>
+   <td>Does the primary input mechanism allow the user to hover over elements?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/any-pointer"><code>any-pointer</code></a></td>
+   <td>Is any available input mechanism a pointing device, and if so, how accurate is it?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/any-hover"><code>any-hover</code></a></td>
+   <td>Does any available input mechanism allow the user to hover over elements?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/light-level"><code>light-level</code></a></td>
+   <td>Current ambient light level</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/scripting"><code>scripting</code></a></td>
+   <td>Is scripting (e.g. JavaScript) available?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-width"><code>device-width</code></a> {{obsolete_inline}}</td>
+   <td>Width of the rendering surface of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-height"><code>device-height</code></a> {{obsolete_inline}}</td>
+   <td>Height of the rendering surface of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-aspect-ratio"><code>device-aspect-ratio</code></a> {{obsolete_inline}}</td>
+   <td>Width-to-height aspect ratio of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio"><code>-webkit-device-pixel-ratio</code></a> {{non-standard_inline}}</td>
+   <td>Number of physical device pixels per CSS pixel</td>
+   <td>Nonstandard; WebKit/Blink-specific. If possible, use the <a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a> media feature instead.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-3d"><code>-webkit-transform-3d</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS 3D {{cssxref("transform")}}s supported?</td>
+   <td>Nonstandard; WebKit/Blink-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-2d"><code>-webkit-transform-2d</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS 2D {{cssxref("transform")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS {{cssxref("transition")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS {{cssxref("animation")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: css">@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+@media only screen
+  and (min-device-width: 320px)
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+    body { line-height: 1.4 }
+}
+</pre>
+
+<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('Compat', '#css-media-queries', 'CSS Media Queries')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Стандартизация <code>-webkit-device-pixel-ratio</code> и <code>-webkit-transform-3d</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Определяет базовый синтаксис правила <code>@media</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>
+    <p>Добавлены <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>light-level</code>, <code>update-frequency</code>, <code>overflow-block</code> и <code>overflow-inline</code>.<br>
+     Исключены все media типы за исключением <code>screen</code>, <code>print</code>, <code>speech</code>, и <code>all</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Нет изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
+   <td>{{Spec2('CSS2.1')}}</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>Базовая поддержка(<code>all</code>, <code>print</code>, <code>screen</code>)</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop(1.7) }}</td>
+   <td>6.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+  <tr>
+   <td><code>speech</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.2</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Media features</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop(1.7) }}</td>
+   <td>9.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code> media feature</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(47) }}</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>Базовая поддержка (<code>all</code>, <code>print</code>, <code>screen</code>)</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile(1.7) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>speech</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Media features</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile(1.7) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code> media feature</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Media queries</a></li>
+ <li>The CSSOM {{ domxref("CSSMediaRule") }} associated with this at-rule.</li>
+</ul>
diff --git a/files/ru/web/css/@media/inverted-colors/index.html b/files/ru/web/css/@media/inverted-colors/index.html
new file mode 100644
index 0000000000..f56c90108b
--- /dev/null
+++ b/files/ru/web/css/@media/inverted-colors/index.html
@@ -0,0 +1,83 @@
+---
+title: inverted-colors
+slug: Web/CSS/@media/inverted-colors
+tags:
+  - '@media'
+  - CSS
+  - Media Queries
+  - Reference
+  - media feature
+translation_of: Web/CSS/@media/inverted-colors
+---
+<div>{{cssref}}</div>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиа функция</a> <code><strong>inverted-colors</strong></code> может использоваться для проверки, инвертирует ли {{glossary("user agent")}} или ОС цвета.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Функция <code>inverted-colors</code> указана в качестве значения ключевого слова, выбранного из списка ниже.</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>Цвета отображаются нормально.</p>
+ </dd>
+ <dt><code>inverted</code></dt>
+ <dd>Все пиксели в отображаемой области были инвертированы.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Если вы используете инвертированные цвета, этот текст должен быть синим по белому (инверсия желтого по черному). Если нет, он должен быть красным на светло-сером.&lt;/p&gt;
+&lt;p&gt;Если текст серого цвета, ваш браузер не поддерживает медиа-функцию `inverted-colors`.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  color: gray;
+}
+
+@media (inverted-colors: inverted) {
+  p {
+    background: black;
+    color: yellow;
+  }
+}
+
+@media (inverted-colors: none) {
+  p {
+    background: #eee;
+    color: red;
+  }
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<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('CSS4 Media Queries', '#inverted', 'inverted-colors')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Отложено до Media Queries Level 5.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.inverted-colors")}}</p>
diff --git a/files/ru/web/css/@media/orientation/index.html b/files/ru/web/css/@media/orientation/index.html
new file mode 100644
index 0000000000..723c964b8f
--- /dev/null
+++ b/files/ru/web/css/@media/orientation/index.html
@@ -0,0 +1,90 @@
+---
+title: Ориентация
+slug: Web/CSS/@media/orientation
+translation_of: Web/CSS/@media/orientation
+---
+<div>{{cssref}}</div>
+
+<p><a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">медиа-функции</a> <strong><code>orientation</code></strong> может использоваться для проверки ориентации области {{glossary("просмотра")}} (или поля страницы для <a href="/en-US/docs/Web/CSS/Paged_media">медийных страниц</a>).</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Эта функция не соответствует ориентации <em>устройства</em>. Открытие программной клавиатуры на многих устройствах в книжной ориентации приведет к тому, что область просмотра станет шире, чем высокая, в результате чего браузер будет использовать альбомные стили вместо портретного.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Функция <code>orientation</code> указывается в качестве значения ключевого слова, выбранного из списка ниже.</p>
+
+<h3 id="Значения_ключевых_слов">Значения ключевых слов</h3>
+
+<dl>
+ <dt><code>portrait</code></dt>
+ <dd>Окно просмотра находится в портретной ориентации, то есть высота больше или равна ширине.</dd>
+ <dt><code>landscape</code></dt>
+ <dd>Окно просмотра находится в альбомной ориентации, то есть ширина больше высоты.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Вставка 1&lt;/div&gt;
+&lt;div&gt;Вставка 2&lt;/div&gt;
+&lt;div&gt;Вставка 3&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">body {
+  display: flex;
+}
+
+div {
+  background: yellow;
+}
+
+@media (orientation: landscape) {
+  body {
+    flex-direction: row;
+  }
+}
+
+@media (orientation: portrait) {
+  body {
+    flex-direction: column;
+  }
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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 Media Queries', '#orientation', 'orientation')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Бе изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.orientation")}}</p>
diff --git a/files/ru/web/css/@media/prefers-color-scheme/index.html b/files/ru/web/css/@media/prefers-color-scheme/index.html
new file mode 100644
index 0000000000..d857696181
--- /dev/null
+++ b/files/ru/web/css/@media/prefers-color-scheme/index.html
@@ -0,0 +1,96 @@
+---
+title: prefers-color-scheme
+slug: Web/CSS/@media/prefers-color-scheme
+tags:
+  - '@media'
+  - CSS
+  - Reference
+  - prefers-color-scheme
+translation_of: Web/CSS/@media/prefers-color-scheme
+---
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиа функция</a> <strong><code>prefers-color-scheme</code></strong> может использоваться для определения того, светлую или тёмную тему использует пользователь в операционной системе.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>Указывает, что пользователь не сделал никаких предпочтений, известных системе. Значение этого ключевого слова оценивается как <code>false</code> в <a href="https://drafts.csswg.org/mediaqueries-5/#boolean-context">логическом контексте</a>.</dd>
+ <dt><code><dfn>light</dfn></code></dt>
+ <dd>Указывает, что пользователь выбрал светлую тему в операционной системе.</dd>
+ <dt><code><dfn>dark</dfn></code></dt>
+ <dd>Указывает, что пользователь выбрал тёмную тему в операционной системе.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В этом примере используется элемент с черным фоном и белым текстом, если пользователь выбрал светлую тему в операционной системе, то цвета будут инвертированы.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="day"&gt;Day (initial)&lt;/div&gt;
+&lt;div class="day light-scheme"&gt;Day (changes in light scheme)&lt;/div&gt;
+&lt;div class="day dark-scheme"&gt;Day (changes in dark scheme)&lt;/div&gt; &lt;br&gt;
+
+&lt;div class="night"&gt;Night (initial)&lt;/div&gt;
+&lt;div class="night light-scheme"&gt;Night (changes in light scheme)&lt;/div&gt;
+&lt;div class="night dark-scheme"&gt;Night (changes in dark scheme)&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+@media (prefers-color-scheme: dark) {
+  .day.dark-scheme   { background:  #333; color: white; }
+  .night.dark-scheme { background: black; color:  #ddd; }
+}
+
+@media (prefers-color-scheme: light) {
+  .day.light-scheme   { background: white; color:  #555; }
+  .night.light-scheme { background:  #eee; color: black; }
+}
+
+.day, .night {
+  display: inline-block;
+  padding: 1em;
+  width: 7em;
+  height: 2em;
+  vertical-align: middle;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Примеры")}}</p>
+
+<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>
+    <p>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}</p>
+   </td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("css.at-rules.media.prefers-color-scheme")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode">Редизайн вашего продукта и сайта для тёмного режима</a>(en)</li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}</div>
diff --git a/files/ru/web/css/@media/prefers-reduced-motion/index.html b/files/ru/web/css/@media/prefers-reduced-motion/index.html
new file mode 100644
index 0000000000..b7f007c5a9
--- /dev/null
+++ b/files/ru/web/css/@media/prefers-reduced-motion/index.html
@@ -0,0 +1,158 @@
+---
+title: prefers-reduced-motion
+slug: Web/CSS/@media/prefers-reduced-motion
+tags:
+  - '@media'
+  - CSS
+  - Media Queries
+  - Reference
+  - media feature
+translation_of: Web/CSS/@media/prefers-reduced-motion
+---
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиа функция</a> <code><strong>prefers-reduced-motion</strong></code> может использоваться для определения того, запросил ли пользователь, чтобы ОС минимизировала количество анимации или движения, которые она использует.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>Указывает, что пользователь не сделал никаких предпочтений, известных системе.</dd>
+ <dt><code><dfn>reduce</dfn></code></dt>
+ <dd>Указывает, что пользователь уведомил ОС, что он предпочитает интерфейс, который минимизирует количество движения или анимации, предпочтительно до точки, где удаляются все несущественные движения.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В этом примере присутствует раздражающая анимация, если вы не включите «Уменьшить движение» в настройках доступности.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="animation"&gt;animated box&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.animation {
+  -webkit-animation: vibrate 0.3s linear infinite both;
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+    -webkit-animation: none;
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">.animation {
+  background-color: rebeccapurple;
+  color: #fff;
+  font: 1.2em Helvetica, arial, sans-serif;
+  width: 200px;
+  padding: 1em;
+  border-radius: 1em;
+  text-align: center;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2018-9-2 13:47:0
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation vibrate-1
+ * ----------------------------------------
+ */
+@-webkit-keyframes vibrate {
+  0% {
+    -webkit-transform: translate(0);
+            transform: translate(0);
+  }
+  20% {
+    -webkit-transform: translate(-2px, 2px);
+            transform: translate(-2px, 2px);
+  }
+  40% {
+    -webkit-transform: translate(-2px, -2px);
+            transform: translate(-2px, -2px);
+  }
+  60% {
+    -webkit-transform: translate(2px, 2px);
+            transform: translate(2px, 2px);
+  }
+  80% {
+    -webkit-transform: translate(2px, -2px);
+            transform: translate(2px, -2px);
+  }
+  100% {
+    -webkit-transform: translate(0);
+            transform: translate(0);
+  }
+}
+@keyframes vibrate {
+  0% {
+    -webkit-transform: translate(0);
+            transform: translate(0);
+  }
+  20% {
+    -webkit-transform: translate(-2px, 2px);
+            transform: translate(-2px, 2px);
+  }
+  40% {
+    -webkit-transform: translate(-2px, -2px);
+            transform: translate(-2px, -2px);
+  }
+  60% {
+    -webkit-transform: translate(2px, 2px);
+            transform: translate(2px, 2px);
+  }
+  80% {
+    -webkit-transform: translate(2px, -2px);
+            transform: translate(2px, -2px);
+  }
+  100% {
+    -webkit-transform: translate(0);
+            transform: translate(0);
+  }
+}
+</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<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('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.prefers-reduced-motion")}}</p>
+
+<h2 id="See_also" name="See_also"><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight#See_also">Смотрите также</a></h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An introduction to the reduced motion media query</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}</div>
diff --git a/files/ru/web/css/@media/scripting/index.html b/files/ru/web/css/@media/scripting/index.html
new file mode 100644
index 0000000000..92fcbf3192
--- /dev/null
+++ b/files/ru/web/css/@media/scripting/index.html
@@ -0,0 +1,83 @@
+---
+title: scripting
+slug: Web/CSS/@media/scripting
+translation_of: Web/CSS/@media/scripting
+---
+<div>{{cssref}}</div>
+
+<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиа функция</a> <code><strong>scripting</strong></code> может использоваться для проверки доступности скриптов (таких как JavaScript)</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Функция <code><strong>scripting</strong></code> указывается в качестве значения ключевого слова, выбранного из списка ниже.</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Скрипты полностью недоступны в текущем документе.</dd>
+ <dt><code>initial-only</code></dt>
+ <dd>Скрипты включаются во время начальной загрузки страницы, но не после.</dd>
+ <dt><code>enabled</code></dt>
+ <dd>Скрипты поддерживаются и активны в текущем документе.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="script-none"&gt;You do not have scripting available. :-(&lt;/p&gt;
+&lt;p class="script-initial-only"&gt;Your scripting is only enabled during the initial page load. Weird.&lt;/p&gt;
+&lt;p class="script-enabled"&gt;You have scripting enabled! :-)&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  color: lightgray;
+}
+
+@media (scripting: none) {
+  .script-none {
+     color: red;
+  }
+}
+
+@media (scripting: initial-only) {
+  .script-initial-only {
+    color: red;
+  }
+}
+
+@media (scripting: enabled) {
+  .script-enabled {
+    color: red;
+  }
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<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('CSS4 Media Queries', '#scripting', 'scripting')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Отложено до Media Queries Level 5.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.scripting")}}</p>